@anyblades/blades 2.2.0 → 2.2.2

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 (11) hide show
  1. package/README.md +35 -35
  2. package/_includes/blades/html.njk +2 -2
  3. package/_includes/blades/sitemap.xml.njk +2 -2
  4. package/assets/blades.css +28 -4
  5. package/assets/blades.standalone.core.css +31 -4
  6. package/assets/blades.standalone.css +31 -4
  7. package/assets/link-icon.css +1 -0
  8. package/blades.gemspec +1 -1
  9. package/package.json +1 -2
  10. package/src/content/_typography.css +31 -4
  11. package/src/link-icon.css +1 -0
package/README.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  <!--section:summary-->
4
4
 
5
- <h1><mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;HTML</h1>
5
+ <h1><mark>Minimal CSS Framework</mark> <small>for</small> Semantic HTML</h1>
6
6
 
7
7
  <big>Fully compatible and actively maintained successor to Pico CSS.</big>
8
8
 
9
- Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or add `blades.standalone.css` to other frameworks.
9
+ Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or use `blades.standalone.css` with other frameworks.
10
10
 
11
11
  <!--section:gh-only-->
12
12
 
@@ -20,7 +20,7 @@ There are 4 ways to get started:
20
20
 
21
21
  ### Install manually
22
22
 
23
- [Download *Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
23
+ [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
24
24
 
25
25
  ```html
26
26
  <link rel="stylesheet" href="assets/blades.css" />
@@ -28,12 +28,12 @@ There are 4 ways to get started:
28
28
 
29
29
  ### Usage from CDN
30
30
 
31
- Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@0/) to link `blades.min.css`:
31
+ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/) to link `assets/blades.min.css`:
32
32
 
33
33
  <!--prettier-ignore-->
34
34
  ```html
35
35
  <link rel="stylesheet" href="
36
- https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
36
+ https://cdn.jsdelivr.net/npm/@anyblades/blades@2/assets/blades.min.css
37
37
  "/>
38
38
  ```
39
39
 
@@ -46,7 +46,7 @@ npm install @anyblades/pico # optional
46
46
  npm install @anyblades/blades
47
47
  ```
48
48
 
49
- Then, import [Pico and] *Bl*ades into your CSS:
49
+ Then, import [Pico] and *Bl*ades into your CSS:
50
50
 
51
51
  ```css
52
52
  @import "@anyblades/pico"; /* optional */
@@ -87,47 +87,45 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
87
87
  <ul><li><a href="https://blades.ninja/css/">Quick start</a></li>
88
88
  <li><a href="https://blades.ninja/css/color-schemes/">Color schemes</a></li>
89
89
  <li><a href="https://blades.ninja/css/variables/">CSS variables</a></li>
90
- <li><a href="https://blades.ninja/css/standalone/"><em>St</em>andalone version <mark>NEW</mark></a></li>
90
+ <li><a href="https://blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li>
91
91
  <li><a href="https://blades.ninja/css/pico/">Pico fork <img src="https://img.shields.io/github/v/release/anyblades/pico?label=&amp;color=white"> <mark>NEW</mark></a></li>
92
- <li><a href="https://blades.ninja/examples/">Examples</a></li>
93
92
  <li><a href="https://blades.ninja/css/frameworks/">Frameworks</a></li></ul>
94
93
  </li>
95
94
 
96
95
  <li>
97
96
  <strong><a href="/css/layout/">Layout</a></strong>
98
97
  <ul><li><a href="https://blades.ninja/css/container/">Container</a></li>
99
- <li><a href="https://blades.ninja/css/breakout/"><em>Br</em>eakout container <mark>NEW</mark></a></li>
98
+ <li><a href="https://blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
100
99
  <li><a href="https://blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
101
100
  <li><a href="https://blades.ninja/css/grid/">Grid</a></li>
102
- <li><a href="https://blades.ninja/css/columns/"><em>Te</em>xt columns <mark>NEW</mark></a></li>
101
+ <li><a href="https://blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li>
103
102
  <li><a href="https://blades.ninja/css/overflow-auto/">Overflow auto</a></li></ul>
104
103
  </li>
105
104
 
106
105
  <li>
107
106
  <strong><a href="/css/content/">Content</a></strong>
108
107
  <ul><li><a href="https://blades.ninja/css/typography/">Typography</a></li>
109
- <li><a href="https://blades.ninja/css/heading/"><em>H</em>eading helpers <mark>NEW</mark></a></li>
108
+ <li><a href="https://blades.ninja/css/heading/">Heading helpers <mark>NEW</mark></a></li>
110
109
  <li><a href="https://blades.ninja/css/link/">Link</a></li>
111
110
  <li><a href="https://blades.ninja/css/link-icon/">Link icon <mark>NEW</mark></a></li>
112
111
  <li><a href="https://blades.ninja/css/button/">Button</a></li>
113
- <li><a href="https://blades.ninja/css/table/">Table</a></li>
114
- <li><a href="https://blades.ninja/css/table-helpers/"><em>T</em>able helpers <mark>NEW</mark></a></li>
112
+ <li><a href="https://blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
115
113
  <li><a href="https://blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
116
- <li><a href="https://blades.ninja/css/list/"><em>L</em>ist helpers <mark>NEW</mark></a></li>
117
- <li><a href="https://blades.ninja/css/code/"><em>C</em>ode formatting <mark>NEW</mark></a></li></ul>
114
+ <li><a href="https://blades.ninja/css/list/">List helpers <mark>NEW</mark></a></li>
115
+ <li><a href="https://blades.ninja/css/code/">Code formatting <mark>NEW</mark></a></li></ul>
118
116
  </li>
119
117
 
120
118
  <li>
121
119
  <strong><a href="/css/forms/">Forms</a></strong>
122
- <ul><li><a href="https://blades.ninja/css/forms/overview/">Overview</a></li>
123
- <li><a href="https://blades.ninja/css/forms/input/">Input</a></li>
124
- <li><a href="https://blades.ninja/css/forms/textarea/">Textarea</a></li>
125
- <li><a href="https://blades.ninja/css/forms/select/">Select</a></li>
126
- <li><a href="https://blades.ninja/css/forms/checkboxes/">Checkboxes</a></li>
127
- <li><a href="https://blades.ninja/css/forms/radios/">Radios</a></li>
128
- <li><a href="https://blades.ninja/css/forms/switch/">Switch</a></li>
129
- <li><a href="https://blades.ninja/css/forms/range/">Range</a></li>
130
- <li><a href="https://blades.ninja/css/float-label/"><em>Fl</em>oat labels <mark>NEW</mark></a></li></ul>
120
+ <ul><li><a href="https://blades.ninja/css/forms/">Overview</a></li>
121
+ <li><a href="https://blades.ninja/css/input/">Input</a></li>
122
+ <li><a href="https://blades.ninja/css/textarea/">Textarea</a></li>
123
+ <li><a href="https://blades.ninja/css/select/">Select</a></li>
124
+ <li><a href="https://blades.ninja/css/checkboxes/">Checkboxes</a></li>
125
+ <li><a href="https://blades.ninja/css/radios/">Radios</a></li>
126
+ <li><a href="https://blades.ninja/css/switch/">Switch</a></li>
127
+ <li><a href="https://blades.ninja/css/range/">Range</a></li>
128
+ <li><a href="https://blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
131
129
  </li>
132
130
 
133
131
  <li>
@@ -138,19 +136,19 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
138
136
  <li><a href="https://blades.ninja/css/group/">Group</a></li>
139
137
  <li><a href="https://blades.ninja/css/loading/">Loading</a></li>
140
138
  <li><a href="https://blades.ninja/css/modal/">Modal</a></li>
141
- <li><a href="https://blades.ninja/css/nav/">Navigation</a></li>
139
+ <li><a href="https://blades.ninja/css/navigation/">Navigation</a></li>
142
140
  <li><a href="https://blades.ninja/css/progress/">Progress</a></li>
143
141
  <li><a href="https://blades.ninja/css/tooltip/">Tooltip</a></li>
144
- <li><a href="https://blades.ninja/css/jump/"><em>Ju</em>mp to... <mark>NEW</mark></a></li>
145
- <li><a href="https://blades.ninja/css/utils/"><em>Ut</em>ilities <mark>NEW</mark></a></li></ul>
142
+ <li><a href="https://blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
143
+ <li><a href="https://blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
146
144
  </li>
147
145
 
148
146
  <li>
149
147
  <strong><a href="/html/">Templates <mark>NEW</mark></a></strong>
150
148
  <ul><li><a href="https://blades.ninja/html/">Overview</a></li>
151
- <li><a href="https://blades.ninja/html/starter/"><em>HTML</em> starter <mark>NEW</mark></a></li>
152
- <li><a href="https://blades.ninja/html/links/"><em>L</em>inks <mark>NEW</mark></a></li>
153
- <li><a href="https://blades.ninja/html/sitemap/"><em>S</em>itemap <mark>NEW</mark></a></li></ul>
149
+ <li><a href="https://blades.ninja/html/starter/">HTML starter <mark>NEW</mark></a></li>
150
+ <li><a href="https://blades.ninja/html/links/">Links <mark>NEW</mark></a></li>
151
+ <li><a href="https://blades.ninja/html/sitemap/">Sitemap <mark>NEW</mark></a></li></ul>
154
152
  </li>
155
153
 
156
154
  </ul>
@@ -165,15 +163,17 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
165
163
  - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
166
164
  - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
167
165
  - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
168
- - [https://github.com/classless-css#float-label](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label)
169
166
  - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
170
167
  - [https://www.youtube.com/@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
168
+ - [https://dummy.my/](https://dummy.my/frameworks/fw-blades-css/)
169
+ - [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label) for [Float label](https://blades.ninja/css/float-label/)
170
+ - [https://trendshift.io/](https://trendshift.io/repositories/29875) for [Pico fork](https://blades.ninja/css/pico/)
171
171
 
172
- <!--{.unlist .columns}-->
172
+ <!--{.markerless .columns}-->
173
173
 
174
174
  ## <sup>Credits</sup>
175
175
 
176
- - https://picocss.com/ for inspiration
177
- - https://11ty.dev/ for build power
176
+ - https://picocss.com/ as a [first-class citizen](https://blades.ninja/css/pico/)
177
+ - https://11ty.dev/ for [this site generation](https://github.com/anyblades/blades.ninja)
178
178
 
179
- <!--{.unlist}-->
179
+ <!--{.markerless}-->
package/_includes/blades/html.njk CHANGED
@@ -18,14 +18,14 @@
18
18
  <link rel="stylesheet" href="{{ href }}" />
19
19
  {%- endfor %}
20
20
  {# prettier-ignore-start #}<style>
21
- {{ site.inline_styles | d([]) | join('\n') }}
21
+ {{ site.inline_styles | d([]) | join('\n') | safe }}
22
22
  </style>{# prettier-ignore-end #}
23
23
 
24
24
  {%- for src in site.scripts %}
25
25
  <script src="{{ src }}" defer></script>
26
26
  {%- endfor %}
27
27
  {# prettier-ignore-start #}<script type="module">
28
- {{ site.inline_scripts | d([]) | join('\n') }}
28
+ {{ site.inline_scripts | d([]) | join('\n') | safe }}
29
29
  </script>{# prettier-ignore-end #}
30
30
 
31
31
  {{ content_for_header | safe }}
package/_includes/blades/sitemap.xml.njk CHANGED
@@ -1,5 +1,5 @@
1
- {# Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
2
- <!--section:code-->```jinja2 #}<?xml
1
+ {#- Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
2
+ <!--section:code-->```jinja2 -#}<?xml
3
3
  version="1.0" encoding="utf-8"?>
4
4
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
5
5
  {%- for page in collections.all %}
package/assets/blades.css CHANGED
@@ -661,7 +661,7 @@ h5,
661
661
  h6 {
662
662
  position: relative;
663
663
  }
664
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
664
+ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4 a[aria-hidden="true"], h5 a[aria-hidden="true"], h6 a[aria-hidden="true"] {
665
665
  position: absolute;
666
666
  right: 100%;
667
667
  top: 50%;
@@ -672,7 +672,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
672
672
  visibility: hidden;
673
673
  }
674
674
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
675
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
675
+ h1:hover a[aria-hidden="true"], h2:hover a[aria-hidden="true"], h3:hover a[aria-hidden="true"], h4:hover a[aria-hidden="true"], h5:hover a[aria-hidden="true"], h6:hover a[aria-hidden="true"] {
676
676
  visibility: visible;
677
677
  }
678
678
  }
@@ -715,9 +715,32 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
715
715
  }
716
716
  /*```
717
717
 
718
+ ### Markerless
719
+
720
+ `.markerless` removes markers and reduces padding:
721
+
722
+ <article>
723
+
724
+ - 1️⃣ so you can use
725
+ - 2️⃣ emojis or images
726
+ - 3️⃣ instead of bullets
727
+
728
+ {.markerless}
729
+ </article>
730
+
731
+ How it works:
732
+ ```css */
733
+ ul.markerless, ol.markerless {
734
+ padding-inline-start: 1.25rem;
735
+ }
736
+ ul.markerless li, ol.markerless li {
737
+ list-style: none;
738
+ }
739
+ /*```
740
+
718
741
  ### Unlist
719
742
 
720
- `.unlist` removes list styling:
743
+ `.unlist` removes list styling at all:
721
744
 
722
745
  <article>
723
746
 
@@ -728,7 +751,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
728
751
  {.unlist .grid style=margin:0}
729
752
  </article>
730
753
 
731
- `.unlist-all` also removes styling from all nested lists.
754
+ `.unlist-all` removes styling from all nested lists too.
732
755
 
733
756
  How it works:
734
757
  ```css */
@@ -752,6 +775,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
752
775
  a:has(> i) {
753
776
  display: inline-flex;
754
777
  gap: 0.375ch; /* =3/8 */
778
+ text-wrap: balance;
755
779
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
756
780
  }
757
781
  a > i {
package/assets/blades.standalone.core.css CHANGED
@@ -213,7 +213,7 @@ h6 {
213
213
  position: relative;
214
214
  }
215
215
 
216
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
216
+ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4 a[aria-hidden="true"], h5 a[aria-hidden="true"], h6 a[aria-hidden="true"] {
217
217
  position: absolute;
218
218
  right: 100%;
219
219
  top: 50%;
@@ -225,7 +225,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
225
225
  }
226
226
 
227
227
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
228
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
228
+ h1:hover a[aria-hidden="true"], h2:hover a[aria-hidden="true"], h3:hover a[aria-hidden="true"], h4:hover a[aria-hidden="true"], h5:hover a[aria-hidden="true"], h6:hover a[aria-hidden="true"] {
229
229
  visibility: visible;
230
230
  }
231
231
  }
@@ -274,9 +274,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
274
274
 
275
275
  /*```
276
276
 
277
+ ### Markerless
278
+
279
+ `.markerless` removes markers and reduces padding:
280
+
281
+ <article>
282
+
283
+ - 1️⃣ so you can use
284
+ - 2️⃣ emojis or images
285
+ - 3️⃣ instead of bullets
286
+
287
+ {.markerless}
288
+ </article>
289
+
290
+ How it works:
291
+ ```css */
292
+
293
+ ul.markerless, ol.markerless {
294
+ padding-inline-start: 1.25rem;
295
+ }
296
+
297
+ ul.markerless li, ol.markerless li {
298
+ list-style: none;
299
+ }
300
+
301
+ /*```
302
+
277
303
  ### Unlist
278
304
 
279
- `.unlist` removes list styling:
305
+ `.unlist` removes list styling at all:
280
306
 
281
307
  <article>
282
308
 
@@ -287,7 +313,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
287
313
  {.unlist .grid style=margin:0}
288
314
  </article>
289
315
 
290
- `.unlist-all` also removes styling from all nested lists.
316
+ `.unlist-all` removes styling from all nested lists too.
291
317
 
292
318
  How it works:
293
319
  ```css */
@@ -317,6 +343,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
317
343
  a:has(> i) {
318
344
  display: inline-flex;
319
345
  gap: 0.375ch; /* =3/8 */
346
+ text-wrap: balance;
320
347
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
321
348
  }
322
349
 
package/assets/blades.standalone.css CHANGED
@@ -213,7 +213,7 @@ h6 {
213
213
  position: relative;
214
214
  }
215
215
 
216
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
216
+ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4 a[aria-hidden="true"], h5 a[aria-hidden="true"], h6 a[aria-hidden="true"] {
217
217
  position: absolute;
218
218
  right: 100%;
219
219
  top: 50%;
@@ -225,7 +225,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
225
225
  }
226
226
 
227
227
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
228
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
228
+ h1:hover a[aria-hidden="true"], h2:hover a[aria-hidden="true"], h3:hover a[aria-hidden="true"], h4:hover a[aria-hidden="true"], h5:hover a[aria-hidden="true"], h6:hover a[aria-hidden="true"] {
229
229
  visibility: visible;
230
230
  }
231
231
  }
@@ -274,9 +274,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
274
274
 
275
275
  /*```
276
276
 
277
+ ### Markerless
278
+
279
+ `.markerless` removes markers and reduces padding:
280
+
281
+ <article>
282
+
283
+ - 1️⃣ so you can use
284
+ - 2️⃣ emojis or images
285
+ - 3️⃣ instead of bullets
286
+
287
+ {.markerless}
288
+ </article>
289
+
290
+ How it works:
291
+ ```css */
292
+
293
+ ul.markerless, ol.markerless {
294
+ padding-inline-start: 1.25rem;
295
+ }
296
+
297
+ ul.markerless li, ol.markerless li {
298
+ list-style: none;
299
+ }
300
+
301
+ /*```
302
+
277
303
  ### Unlist
278
304
 
279
- `.unlist` removes list styling:
305
+ `.unlist` removes list styling at all:
280
306
 
281
307
  <article>
282
308
 
@@ -287,7 +313,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
287
313
  {.unlist .grid style=margin:0}
288
314
  </article>
289
315
 
290
- `.unlist-all` also removes styling from all nested lists.
316
+ `.unlist-all` removes styling from all nested lists too.
291
317
 
292
318
  How it works:
293
319
  ```css */
@@ -317,6 +343,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
317
343
  a:has(> i) {
318
344
  display: inline-flex;
319
345
  gap: 0.375ch; /* =3/8 */
346
+ text-wrap: balance;
320
347
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
321
348
  }
322
349
 
package/assets/link-icon.css CHANGED
@@ -5,6 +5,7 @@
5
5
  a:has(> i) {
6
6
  display: inline-flex;
7
7
  gap: 0.375ch; /* =3/8 */
8
+ text-wrap: balance;
8
9
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
9
10
  }
10
11
  a > i {
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 = "2.2.0"
5
+ spec.version = "2.2.2"
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,8 +1,7 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
- "style": "./assets/blades.css",
6
5
  "exports": {
7
6
  ".": "./src/blades.standalone.css",
8
7
  "./core": "./src/blades.standalone.core.css",
package/src/content/_typography.css CHANGED
@@ -19,7 +19,7 @@ h5,
19
19
  h6 {
20
20
  position: relative;
21
21
 
22
- a[href^="#"] {
22
+ a[aria-hidden="true"] {
23
23
  position: absolute;
24
24
  right: 100%;
25
25
  top: 50%;
@@ -31,7 +31,7 @@ h6 {
31
31
  }
32
32
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
33
33
  &:hover {
34
- a[href^="#"] {
34
+ a[aria-hidden="true"] {
35
35
  visibility: visible;
36
36
  }
37
37
  }
@@ -80,9 +80,36 @@ ol {
80
80
  }
81
81
  /*```
82
82
 
83
+ ### Markerless
84
+
85
+ `.markerless` removes markers and reduces padding:
86
+
87
+ <article>
88
+
89
+ - 1️⃣ so you can use
90
+ - 2️⃣ emojis or images
91
+ - 3️⃣ instead of bullets
92
+
93
+ {.markerless}
94
+ </article>
95
+
96
+ How it works:
97
+ ```css */
98
+ ul,
99
+ ol {
100
+ &.markerless {
101
+ padding-inline-start: 1.25rem;
102
+
103
+ li {
104
+ list-style: none;
105
+ }
106
+ }
107
+ }
108
+ /*```
109
+
83
110
  ### Unlist
84
111
 
85
- `.unlist` removes list styling:
112
+ `.unlist` removes list styling at all:
86
113
 
87
114
  <article>
88
115
 
@@ -93,7 +120,7 @@ ol {
93
120
  {.unlist .grid style=margin:0}
94
121
  </article>
95
122
 
96
- `.unlist-all` also removes styling from all nested lists.
123
+ `.unlist-all` removes styling from all nested lists too.
97
124
 
98
125
  How it works:
99
126
  ```css */
package/src/link-icon.css CHANGED
@@ -6,6 +6,7 @@ a {
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
9
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
10
11
  }
11
12
  > i {