Skip to content

Instantly share code, notes, and snippets.

@shaps80
Last active October 29, 2023 22:43
Show Gist options
  • Save shaps80/31a516ea82f15c245ea5869ea6bbc59f to your computer and use it in GitHub Desktop.
Save shaps80/31a516ea82f15c245ea5869ea6bbc59f to your computer and use it in GitHub Desktop.
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
nav,
ul,
li {
margin: 0;
padding: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
html,
body {
height: 100%;
}
/* Set core body defaults */
body {
text-rendering: optimizeLegibility;
line-height: 1.7;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}
hr {
--color: hsla(0, 0%, 50%, 0.1);
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--color);
margin: 0;
padding: 0;
border-top-color: var(--color);
background-color: var(--color);
color: var(--color);
}
ul {
list-style-type: none;
list-style-position: inside;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@shaps80
Copy link
Author

shaps80 commented Oct 16, 2023

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment