@anyblades/blades 0.28.0-alpha.7 → 0.28.0

package/README.md

@@ -17,7 +17,7 @@
 <!--section:docs,toc-->
 <!-- ToC from https://blades.ninja/css/ with `href="/css/#` instead of `href="#` -->
 <ul class="columns"><li><a href="/css/#install" tabindex="-1">Install</a></li>
-<li><a href="/css/#layout" tabindex="-1">Layout</a><ul><li><a href="/css/#breakout">Breakout elements</a></li>
+<li><a href="/css/#layout" tabindex="-1">Layout</a><ul><li><a href="/css/#breakout">Breakout layout</a></li>
 <li><a href="/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
 <li><a href="/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
 <li><a href="/css/#content" tabindex="-1">Content</a><ul><li><a href="/css/#link-icon">Link icon</a></li>

package/assets/blades.core.css

@@ -25,13 +25,16 @@ Useful for tables of contents and long lists.
 ```css */
 
 .columns {
+  -moz-columns: 30ch auto;
   columns: 30ch auto; /* 2 cols max for 65ch container */
+}
+
+/* Avoid breaking inside elements, such as nested lists */
 
-  /* Avoid breaking inside elements, such as nested lists */
-  > * {
+.columns > * {
+    -moz-column-break-inside: avoid;
     break-inside: avoid;
   }
-}
 
 /*```
 </details>
@@ -60,18 +63,29 @@ Useful for tables of contents and long lists.
   /* Prepare the container for breakout elements */
   padding-inline: 10%;
   max-width: calc(10% + 65ch + 10%);
+}
 
-  /* Breakout direct children only */
-  & > * {
-    &:is(
+/* Breakout direct children only */
+
+.breakout > *:is(
+      table,
+      pre,
+      figure, video, iframe, canvas,
+      img, picture,
+      
+      .breakout-item,
+      .breakout-item-max
+    ),
+      .breakout-all > *:is(
       table,
       pre,
       figure, video, iframe, canvas,
       img, picture,
-      /* Custom utility classes for other tags that need to be broken out */
+      
       .breakout-item,
       .breakout-item-max
     ) {
+      width: -moz-fit-content;
       width: fit-content;
       min-width: 100%;
       max-width: 125%;
@@ -79,33 +93,31 @@ Useful for tables of contents and long lists.
       transform: translateX(-50%);
     }
 
-    /* Respect img/picture min-width */
-    &:is(img, picture) {
+/* Respect img/picture min-width */
+
+.breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
       min-width: auto;
     }
 
-    /* Max out the width of the element */
-    &.breakout-item-max {
+/* Max out the width of the element */
+
+.breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
       width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
     }
-  }
-}
 
-.breakout-all > * {
-  &:is(h2, h3, h4, h5, h6, hr):not([class]) {
+.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
     position: relative;
+  }
 
-    &::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
       content: "";
       display: block;
       position: absolute;
       background: gray;
       opacity: 12.5%;
     }
-  }
 
-  &:is(h2, h3, h4, h5, h6):not([class]) {
-    &::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
       width: 10em;
       right: 100%;
       margin-right: 0.8ch;
@@ -115,26 +127,24 @@ Useful for tables of contents and long lists.
       background: linear-gradient(to left, gray, transparent);
     }
 
