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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +1 -1
  2. package/assets/blades.css +22 -28
  3. package/assets/link-icon.css +22 -28
  4. package/blades.gemspec +1 -1
  5. package/package.json +1 -1
  6. package/src/link-icon.css +22 -28
package/README.md CHANGED
@@ -30,7 +30,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
30
30
  <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
31
31
  <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
32
32
  <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
33
- <li><a href="https://blades.ninja/css/#link-fav-icons">Link [fav]icons</a></li>
33
+ <li><a href="https://blades.ninja/css/link-icon/">🥷 Link [fav]icons →</a></li>
34
34
  <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
35
35
  <li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/">🥷 Responsive table without wrapper →</a></li>
36
36
  <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
package/assets/blades.css CHANGED
@@ -282,32 +282,36 @@ ol {
282
282
  ```css */
283
283
 
284
284
  a {
285
- /* Display as inline flex, if it contains an icon */
285
+ /* If link contains an icon, use inline flex */
286
286
  &:has(> i) {
287
287
  display: inline-flex;
288
- align-items: center;
289
288
  gap: 0.375ch; /* =3/8 */
289
+ text-wrap: balance;
290
290
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
291
291
  }
292
292
 
293
- /* Font Awesome specials */
294
- &:has(> i[class^="fa-"]),
295
- &:has(> i[class*=" fa-"]) {
296
- gap: 0.125ch; /* =1/8 */
297
- }
298
-
299
293
  /* Helper to handle [fav]icons in links */
300
294
  > i {
301
295
  font-style: normal;
302
296
  float: left; /* ✅ Chrome ❌ Safari */
303
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
297
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
304
298
 
299
+ /* Favicons */
305
300
  > img {
306
301
  height: 1.25em;
307
302
  margin-block: calc(-0.25em / 2);
303
+ display: inline-block; /* for Tailwind CSS Typography */
304
+ }
308
305
 
309
- /* for tw-typography (.prose) */
310
- display: inline-block;
306
+ /* Font Awesome */
307
+ &[class^="fa-"],
308
+ &[class*=" fa-"] {
309
+ line-height: inherit;
310
+ margin-inline-start: -0.25ch;
311
+ margin-inline-end: -0.125ch; /* =1/8 */
312
+ }
313
+ &.fa-lg {
314
+ line-height: normal;
311
315
  }
312
316
  }
313
317
  }
@@ -317,25 +321,15 @@ a {
317
321
 
318
322
  <!--section:docs-->
319
323
 
320
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
324
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
321
325
 
322
- <big class="grid">
323
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
324
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
325
- </big>
326
-
327
- <big class="grid">
328
- <article><a href="https://any.digital/">
329
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
330
- </a></article>
331
- <article><a href="https://any.digital/">
332
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
333
- </a></article>
334
- </big>
335
-
336
- Or simply drop-in any Font Awesome icon (without wrapping it):
326
+ ---
337
327
 
338
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
328
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
329
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
330
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
331
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
332
+ | [<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>` |
339
333
 
340
334
  ---
341
335
 
package/assets/link-icon.css CHANGED
@@ -2,32 +2,36 @@
2
2
  <!--section:code-->
3
3
  ```css */
4
4
  a {
5
- /* Display as inline flex, if it contains an icon */
5
+ /* If link contains an icon, use inline flex */
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
- align-items: center;
9
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
11
  }
12
12
 
13
- /* Font Awesome specials */
14
- &:has(> i[class^="fa-"]),
15
- &:has(> i[class*=" fa-"]) {
16
- gap: 0.125ch; /* =1/8 */
17
- }
18
-
19
13
  /* Helper to handle [fav]icons in links */
20
14
  > i {
21
15
  font-style: normal;
22
16
  float: left; /* ✅ Chrome ❌ Safari */
23
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
24
18
 
19
+ /* Favicons */
25
20
  > img {
26
21
  height: 1.25em;
27
22
  margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
28
25
 
29
- /* for tw-typography (.prose) */
30
- display: inline-block;
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ margin-inline-start: -0.25ch;
31
+ margin-inline-end: -0.125ch; /* =1/8 */
32
+ }
33
+ &.fa-lg {
34
+ line-height: normal;
31
35
  }
32
36
  }
33
37
  }
@@ -36,25 +40,15 @@ a {
36
40
 
37
41
  <!--section:docs-->
38
42
 
39
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
43
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
40
44
 
41
- <big class="grid">
42
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
43
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
44
- </big>
45
-
46
- <big class="grid">
47
- <article><a href="https://any.digital/">
48
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
49
- </a></article>
50
- <article><a href="https://any.digital/">
51
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
52
- </a></article>
53
- </big>
54
-
55
- Or simply drop-in any Font Awesome icon (without wrapping it):
45
+ ---
56
46
 
57
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
47
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
48
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
49
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
50
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
51
+ | [<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>` |
58
52
 
59
53
  ---
60
54
 
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "0.27.0-beta.12"
5
+ spec.version = "0.27.0-beta.14"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/blades",
3
- "version": "0.27.0-beta.12",
3
+ "version": "0.27.0-beta.14",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "style": "./assets/blades.css",
6
6
  "exports": {
package/src/link-icon.css CHANGED
@@ -2,32 +2,36 @@
2
2
  <!--section:code-->
3
3
  ```css */
4
4
  a {
5
- /* Display as inline flex, if it contains an icon */
5
+ /* If link contains an icon, use inline flex */
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
- align-items: center;
9
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
11
  }
12
12
 
13
- /* Font Awesome specials */
14
- &:has(> i[class^="fa-"]),
15
- &:has(> i[class*=" fa-"]) {
16
- gap: 0.125ch; /* =1/8 */
17
- }
18
-
19
13
  /* Helper to handle [fav]icons in links */
20
14
  > i {
21
15
  font-style: normal;
22
16
  float: left; /* ✅ Chrome ❌ Safari */
23
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
24
18
 
19
+ /* Favicons */
25
20
  > img {
26
21
  height: 1.25em;
27
22
  margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
28
25
 
29
- /* for tw-typography (.prose) */
30
- display: inline-block;
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ margin-inline-start: -0.25ch;
31
+ margin-inline-end: -0.125ch; /* =1/8 */
32
+ }
33
+ &.fa-lg {
34
+ line-height: normal;
31
35
  }
32
36
  }
33
37
  }
@@ -36,25 +40,15 @@ a {
36
40
 
37
41
  <!--section:docs-->
38
42
 
39
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
43
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
40
44
 
41
- <big class="grid">
42
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
43
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
44
- </big>
45
-
46
- <big class="grid">
47
- <article><a href="https://any.digital/">
48
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
49
- </a></article>
50
- <article><a href="https://any.digital/">
51
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
52
- </a></article>
53
- </big>
54
-
55
- Or simply drop-in any Font Awesome icon (without wrapping it):
45
+ ---
56
46
 
57
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
47
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
48
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
49
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
50
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
51
+ | [<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>` |
58
52
 
59
53
  ---
60
54