155 lines
No EOL
2.9 KiB
CSS
155 lines
No EOL
2.9 KiB
CSS
/* Box Sizing Reset
|
|
|
|
Swap to a sensible box model
|
|
*/
|
|
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Remove default spacing and weird fonts from all elements
|
|
|
|
*/
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
/* that's important for form elements */
|
|
font: inherit;
|
|
}
|
|
|
|
/* Dark Mode
|
|
|
|
Enable dark mode and specify the website works with both modes by default
|
|
*/
|
|
html {
|
|
color-scheme: dark light;
|
|
}
|
|
|
|
/* Remove body margin
|
|
|
|
There is a small margin on the body margin
|
|
which we do not need and override anyway
|
|
*/
|
|
|
|
body {
|
|
margin: unset;
|
|
}
|
|
|
|
/* Body Height
|
|
|
|
a.k.a "Why is there space below?
|
|
*/
|
|
body {
|
|
/* Fallback if browsers don't support dynamic viewport units*/
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
}
|
|
|
|
/* Media
|
|
|
|
a.k.a "Why is there space below?"
|
|
*/
|
|
|
|
picture,
|
|
svg,
|
|
video,
|
|
canvas {
|
|
display: block;
|
|
max-inline-size: 100%;
|
|
max-width: 100%;
|
|
block-size: auto;
|
|
}
|
|
|
|
/* Better Image Handling
|
|
|
|
Could this also be used for canvas elements and videos? Check
|
|
*/
|
|
img {
|
|
/* If image can't load, show italic alt text */
|
|
font-style: italic;
|
|
|
|
/* for the low quality image placeholder hack in the background*/
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
/* If we float an image, keep a margin around the image */
|
|
shape-margin: 1rem;
|
|
|
|
/* Do not overflow the parent container */
|
|
max-width: 100%;
|
|
|
|
/* to keep the aspect ratio the same */
|
|
height: auto;
|
|
|
|
/* Get rid of the space at the bottom */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Text Balancing for headings
|
|
|
|
Prevent orphans from appearing and
|
|
balance out headings that span multiple rows
|
|
*/
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Text Balancing for paragraphs
|
|
|
|
Prevent long lines and orphans of text
|
|
*/
|
|
|
|
p {
|
|
/* max-width could also be a custom property like '--line-length' */
|
|
max-width: 75ch;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
/* Accessibility: Reduce motion if user explicitly opts out
|
|
|
|
Hint: We do not set the values to "none", but an imperceivable amount, so that events like "transitionend" still fire and do not break code.
|
|
*/
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Accessibility: Smooth Scroll
|
|
|
|
Similarly like the rule above, if the user did not explicitly opt out of motion, make the scrolling smooth by default
|
|
*/
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
|
|
/* We use :has(:target) instead of the html element to also apply to inside elements */
|
|
:has(:target) {
|
|
scroll-behavior: smooth;
|
|
/* The page scrolls so there is a 3rem space above the anchor elements position */
|
|
scroll-padding-top: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Aligning quotation marks
|
|
|
|
Keep quotation marks outside of the main texts box (this is only supported in Safari. Yes. Only in Safari.)
|
|
*/
|
|
|
|
html {
|
|
hanging-punctuation: first last;
|
|
} |