-    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
-    &:where(hr + *) {
-      &::before {
+/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
         display: none !important;
       }
-    }
-  }
-  &:is(hr) {
+
+.breakout-all > *:is(hr) {
     height: 0.5rem;
     border: none;
     overflow: visible;
+  }
 
-    &::before {
+.breakout-all > *:is(hr)::before {
       width: 100vw;
       left: 50%;
       height: 100%;
       transform: translateX(-50%);
     }
-  }
-}
 
 /*```
 <!--section:summary-->
@@ -201,8 +211,9 @@ h4,
 h5,
 h6 {
   position: relative;
+}
 
-  a[href^="#"] {
+h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
     position: absolute;
     right: 100%;
     top: 50%;
@@ -212,14 +223,12 @@ h6 {
     text-decoration: none;
     visibility: hidden;
   }
-  @media /* to avoid double-tap on touch devices */ (hover: hover) {
-    &:hover {
-      a[href^="#"] {
+
+@media /* to avoid double-tap on touch devices */ (hover: hover) {
+      h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
         visibility: visible;
       }
-    }
   }
-}
 
 /*```
 </details>
@@ -246,22 +255,21 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
 <details>How it works:
 ```css */
 
-ul,
-ol {
-  &[style*="--list-marker:"] {
+ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
+  }
 
-    > li {
+ul[style*="--list-marker:"] > li, ol[style*="--list-marker:"] > li {
       list-style-type: inherit;
     }
-  }
-  li[style*="--list-marker:"] {
+
+ul li[style*="--list-marker:"], ol li[style*="--list-marker:"] {
     list-style-type: var(--list-marker);
   }
-  li[data-marker]::marker {
+
+ul li[data-marker]::marker, ol li[data-marker]::marker {
     content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
   }
-}
 
 /*```
 </details>
@@ -284,18 +292,18 @@ ol {
 <details>How it works:
 ```css */
 
-ul,
-ol {
-  &.unlist,
-  &.unlist-all,
-  .unlist-all & {
+ul.unlist,
+  ul.unlist-all,
+  .unlist-all ul,
+  ol.unlist,
+  ol.unlist-all,
+  .unlist-all ol {
     padding-inline-start: 0;
+  }
 
-    > li {
+ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
       list-style: none;
     }
-  }
-}
 
 /*```
 </details>
@@ -305,43 +313,42 @@ ol {
 <!--section:code-->
 ```css */
 
-a {
-  /* Use inline flex only if link contains an icon */
-  &:has(> i) {
+/* Use inline flex only if link contains an icon */
+
+a:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
   }
-  > i {
+
+a > i {
     font-style: normal;
     float: left; /*                 ✅ Chrome ❌ Safari */
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+  }
+
+/* Favicons */
 
-    /* Favicons */
-    > img {
+a > i > img {
       height: 1.25em;
       margin-block-start: calc(-0.25em / 2);
       max-width: none; /* to keep ratio safe */
       display: inline-block; /* for Tailwind CSS Typography */
     }
 
-    /* Font Awesome */
-    &[class^="fa-"],
-    &[class*=" fa-"] {
+a > i[class^="fa-"],
+    a > i[class*=" fa-"] {
       line-height: inherit;
       --fa-width: auto;
     }
-    &.fa-lg {
+
+/* Font Awesome */
+
+a > i.fa-lg {
       line-height: normal;
     }
-  }
-}
 
 /*```
-How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
-
-**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
 <!--section:summary-->
 
 Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
@@ -364,6 +371,10 @@ Or even for:
   <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
 </article>
 
+How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
+
+**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
 <!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
@@ -389,21 +400,20 @@ Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
 <details>How it works:
 ```css */
 
-th {
-  hr {
+th hr {
     width: 12ch; /* min ~65/12 = ~5 cols */
     height: 0;
     margin: 0;
     visibility: hidden;
+  }
 
-    &.lg {
+th hr.lg {
       width: 18ch;
     }
-    &.x2 {
+
+th hr.x2 {
       width: 24ch;
     }
-  }
-}
 
 /*```
 </details>
@@ -425,12 +435,10 @@ Living example: https://bladeswitch.com/#minimal-dependencies table
 
 <!--section--> */
 
-table.borderless {
-  th,
-  td {
+table.borderless th,
+  table.borderless td {
     border: none;
   }
-}
 
 /*
 <!--section:code-->
@@ -444,6 +452,7 @@ table.responsive,
   transform: translateX(-50%);
 
   /* Let them full-bleed */
+  width: -moz-max-content;
   width: max-content;
   min-width: auto;
   max-width: 100vw;
@@ -453,12 +462,16 @@ table.responsive,
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+}
 
-  th,
-  td {
+table.responsive th,
+  table.responsive td,
+  .breakout > table:not(.does-not-exist) th,
+  .breakout > table:not(.does-not-exist) td,
+  .breakout-all > table:not(.does-not-exist) th,
+  .breakout-all > table:not(.does-not-exist) td {
     padding-inline-start: 0;
   }
-}
 
 /*```
 `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
@@ -507,44 +520,43 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 pre {
   padding: 1rem 1.5rem;
   padding-inline-end: 2rem;
+}
 
-  @media (max-width: 767px) {
-    border-radius: 0;
-  }
+@media (max-width: 767px) {
+
+pre {
+    border-radius: 0
 }
+  }
+
+/* Code block caption via data-attr (to display filename, etc.) */
 
-code {
-  /* Code block caption via data-attr (to display filename, etc.) */
-  &[data-caption] {
-    &::before {
+code[data-caption]::before {
       content: attr(data-caption);
       display: block;
       margin-bottom: 1rem;
       opacity: 50%;
       font-style: italic;
     }
-  }
 
-  &:where(pre > *) {
+code:where(pre > *) {
     padding: 0;
   }
-}
 
 /* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
 
-.token.treeview-part {
-  .entry-line {
+.token.treeview-part .entry-line {
     width: 2.5em !important;
     opacity: 25%;
   }
-  .entry-name:last-child {
+
+.token.treeview-part .entry-name:last-child {
     opacity: 50%;
+  }
 
-    &::before {
+.token.treeview-part .entry-name:last-child::before {
       display: none !important;
     }
-  }
-}
 
 /*```
 </details>
@@ -564,33 +576,53 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 .has-float-label {
   display: block;
   position: relative;
-  /*
+}
+
+/*
 ```
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
-  > span,
-  label {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
+  .has-float-label > span,
+  .has-float-label label {
     position: absolute;
     left: 0;
     top: 0;
     cursor: text;
     font-size: 75%;
   }
-  /*
+
+/*
 ```
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
-  *:placeholder-shown:not(:focus)::placeholder {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+    opacity: 0;
+  }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-  &:has(*:placeholder-shown:not(:focus)) {
-    > span,
-    label {
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+    opacity: 0;
+  }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+      font-size: inherit;
+      opacity: 50%;
+    }
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+    .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
+    .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-  }
-}
 
 /*
 ```
@@ -622,16 +654,22 @@ Historically, this was not possible: the float label had to be placed after the
 }
 
 .dark-auto {
-  /* Dark color scheme (Auto) */
-  @media (prefers-color-scheme: dark) {
-    filter: var(--blades-dark-filter);
-  }
   /* Dark color scheme (Forced) */
-  &[data-theme="dark"],
-  &:where([data-theme="dark"] *) {
+}
+
+/* Dark color scheme (Auto) */
+
+@media (prefers-color-scheme: dark) {
+
+.dark-auto {
+    filter: var(--blades-dark-filter)
+}
+  }
+
+.dark-auto[data-theme="dark"],
+  .dark-auto:where([data-theme="dark"] *) {
     filter: var(--blades-dark-filter);
   }
-}
 
 /*```
 </details>
@@ -649,11 +687,11 @@ Historically, this was not possible: the float label had to be placed after the
 
 .faded {
   opacity: 50%;
+}
 
-  &:hover {
+.faded:hover {
     opacity: 87.5%;
   }
-}
 
 /*```
 </details>
@@ -661,8 +699,6 @@ Historically, this was not possible: the float label had to be placed after the
 
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
 
-.invert {
-  ::-webkit-scrollbar {
+.invert ::-webkit-scrollbar {
     filter: invert(1) !important;
   }
-}