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

added logic for automatically generating the README one-liner, added ul bullet point position

Browse source
This commit is contained in:
Luca 2024-11-20 14:26:01 +01:00
parent a5d9bda72b
commit c05bd820d7
5 changed files with 356 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

99
reset.css
View file

@ -6,17 +6,17 @@ Swap to a sensible box model
*,
*::after,
*::before {
box-sizing: border-box;
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;
margin: 0;
padding: 0;
/* that's important for form elements */
font: inherit;
}
/* Dark Mode
@ -24,7 +24,7 @@ Swap to a sensible box model
Enable dark mode and specify the website works with both modes by default
*/
html {
color-scheme: dark light;
color-scheme: dark light;
}
/* Remove body margin
@ -34,7 +34,7 @@ which we do not need and override anyway
*/
body {
margin: unset;
margin: unset;
}
/* Body Height
@ -42,9 +42,9 @@ 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;
/* Fallback if browsers don't support dynamic viewport units*/
min-height: 100vh;
min-height: 100svh;
}
/* Media
@ -56,10 +56,10 @@ picture,
svg,
video,
canvas {
display: block;
max-inline-size: 100%;
max-width: 100%;
block-size: auto;
display: block;
max-inline-size: 100%;
max-width: 100%;
block-size: auto;
}
/* Better Image Handling
@ -67,24 +67,24 @@ canvas {
Could this also be used for canvas elements and videos? Check
*/
img {
/* If image can't load, show italic alt text */
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;
/* 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;
/* If we float an image, keep a margin around the image */
shape-margin: 1rem;
/* Do not overflow the parent container */
max-width: 100%;
/* Do not overflow the parent container */
max-width: 100%;
/* to keep the aspect ratio the same */
height: auto;
/* to keep the aspect ratio the same */
height: auto;
/* Get rid of the space at the bottom */
vertical-align: middle;
/* Get rid of the space at the bottom */
vertical-align: middle;
}
/* Text Balancing for headings
@ -99,7 +99,7 @@ h3,
h4,
h5,
h6 {
text-wrap: balance;
text-wrap: balance;
}
/* Text Balancing for paragraphs
@ -108,9 +108,9 @@ 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;
/* 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
@ -119,15 +119,14 @@ Hint: We do not set the values to "none", but an imperceivable amount, so that e
*/
@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;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Accessibility: Smooth Scroll
@ -136,13 +135,12 @@ Similarly like the rule above, if the user did not explicitly opt out of motion,
*/
@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;
}
/* 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
@ -151,6 +149,11 @@ Keep quotation marks outside of the main texts box (this is only supported in Sa
*/
html {
hanging-punctuation: first last;
hanging-punctuation: first last;
}
/* Format lists so the bullet points are not outside of text */
ul,
li {
list-style-position: inside;
}