luca/css-reset
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better build setup and fixed errors

Browse source
This commit is contained in:
Luca 2024-04-19 10:18:13 +02:00
parent a4369d5f1f
commit b2ef81e817
7 changed files with 37 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

30
reset.css
View file

@ -4,8 +4,8 @@ Swap to a sensible box model
*/
*,
**::after,
**::before {
*::after,
*::before {
box-sizing: border-box;
}
@ -15,12 +15,13 @@ Swap to a sensible box model
* {
margin: 0;
padding: 0;
font: inherit
/* that's important for form elements */
font: inherit;
}
/* Dark Mode
Enable dark mode by default
Enable dark mode and specify the website works with both modes by default
*/
html {
color-scheme: dark light;
@ -29,7 +30,7 @@ html {
/* Remove body margin
There is a small margin on the body margin
which we do not need and override anyway
which we do not need and override anyway
*/
body {
@ -41,6 +42,7 @@ body {
a.k.a "Why is there space below?
*/
body {
/* Fallback if browsers don't support dynamic viewport units*/
min-height: 100vh;
min-height: 100svh;
}
@ -65,20 +67,24 @@ canvas {
Could this also be used for canvas elements and videos? Check
*/
img {
font-style: italic;
/* 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;
shape-margin: 1rem;
/* If we float an image, keep a margin around the image */
shape-margin: 1rem;
max-width: 100%;
/* Do not overflow the parent container */
max-width: 100%;
/* to keep the aspect ratio the same */
height: auto;
vertical-align: middle;
/* Get rid of the space at the bottom */
vertical-align: middle;
}
/* Text Balancing for headings
@ -102,14 +108,14 @@ Prevent long lines and orphans of text
*/
p {
max-width: 75ch;
/* 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 it to "none", but an imperceivable amount, so that events like "transitionend" still fire and do not break code.
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) {
@ -134,8 +140,8 @@ Similarly like the rule above, if the user did not explicitly opt out of motion,
/* We use :has(:target) instead of the html element to also apply to inside elements */
:has(:target) {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
/* The page scrolls so there is a 3rem space above the anchor elements position */
scroll-padding-top: 2rem;
}
}