@anydigital/blades 0.27.0-beta.7 → 0.27.0-beta.9

package/assets/blades.css

@@ -2,13 +2,11 @@
 
 /* Layout */
 
-/*
+/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
 <!--section:docs-->
 
-### Document
-Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
-
-Prevent horizontal overflow and scrolling, modern way:
+Global styles:
+- Prevent horizontal overflow and scrolling, modern way.
 ```css */
 
 html {
@@ -18,10 +16,8 @@ html {
 /*```
 
 ### Landmarks
-Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
-
-1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
-2. Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
+- Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
+- Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
 ```css */
 
 body {
@@ -36,6 +32,24 @@ body {
 
 /*```
 
+### Auto-columns
+```css */
+
+.columns,
+[data-is-toc] > ul,
+[data-is-toc] > ol {
+  columns: 30ch auto; /* 2 cols max for 65ch container */
+
+  /* Avoid breaking inside elements, such as nested lists */
+  > * {
+    break-inside: avoid;
+  }
+}
+
+/*```
+
+Table of contents (`[data-is-toc]`) has auto-columns by default.
+
 ### Jump to top
 ```css */
 
@@ -218,15 +232,15 @@ h6 {
 
 ### List markers
 
-Use `data-marker="🥷"` helper attribute to customize list markers:
+Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
 <article>
 
-- You can make
-- really {data-marker=❄️}
-- cool {data-marker=🥶}
-- markers {data-marker=🧊}
-- with Blades CSS {data-marker=🥷}
-- using `data-marker` helper attribute.
+- Customize
+- list
+- markers
+- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+
+{style="--list-marker:'🧊 '"}
 </article>
 
 How it works:
@@ -234,10 +248,23 @@ How it works:
 
 ul,
 ol {
+  &[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+
+    > li {
+      list-style-type: inherit;
+    }
+  }
+
+  li[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+  }
   li[data-marker]::marker {
+    /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
 
+  /* Helper class to remove list styling at all */
   &.unlist {
     padding-inline-start: 0;
 
@@ -255,24 +282,17 @@ ol {
 ```css */
 
 a {
-  /* Helper to handle icons in links */
+  /* Helper to handle [fav]icons in links */
   > i {
     display: inline-block;
     font-style: normal;
-  }
-
-  /* Helper for favicons in links */
-  &[data-has-favicon] {
-    display: inline-block;
 
     > img {
-      max-height: 1.25em;
-      margin-top: calc(-0.25em / 2);
-      margin-inline-end: 0.375ch; /* =3/8 */
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
 
       /* for tw-typography (.prose) */
       display: inline-block;
-      margin-bottom: 0;
     }
   }
 }
@@ -284,18 +304,24 @@ a {
 
 ### Link [fav]icons
 
-Wrap icons inside links using `<i>...&nbsp;</i>` helper to avoid underline. Compare:
+Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
 
 <big class="grid">
-  <article><a href="https://github.com/anydigital/blades">   🥷          Blades</a></article>
-  <article><a href="https://github.com/anydigital/blades"><i>🥷&nbsp;</i>Blades</a></article>
+  <article><a href="https://github.com/anydigital/blades">
+       🥷          Blades
+  </a></article>
+  <article><a href="https://github.com/anydigital/blades">
+    <i>🥷&nbsp;</i>Blades
+  </a></article>
 </big>
 
-Use `data-has-favicon` helper attribute on plain-text links containing `<img>`-favicon for better alignment. Compare:
-
 <big class="grid">
-  <article><a href="https://github.com/anydigital/blades"                 ><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
-  <article><a href="https://github.com/anydigital/blades" data-has-favicon><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+  <article><a href="https://github.com/anydigital/blades">
+       <img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64"          >/anydigital/blades
+  </a></article>
+  <article><a href="https://github.com/anydigital/blades">
+    <i><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">&nbsp;</i>/anydigital/blades
+  </a></article>
 </big>
 
 <!--section--> */
@@ -479,24 +505,6 @@ code {
 /*
 <!--section:docs-->
 
-### Auto-columns
-```css */
-
-.columns,
-[data-is-toc] > ul,
-[data-is-toc] > ol {
-  columns: 30ch auto; /* 2 cols max for 65ch container */
-
-  /* Avoid breaking inside elements, such as nested lists */
-  > * {
-    break-inside: avoid;
-  }
-}
-
-/*```
-
-Table of contents (`[data-is-toc]`) has auto-columns by default.
-
 ### Auto-dark
 ```css */
 
@@ -510,7 +518,7 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
 
 /*```
 
-### Misc
+### Faded
 ```css */
 
 .faded {
@@ -520,6 +528,11 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
   }
 }
 
+/*```
+
+### Invert
+```css */
+
 /* Extends https://tailwindcss.com/docs/filter-invert */
 
 .invert {

package/assets/blades.theme.css

@@ -1,3 +1,5 @@
+/* <!--section:code-->
+```css */
 a {
   &:not([href^="#"]) {
     text-decoration-thickness: 1px;
@@ -6,29 +8,39 @@ a {
     }
   }
 }
-
 h1 {
   font-size: 2.5em; /* for pico.css & tw-typography */
   margin-bottom: 1rem; /* for tw-typography */
 }
-
+/* Fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
+:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--pico-typography-spacing-top);
+}
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  & ~ & {
+    margin-top: 2rem;
+  }
+}
 hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
-
 ul {
   ul {
     font-size: 87.5%;
   }
 }
-
 pre {
   small {
     opacity: 75%;
     font-weight: lighter;
   }
 }
-
 table {
   th {
     vertical-align: bottom;
@@ -41,7 +53,6 @@ table {
     margin-bottom: 0.25rem;
   }
 }
-
 [data-jump-to="top"] {
   > i {
     display: inline-block;
@@ -52,7 +63,6 @@ table {
     border-color: black;
   }
 }
-
 [data-is-toc] {
   font-size: 87.5%;
 
@@ -63,7 +73,6 @@ table {
     font-weight: 500;
   }
 }
-
 .breakout,
 .breakout-all {
   > img,
@@ -71,9 +80,10 @@ table {
     margin-bottom: 1rem;
   }
 }
-
 .faded {
   a {
     text-decoration-style: dotted;
   }
 }
+/*```
+<!--section--> */

package/blades.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "0.27.0-beta.7"
+  spec.version       = "0.27.0-beta.9"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/blades",
-  "version": "0.27.0-beta.7",
+  "version": "0.27.0-beta.9",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {

package/src/_layout.css

@@ -1,10 +1,8 @@
-/*
+/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
 <!--section:docs-->
 
-### Document
-Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
-
-Prevent horizontal overflow and scrolling, modern way:
+Global styles:
+- Prevent horizontal overflow and scrolling, modern way.
 ```css */
 html {
   overflow-x: clip;
@@ -12,10 +10,8 @@ html {
 /*```
 
 ### Landmarks
-Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
-
-1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
-2. Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
+- Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
+- Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
 ```css */
 body {
   min-height: 100dvh;
@@ -28,6 +24,22 @@ body {
 }
 /*```
 
+### Auto-columns
+```css */
+.columns,
+[data-is-toc] > ul,
+[data-is-toc] > ol {
+  columns: 30ch auto; /* 2 cols max for 65ch container */
+
+  /* Avoid breaking inside elements, such as nested lists */
+  > * {
+    break-inside: avoid;
+  }
+}
+/*```
+
+Table of contents (`[data-is-toc]`) has auto-columns by default.
+
 ### Jump to top
 ```css */
 [data-jump-to="top"] {

package/src/_link.css

@@ -2,24 +2,17 @@
 <!--section:code-->
 ```css */
 a {
-  /* Helper to handle icons in links */
+  /* Helper to handle [fav]icons in links */
   > i {
     display: inline-block;
     font-style: normal;
-  }
-
-  /* Helper for favicons in links */
-  &[data-has-favicon] {
-    display: inline-block;
 
     > img {
-      max-height: 1.25em;
-      margin-top: calc(-0.25em / 2);
-      margin-inline-end: 0.375ch; /* =3/8 */
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
 
       /* for tw-typography (.prose) */
       display: inline-block;
-      margin-bottom: 0;
     }
   }
 }
@@ -30,18 +23,24 @@ a {
 
 ### Link [fav]icons
 
-Wrap icons inside links using `<i>...&nbsp;</i>` helper to avoid underline. Compare:
+Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
 
 <big class="grid">
-  <article><a href="https://github.com/anydigital/blades">   🥷          Blades</a></article>
-  <article><a href="https://github.com/anydigital/blades"><i>🥷&nbsp;</i>Blades</a></article>
+  <article><a href="https://github.com/anydigital/blades">
+       🥷          Blades
+  </a></article>
+  <article><a href="https://github.com/anydigital/blades">
+    <i>🥷&nbsp;</i>Blades
+  </a></article>
 </big>
 
-Use `data-has-favicon` helper attribute on plain-text links containing `<img>`-favicon for better alignment. Compare:
-
 <big class="grid">
-  <article><a href="https://github.com/anydigital/blades"                 ><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
-  <article><a href="https://github.com/anydigital/blades" data-has-favicon><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+  <article><a href="https://github.com/anydigital/blades">
+       <img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64"          >/anydigital/blades
+  </a></article>
+  <article><a href="https://github.com/anydigital/blades">
+    <i><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">&nbsp;</i>/anydigital/blades
+  </a></article>
 </big>
 
 <!--section--> */

package/src/_typography.css

@@ -59,25 +59,38 @@ h6 {
 
 ### List markers
 
-Use `data-marker="🥷"` helper attribute to customize list markers:
+Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
 <article>
 
-- You can make
-- really {data-marker=❄️}
-- cool {data-marker=🥶}
-- markers {data-marker=🧊}
-- with Blades CSS {data-marker=🥷}
-- using `data-marker` helper attribute.
+- Customize
+- list
+- markers
+- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+
+{style="--list-marker:'🧊 '"}
 </article>
 
 How it works:
 ```css */
 ul,
 ol {
+  &[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+
+    > li {
+      list-style-type: inherit;
+    }
+  }
+
+  li[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+  }
   li[data-marker]::marker {
+    /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
 
+  /* Helper class to remove list styling at all */
   &.unlist {
     padding-inline-start: 0;
 

package/src/_unreduce-motion.css

@@ -1,5 +1,7 @@
-/* <!--section:docs-->
-Overrides for https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss
+/* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss
+<!--section:docs-->
+
+### Unreduce motion
 ```css */
 @utility unreduce-animation-* {
   @media (prefers-reduced-motion: reduce) {
@@ -10,4 +12,5 @@ Overrides for https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-m
     }
   }
 }
-/*``` <!--section--> */
+/*```
+<!--section--> */

package/src/_utilities.css

@@ -1,22 +1,6 @@
 /*
 <!--section:docs-->
 
-### Auto-columns
-```css */
-.columns,
-[data-is-toc] > ul,
-[data-is-toc] > ol {
-  columns: 30ch auto; /* 2 cols max for 65ch container */
-
-  /* Avoid breaking inside elements, such as nested lists */
-  > * {
-    break-inside: avoid;
-  }
-}
-/*```
-
-Table of contents (`[data-is-toc]`) has auto-columns by default.
-
 ### Auto-dark
 ```css */
 @media (prefers-color-scheme: dark) {
@@ -28,7 +12,7 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
 }
 /*```
 
-### Misc
+### Faded
 ```css */
 .faded {
   opacity: 50%;
@@ -36,7 +20,10 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
     opacity: 87.5%;
   }
 }
+/*```
 
+### Invert
+```css */
 /* Extends https://tailwindcss.com/docs/filter-invert */
 .invert {
   /* Fix the scrollbar color when inverted */

package/src/blades.theme.css

@@ -1,3 +1,5 @@
+/* <!--section:code-->
+```css */
 a {
   &:not([href^="#"]) {
     text-decoration-thickness: 1px;
@@ -12,6 +14,22 @@ h1 {
   margin-bottom: 1rem; /* for tw-typography */
 }
 
+/* Fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
+:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--pico-typography-spacing-top);
+}
+*/
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  & ~ & {
+    margin-top: 2rem;
+  }
+}
+
 hr {
   margin-block: 2em; /* for pico.css & tw-typography */
 }
@@ -77,3 +95,5 @@ table {
     text-decoration-style: dotted;
   }
 }
+/*```
+<!--section--> */