@anydigital/blades 0.27.0-beta.8 → 0.28.0-alpha

package/src/link-icon.css

@@ -0,0 +1,55 @@
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+<!--section:code-->
+```css */
+a {
+  /* Use inline flex only if link contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+  > i {
+    font-style: normal;
+    float: left; /*                 ✅ Chrome ❌ Safari */
+    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+
+    /* Favicons */
+    > img {
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
+      display: inline-block; /* for Tailwind CSS Typography */
+    }
+
+    /* Font Awesome */
+    &[class^="fa-"],
+    &[class*=" fa-"] {
+      line-height: inherit;
+      --fa-width: auto;
+    }
+    &.fa-lg {
+      line-height: normal;
+    }
+  }
+}
+/*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
+<!--section:docs,summary-->
+
+Use Blades' `<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-->
+
+Compare:
+
+| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
+| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
+| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
+| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |
+
+---
+
+[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
+
+<!--section--> */

package/src/responsive-table.css

@@ -29,21 +29,24 @@ Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:docs-->
+<!--section:docs,summary-->
+
+`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
 
-`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<hr><div>
+<!--section:docs-->
 
-| Term | Description <hr class="x2"> | Link |
-| --- | --- | --- |
+| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div><hr>
+
+---
 
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 Living examples:
+
 - https://any.digital/insights/ai-ide/
 - https://any.digital/insights/css-frameworks/
 - https://any.digital/insights/ssg/

package/src/_link.css

@@ -1,47 +0,0 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->
-```css */
-a {
-  /* Helper to handle 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 */
-
-      /* for tw-typography (.prose) */
-      display: inline-block;
-      margin-bottom: 0;
-    }
-  }
-}
-/*```
-> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
-<!--section:docs-->
-
-### Link [fav]icons
-
-Wrap icons inside links using `<i>...&nbsp;</i>` helper to 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>
-</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>
-</big>
-
-<!--section--> */