diff --git a/.gitignore b/.gitignore
index a547bf3..c13cd37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?
+
+.build/*
+!.build/reset.css
\ No newline at end of file
diff --git a/build/reset.css b/build/reset.css
new file mode 100644
index 0000000..95d68c9
--- /dev/null
+++ b/build/reset.css
@@ -0,0 +1 @@
+*,*:after,*:before{box-sizing:border-box}*{margin:0;padding:0;font:inherit}html{color-scheme:dark light}body{margin:unset}body{min-height:100vh;min-height:100svh}picture,svg,video,canvas{display:block;max-inline-size:100%;max-width:100%;block-size:auto}img{font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:1rem;max-width:100%;height:auto;vertical-align:middle}h1,h2,h3,h4,h5,h6{text-wrap:balance}p{max-width:75ch;text-wrap:pretty}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-reduced-motion: no-preference){:has(:target){scroll-behavior:smooth;scroll-padding-top:2rem}}html{hanging-punctuation:first last}
diff --git a/index.html b/index.html
index b906f7b..d371b39 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,9 @@
-
-
- CSS Reset 2024
+
+ CSS Reset 2024 Example
Heading Level One
diff --git a/public/vite.svg b/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/reset.css b/reset.css
index 3e89551..ab02d53 100644
--- a/reset.css
+++ b/reset.css
@@ -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;
}
}
diff --git a/style.css b/style.css
deleted file mode 100644
index c5975e7..0000000
--- a/style.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url(reset.css);
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..6a165ba
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+ build: {
+ cssMinify: 'esbuild',
+ outDir: "build",
+ rollupOptions: {
+ output: {
+ assetFileNames: "reset[extname]"
+ }
+ }
+ },
+})
\ No newline at end of file