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

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 +5 -4
  2. package/assets/blades.css +11 -9
  3. package/assets/link-icon.css +8 -9
  4. package/package.json +1 -1
  5. package/src/_table.css +3 -0
  6. package/src/link-icon.css +8 -9
package/README.md CHANGED
@@ -24,15 +24,15 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
24
24
  <!-- copy-paste of ToC from https://blades.ninja/css/ -->
25
25
  <ul class="unlist columns">
26
26
  <li><a href="https://blades.ninja/css/#install">Install</a></li>
27
- <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">🥷 Breakout elements →</a></li>
27
+ <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/"><i>🥷</i> Breakout elements →</a></li>
28
28
  <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
29
29
  <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
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-icon/">🥷 Link [fav]icons →</a></li>
33
+ <li><a href="https://blades.ninja/css/link-icon/"><i>🥷</i> Link [fav]icons →</a></li>
34
34
  <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
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>
35
+ <li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/"><i>🥷</i> Responsive table without wrapper →</a></li>
36
36
  <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
37
37
  <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
38
38
  <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
@@ -136,8 +136,9 @@ Or use a preconfigured template:
136
136
 
137
137
  - Featured by:
138
138
  - https://github.com/uhub/awesome-css
139
- - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
139
+ - 🕶️ [Awesome-CSS-Frameworks-and-UI-Libraries](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
140
140
  - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
141
+ - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
141
142
  - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
142
143
  - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
143
144
  - https://github.com/hostfurl/minformhf starter
package/assets/blades.css CHANGED
@@ -293,7 +293,7 @@ a {
293
293
  /* Helper to handle [fav]icons in links */
294
294
  > i {
295
295
  font-style: normal;
296
- float: left; /* ✅ Chrome ❌ Safari */
296
+ float: left; /* ✅ Chrome ❌ Safari */
297
297
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
298
298
 
299
299
  /* Favicons */
@@ -307,8 +307,7 @@ a {
307
307
  &[class^="fa-"],
308
308
  &[class*=" fa-"] {
309
309
  line-height: inherit;
310
- margin-inline-start: -0.25ch;
311
- margin-inline-end: -0.125ch; /* =1/8 */
310
+ --fa-width: auto;
312
311
  }
313
312
  &.fa-lg {
314
313
  line-height: normal;
@@ -321,15 +320,15 @@ a {
321
320
 
322
321
  <!--section:docs-->
323
322
 
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:
323
+ 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. Compare:
325
324
 
326
325
  ---
327
326
 
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>` |
327
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
328
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
329
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
330
+ | [![](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>` |
331
+ | [<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>` |
333
332
 
334
333
  ---
335
334
 
@@ -373,6 +372,9 @@ table {
373
372
  margin: 0;
374
373
  visibility: hidden;
375
374
 
375
+ &.lg {
376
+ width: 18ch;
377
+ }
376
378
  &.x2 {
377
379
  width: 24ch;
378
380
  }
package/assets/link-icon.css CHANGED
@@ -13,7 +13,7 @@ a {
13
13
  /* Helper to handle [fav]icons in links */
14
14
  > i {
15
15
  font-style: normal;
16
- float: left; /* ✅ Chrome ❌ Safari */
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
17
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
18
18
 
19
19
  /* Favicons */
@@ -27,8 +27,7 @@ a {
27
27
  &[class^="fa-"],
28
28
  &[class*=" fa-"] {
29
29
  line-height: inherit;
30
- margin-inline-start: -0.25ch;
31
- margin-inline-end: -0.125ch; /* =1/8 */
30
+ --fa-width: auto;
32
31
  }
33
32
  &.fa-lg {
34
33
  line-height: normal;
@@ -40,15 +39,15 @@ a {
40
39
 
41
40
  <!--section:docs-->
42
41
 
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:
42
+ 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. Compare:
44
43
 
45
44
  ---
46
45
 
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>` |
46
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
47
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
48
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
49
+ | [![](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>` |
50
+ | [<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>` |
52
51
 
53
52
  ---
54
53
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/blades",
3
- "version": "0.27.0-beta.14",
3
+ "version": "0.27.0-beta.15",
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/_table.css CHANGED
@@ -33,6 +33,9 @@ table {
33
33
  margin: 0;
34
34
  visibility: hidden;
35
35
 
36
+ &.lg {
37
+ width: 18ch;
38
+ }
36
39
  &.x2 {
37
40
  width: 24ch;
38
41
  }
package/src/link-icon.css CHANGED
@@ -13,7 +13,7 @@ a {
13
13
  /* Helper to handle [fav]icons in links */
14
14
  > i {
15
15
  font-style: normal;
16
- float: left; /* ✅ Chrome ❌ Safari */
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
17
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
18
18
 
19
19
  /* Favicons */
@@ -27,8 +27,7 @@ a {
27
27
  &[class^="fa-"],
28
28
  &[class*=" fa-"] {
29
29
  line-height: inherit;
30
- margin-inline-start: -0.25ch;
31
- margin-inline-end: -0.125ch; /* =1/8 */
30
+ --fa-width: auto;
32
31
  }
33
32
  &.fa-lg {
34
33
  line-height: normal;
@@ -40,15 +39,15 @@ a {
40
39
 
41
40
  <!--section:docs-->
42
41
 
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:
42
+ 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. Compare:
44
43
 
45
44
  ---
46
45
 
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>` |
46
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
47
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
48
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
49
+ | [![](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>` |
50
+ | [<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>` |
52
51
 
53
52
  ---
54
53