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

3
.gitignore vendored
View file

@ -22,3 +22,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?
.build/*
!.build/reset.css

1
build/reset.css Normal file
View file

@ -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}

5
index.html
View file

@ -2,10 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Reset 2024</title>
<link rel="stylesheet" href="reset.css" />
<title>CSS Reset 2024 Example</title>
</head>
<body>
<h1>Heading Level One</h1>

1
public/vite.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

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;
}
}

1
style.css
View file

@ -1 +0,0 @@
@import url(reset.css);

13
vite.config.js Normal file
View file

@ -0,0 +1,13 @@
import { defineConfig } from 'vite'
export default defineConfig({
build: {
cssMinify: 'esbuild',
outDir: "build",
rollupOptions: {
output: {
assetFileNames: "reset[extname]"
}
}
},
})