Add a position relative wildcard rule, merged with box-sizing

.gitignore

@@ -1,9 +1,9 @@
 *.log
 npm-debug.*
 *.scssc
+*.log
 *.swp
 .DS_Store
 .sass-cache
 node_modules
 test.html
-.idea

README.md

@@ -5,62 +5,20 @@
 ![The Brotli size of this reset](https://img.badgesize.io/https://unpkg.com/modern-css-reset?compression=brotli&label=Brotli%20Size)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-A tiny little reset that you can use as the basis of your CSS projects. You can
+A tiny little reset that you can use as the basis of your CSS projects. You can read a [breakdown of it here](https://hankchizljaw.com/wrote/a-modern-css-reset/).
-read
-a [breakdown of it here](https://hankchizljaw.com/wrote/a-modern-css-reset/).
 
 ## Installation
 
-NPM:
+- NPM: `npm install modern-css-reset`
+- Yarn: `yarn add modern-css-reset`
+- CDN:
+  - Unpkg: `<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />`
+  - jsDelivr: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />`
 
-```console
+## Commands
-npm install --save-dev @punkfairie/modern-css-reset
-```
 
-Yarn:
+You can minify and move the main reset to the `dist` by running:
 
-```console
+```bash
-yarn add @punkfairie/modern-css-reset
-```
-
-Unpkg CDN:
-
-```html
-
-<link rel="stylesheet"
-    href="https://unpkg.com/@punkfairie/modern-css-reset/dist/reset.min.css"/>
-```
-
-jsDelivr CDN:
-
-```html
-
-<link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@punkfairie/modern-css-reset/dist/reset.min.css"/>
-```
-
-### Manual installation
-
-First, let's clone this repository:
-
-```console
-git clone https://github.com/punkfairie/modern-css-reset.git
-```
-
-Then, go to `modern-css-reset` directory:
-
-```console
-cd modern-css-reset
-```
-
-And now, you can minify and move the main reset to the `dist` by running:
-
-```console
 npm run build
 ```
-
-That's it! 🎉
-
-## License
-
-MIT

dist/reset.css

@@ -1,9 +1,15 @@
-@layer reset {
+/* Box sizing and position relative rules */
-    /* Box sizing rules */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
+  position: relative;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
 }
 
 /* Remove default margin */
@@ -13,43 +19,47 @@
 h3,
 h4,
 p,
+ul[class],
+ol[class],
+li,
 figure,
+figcaption,
 blockquote,
 dl,
 dd {
   margin: 0;
 }
 
-    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-    ul[role="list"],
-    ol[role="list"] {
-        list-style: none;
-    }
-
-    /* Set core root defaults */
-    html:focus-within {
-        scroll-behavior: smooth;
-    }
-
 /* Set core body defaults */
 body {
-        min-block-size: 100vb;
+  min-height: 100vh;
+  scroll-behavior: smooth;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }
 
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
 /* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
 /* Make images easier to work with */
-    img,
+img {
-    picture {
+  max-width: 100%;
-        max-inline-size: 100%;
   display: block;
 }
 
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
 /* Inherit fonts for inputs and buttons */
 input,
 button,
@@ -57,4 +67,13 @@
 select {
   font: inherit;
 }
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }

dist/reset.min.css

@@ -1 +1 @@
-@layer reset{*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-block-size:100vb;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}}
+*,*::before,*::after{box-sizing:border-box;position:relative}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "modern-css-reset",
-  "version": "1.4.0",
+  "version": "1.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@punkfairie/modern-css-reset",
+  "name": "modern-css-reset",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "A bare-bones CSS reset for modern web development",
   "main": "./dist/reset.min.css",
   "scripts": {
@@ -8,21 +8,15 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/punkfairie/modern-css-reset.git"
+    "url": "git+https://github.com/hankchizljaw/modern-css-reset.git"
   },
-  "keywords": [
+  "keywords": [],
-    "css reset",
+  "author": "",
-    "modern css reset"
-  ],
-  "author": "Marley Rae <marleyrae@protonmail.com> (https://punkfairie.net)",
-  "contributors": [
-    "Andy Bell <me@andy-bell.design> (https://hankchizljaw.com)"
-  ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/punkfairie/modern-css-reset/issues"
+    "url": "https://github.com/hankchizljaw/modern-css-reset/issues"
   },
-  "homepage": "https://github.com/punkfairie/modern-css-reset#readme",
+  "homepage": "https://github.com/hankchizljaw/modern-css-reset#readme",
   "devDependencies": {
     "uglifycss": "0.0.29"
   }

src/reset.css

@@ -1,9 +1,15 @@
-@layer reset {
+/* Box sizing and position relative rules */
-    /* Box sizing rules */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
+  position: relative;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
 }
 
 /* Remove default margin */
@@ -13,43 +19,47 @@
 h3,
 h4,
 p,
+ul[class],
+ol[class],
+li,
 figure,
+figcaption,
 blockquote,
 dl,
 dd {
   margin: 0;
 }
 
-    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-    ul[role="list"],
-    ol[role="list"] {
-        list-style: none;
-    }
-
-    /* Set core root defaults */
-    html:focus-within {
-        scroll-behavior: smooth;
-    }
-
 /* Set core body defaults */
 body {
-        min-block-size: 100vb;
+  min-height: 100vh;
+  scroll-behavior: smooth;
   text-rendering: optimizeSpeed;
   line-height: 1.5;
 }
 
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
 /* A elements that don't have a class get default styles */
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
 
 /* Make images easier to work with */
-    img,
+img {
-    picture {
+  max-width: 100%;
-        max-inline-size: 100%;
   display: block;
 }
 
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
 /* Inherit fonts for inputs and buttons */
 input,
 button,
@@ -57,4 +67,13 @@
 select {
   font: inherit;
 }
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }