@anyblades/blades 0.28.0 → 2.2.0

package/assets/{blades.core.css → blades.standalone.core.css}

@@ -3,7 +3,7 @@
 /* Layout */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs-->
+\3c !--section:docs,columns-->
 
 ### Auto-columns
 
@@ -21,12 +21,12 @@ The smaller the font size, the more columns will be created:
 
 Useful for tables of contents and long lists.
 
-<details>How it works:
+How it works:
 ```css */
 
 .columns {
-  -moz-columns: 30ch auto;
-  columns: 30ch auto; /* 2 cols max for 65ch container */
+  -moz-columns: 25ch auto;
+  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
 }
 
 /* Avoid breaking inside elements, such as nested lists */
@@ -37,7 +37,7 @@ Useful for tables of contents and long lists.
   }
 
 /*```
-</details>
+\3c !--section:docs,jump-->
 
 ### Jump to top
 
@@ -52,10 +52,10 @@ Useful for tables of contents and long lists.
 }
 
 /*```
-<!--section--> */
+\3c !--section--> */
 
 /*
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 
 .breakout,
@@ -147,17 +147,17 @@ Useful for tables of contents and long lists.
     }
 
 /*```
-<!--section:summary-->
+\3c !--section:summary-->
 
 The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
-### Demo <!-- inside parent .breakout -->
+### Demo \3c !-- inside parent .breakout -->
 
 Break out a wide image from the text flow:
 
-<div><!-- Dummy div to avoid p tag in Markdown --></div><img
+<div>\3c !-- Dummy div to avoid p tag in Markdown --></div><img
   src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
 
 Or table:
@@ -186,12 +186,12 @@ Or anything else:
 <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
 <hr>
 
-<!--section--> */
+\3c !--section--> */
 
 /* Content */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs-->
+\3c !--section:docs,h-anchor-->
 
 ### Heading anchors
 
@@ -201,7 +201,7 @@ Links with `href="#..."` inside headings are automatically displayed as anchors:
   <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 
 h1,
@@ -231,10 +231,11 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
   }
 
 /*```
-</details>
 
 **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
 
+\3c !--section:docs,list-->
+
 ### List markers
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
@@ -252,7 +253,7 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
 {style="--list-marker:'→ '"}
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 
 ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
@@ -272,7 +273,6 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
   }
 
 /*```
-</details>
 
 ### Unlist
 
@@ -289,7 +289,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
 
 `.unlist-all` also removes styling from all nested lists.
 
-<details>How it works:
+How it works:
 ```css */
 
 ul.unlist,
@@ -306,11 +306,10 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
     }
 
 /*```
-</details>
-<!--section--> */
+\3c !--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 
 /* Use inline flex only if link contains an icon */
@@ -349,12 +348,12 @@ a > i.fa-lg {
     }
 
 /*```
-<!--section:summary-->
+\3c !--section:summary-->
 
 Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
 It automatically handles sizing and alignment while preventing underline on icons.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
 <article class="breakout-item">
 
@@ -375,10 +374,10 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
 
 **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
-<!--section--> */
+\3c !--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
-<!--section:docs-->
+\3c !--section:docs-->
 
 ### Column expanders
 
@@ -391,13 +390,13 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
 | (012) 345-6789 | (012) 345-6789 |
 </article>
 
-Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
+Living examples of big tables with `<hr>`-expanders: \3c !--A-Z-->
 - https://blades.ninja/ai/ide/
 - https://blades.ninja/build-awesome-11ty/starters/
 - https://blades.ninja/css/frameworks/
 - https://blades.ninja/ssg/
 
-<details>How it works:
+How it works:
 ```css */
 
 th hr {
@@ -416,7 +415,6 @@ th hr.x2 {
     }
 
 /*```
-</details>
 
 ### Borderless table
 
@@ -433,7 +431,7 @@ th hr.x2 {
 
 Living example: https://bladeswitch.com/#minimal-dependencies table
 
-<!--section--> */
+\3c !--section--> */
 
 table.borderless th,
   table.borderless td {
@@ -441,7 +439,7 @@ table.borderless th,
   }
 
 /*
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 
 table.responsive,
@@ -476,12 +474,12 @@ table.responsive th,
 /*```
 `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:summary-->
+\3c !--section:summary-->
 
 `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
 ### Demo table
 
@@ -493,16 +491,16 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 ---
 
-Living examples: <!--A-Z-->
+Living examples: \3c !--A-Z-->
 - https://blades.ninja/ai/ide/
 - https://blades.ninja/build-awesome-11ty/starters/
 - https://blades.ninja/css/frameworks/
 - https://blades.ninja/ssg/
 
-<!--section--> */
+\3c !--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
-<!--section:docs-->
+\3c !--section:docs-->
 
 ### Code
 
@@ -514,7 +512,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 ├── blades.theme.css    # minimal opinionated theme
 └── blades.css          # above two together
 ```
-<details>How it works:
+How it works:
 ```css */
 
 pre {
@@ -559,13 +557,12 @@ code:where(pre > *) {
     }
 
 /*```
-</details>
-<!--section--> */
+\3c !--section--> */
 
 /* Forms */
 
 /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
-<!--section:docs-->
+\3c !--section:docs-->
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
@@ -629,12 +626,12 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
 
 Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
-<!--section--> */
+\3c !--section--> */
 
 /* Utilities */
 
 /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
-<!--section:docs-->
+\3c !--section:docs-->
 
 ### Auto-dark
 
@@ -644,7 +641,7 @@ Historically, this was not possible: the float label had to be placed after the
   <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 
 /* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
@@ -672,7 +669,6 @@ Historically, this was not possible: the float label had to be placed after the
   }
 
 /*```
-</details>
 
 ### Faded
 
@@ -682,7 +678,7 @@ Historically, this was not possible: the float label had to be placed after the
   Hover to unfade me!
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 
 .faded {
@@ -694,8 +690,7 @@ Historically, this was not possible: the float label had to be placed after the
   }
 
 /*```
-</details>
-<!--section--> */
+\3c !--section--> */
 
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */