@anydigital/blades 0.27.0-beta.11 → 0.27.0-beta.12

package/README.md

@@ -136,8 +136,16 @@ Or use a preconfigured template:
 
 - Featured by:
   - https://github.com/uhub/awesome-css
-  - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
   - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
+  - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
+  - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
+  - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
+  - https://github.com/hostfurl/minformhf starter
+- Showcase:
+  - https://any.digital/ (Pico ⁺ Blades)
+  - https://build.blades.ninja/ (Tailwind ⁺ Blades)
+  - https://bladeswitch.com/ (Pico ⁺ Blades)
+  - https://minform.hostfurl.com/ (Pico ⁺ Blades)
 - Credits:
   - https://picocss.com/ for inspiration
   - https://11ty.dev/ for build power

package/assets/blades.css

@@ -282,10 +282,25 @@ ol {
 ```css */
 
 a {
+  /* Display as inline flex, if it contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+
+  /* Font Awesome specials */
+  &:has(> i[class^="fa-"]),
+  &:has(> i[class*=" fa-"]) {
+    gap: 0.125ch; /* =1/8 */
+  }
+
   /* Helper to handle [fav]icons in links */
   > i {
-    display: inline-block;
     font-style: normal;
+    float: left; /*                ✅ Chrome ❌ Safari */
+    text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
 
     > img {
       height: 1.25em;
@@ -302,24 +317,30 @@ a {
 
 <!--section:docs-->
 
-### Link [fav]icons
-
-Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
+Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
 
 <big class="grid">
-  <article><a href="https://blades.ninja/">   🥷          Blades</a></article>
-  <article><a href="https://blades.ninja/"><i>🥷&nbsp;</i>Blades</a></article>
+  <article><a href="https://blades.ninja/">   🥷     Blades</a></article>
+  <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
 </big>
 
 <big class="grid">
   <article><a href="https://any.digital/">
-       <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"         > any.digital
+       <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">     any.digital
   </a></article>
   <article><a href="https://any.digital/">
-    <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">&nbsp;</i>any.digital
+    <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
   </a></article>
 </big>
 
+Or simply drop-in any Font Awesome icon (without wrapping it):
+
+<big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
+
+---
+
+[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
+
 <!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss

package/assets/link-icon.css

@@ -0,0 +1,63 @@
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+<!--section:code-->
+```css */
+a {
+  /* Display as inline flex, if it contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+
+  /* Font Awesome specials */
+  &:has(> i[class^="fa-"]),
+  &:has(> i[class*=" fa-"]) {
+    gap: 0.125ch; /* =1/8 */
+  }
+
+  /* Helper to handle [fav]icons in links */
+  > i {
+    font-style: normal;
+    float: left; /*                ✅ Chrome ❌ Safari */
+    text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+
+    > img {
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
+
+      /* for tw-typography (.prose) */
+      display: inline-block;
+    }
+  }
+}
+/*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
+<!--section:docs-->
+
+Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
+
+<big class="grid">
+  <article><a href="https://blades.ninja/">   🥷     Blades</a></article>
+  <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
+</big>
+
+<big class="grid">
+  <article><a href="https://any.digital/">
+       <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">     any.digital
+  </a></article>
+  <article><a href="https://any.digital/">
+    <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
+  </a></article>
+</big>
+
+Or simply drop-in any Font Awesome icon (without wrapping it):
+
+<big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
+
+---
+
+[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/blades.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "0.27.0-beta.11"
+  spec.version       = "0.27.0-beta.12"
   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.11",
+  "version": "0.27.0-beta.12",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {

package/src/blades.css

@@ -6,7 +6,7 @@
 
 /* Content */
 @import "./_typography";
-@import "./_link";
+@import "./link-icon";
 @import "./_table";
 @import "./responsive-table";
 @import "./_code";

package/src/link-icon.css

@@ -0,0 +1,63 @@
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+<!--section:code-->
+```css */
+a {
+  /* Display as inline flex, if it contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+
+  /* Font Awesome specials */
+  &:has(> i[class^="fa-"]),
+  &:has(> i[class*=" fa-"]) {
+    gap: 0.125ch; /* =1/8 */
+  }
+
+  /* Helper to handle [fav]icons in links */
+  > i {
+    font-style: normal;
+    float: left; /*                ✅ Chrome ❌ Safari */
+    text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+
+    > img {
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
+
+      /* for tw-typography (.prose) */
+      display: inline-block;
+    }
+  }
+}
+/*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
+<!--section:docs-->
+
+Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
+
+<big class="grid">
+  <article><a href="https://blades.ninja/">   🥷     Blades</a></article>
+  <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
+</big>
+
+<big class="grid">
+  <article><a href="https://any.digital/">
+       <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">     any.digital
+  </a></article>
+  <article><a href="https://any.digital/">
+    <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
+  </a></article>
+</big>
+
+Or simply drop-in any Font Awesome icon (without wrapping it):
+
+<big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
+
+---
+
+[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/_link.css

@@ -1,42 +0,0 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->
-```css */
-a {
-  /* Helper to handle [fav]icons in links */
-  > i {
-    display: inline-block;
-    font-style: normal;
-
-    > img {
-      height: 1.25em;
-      margin-block: calc(-0.25em / 2);
-
-      /* for tw-typography (.prose) */
-      display: inline-block;
-    }
-  }
-}
-/*```
-> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
-<!--section:docs-->
-
-### Link [fav]icons
-
-Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
-
-<big class="grid">
-  <article><a href="https://blades.ninja/">   🥷          Blades</a></article>
-  <article><a href="https://blades.ninja/"><i>🥷&nbsp;</i>Blades</a></article>
-</big>
-
-<big class="grid">
-  <article><a href="https://any.digital/">
-       <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"         > any.digital
-  </a></article>
-  <article><a href="https://any.digital/">
-    <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">&nbsp;</i>any.digital
-  </a></article>
-</big>
-
-<!--section--> */