@anyblades/blades 2.4.8 → 2.4.9

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 (18) hide show
  1. package/README.md +91 -28
  2. package/blades.gemspec +1 -1
  3. package/css/blades.css +29 -56
  4. package/css/blades.standalone.core.css +29 -55
  5. package/css/blades.standalone.css +30 -61
  6. package/css/blades.standalone.theme.css +1 -5
  7. package/css/float-label.core.css +12 -12
  8. package/css/float-label.css +12 -12
  9. package/package.json +1 -1
  10. package/src/_layout.css +2 -10
  11. package/src/_utilities.css +3 -4
  12. package/src/blades.standalone.core.css +2 -0
  13. package/src/blades.standalone.theme.css +1 -5
  14. package/src/components/_timeline.css +0 -1
  15. package/src/content/_code.css +3 -7
  16. package/src/content/_table.css +4 -7
  17. package/src/content/_typography.css +3 -10
  18. package/src/float-label.core.css +12 -12
package/README.md CHANGED
@@ -6,9 +6,18 @@
6
6
 
7
7
  <h1><mark>Minimal CSS Framework</mark> <small>for</small> Semantic HTML</h1>
8
8
 
9
- <big>Fully compatible and actively maintained successor to Pico CSS.</big>
9
+ <big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
10
10
 
11
- Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css`, or use `blades.standalone.css` with other frameworks.
11
+ Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out helpers.
12
+ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks.
13
+
14
+ <nav>
15
+ <a href="//blades.ninja/css/" role="button">Get started &nbsp;✨</a>
16
+ <span hidden>•</span>
17
+ <a href="//blades.ninja/css/standalone/" role="button" class="outline">
18
+ Standalone <i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i>
19
+ </a>
20
+ </nav>
12
21
 
13
22
  <!--section:gh-only-->
14
23
 
@@ -18,19 +27,19 @@ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//bl
18
27
 
19
28
  <!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
20
29
 
21
- There are 4 ways to get started:
30
+ <big>There are 4 ways to get started:</big>
22
31
 
23
32
  ### <mark>A.</mark> Install manually
24
33
 
25
- [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
34
+ [Download CSS archive](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
26
35
 
27
36
  ```html
28
37
  <link rel="stylesheet" href="css/blades.css" />
29
38
  ```
30
39
 
31
- ### <mark>B.</mark> Usage from CDN
40
+ ---
32
41
 
33
- Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/):
42
+ ### <mark>B.</mark> Usage from CDN
34
43
 
35
44
  <!--prettier-ignore-->
36
45
  ```html
@@ -39,33 +48,66 @@ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblade
39
48
  "/>
40
49
  ```
41
50
 
42
- ### <mark>C.</mark> Install with NPM
51
+ Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
52
+
53
+ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/
54
+
55
+ ---
56
+
57
+ ### <mark>C.</mark> Starter projects
58
+
59
+ - https://subtle.blades.ninja/ 11ty micro-starter
60
+ - https://start.11ty.blades.ninja/ 7-in-1 starter (including Tailwind)
61
+ - https://getgrav.org/ v2 now features Blades CSS in its default theme (Quark2)
62
+ - https://jekyll.blades.ninja/ starter <!--{.faded}-->
63
+
64
+ ---
65
+
66
+ ### <mark>D.</mark> Install with NPM
43
67
 
44
68
  ```sh
45
- npm install @anyblades/pico # or other CSS framework
46
69
  npm install @anyblades/blades
47
70
  ```
48
71
 
49
- Then, import *Bl*ades into your CSS:
72
+ You can use precompiled Pico+Blades CSS (same as CDN version):
73
+
74
+ <!--prettier-ignore-->
75
+ ```html
76
+ <link rel="stylesheet" href="
77
+ node_modules/@anyblades/blades/css/blades.css
78
+ " />
79
+ ```
80
+
81
+ <div><hr></div>
82
+
83
+ Or import [standalone](//blades.ninja/css/standalone/) Blades CSS sources (without [Pico CSS](//blades.ninja/css/pico/)):
50
84
 
51
85
  ```css
52
- @import "@anyblades/blades";
86
+ @import "@anyblades/blades/standalone";
53
87
  ```
54
88
 
55
89
  Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
56
90
 
57
- ### <mark>D.</mark> Starter projects
91
+ <div><hr></div>
58
92
 
59
- - https://subtle.blades.ninja/ 11ty micro-starter
60
- - https://github.com/anyblades/buildawesome-starters 11ty Tailwind CLI starter(s)
61
- - https://github.com/getgrav/grav-theme-quark2 for Grav CMS v2
62
- - https://jekyll.blades.ninja/ starter <!--{.faded}-->
93
+ To install and import both Pico+Blades CSS sources at once:
63
94
 
64
- ### Standalone versions
95
+ ```sh
96
+ npm install @anyblades/pico @anyblades/blades
97
+ ```
65
98
 
66
- - https://blades.ninja/css/standalone/
99
+ ```css
100
+ @import "@anyblades/pico";
101
+ @import "@anyblades/blades/standalone";
102
+ ```
67
103
 
68
- ### Starter HTML template <!-- from index.html -->
104
+ This is exactly how *Bl*ades CSS is built itself: https://github.com/anyblades/blades/blob/main/src/blades.css
105
+
106
+ ---
107
+
108
+ ### <sup style>Appendix</sup>
109
+
110
+ #### Starter HTML template <!-- from index.html -->
69
111
 
70
112
  ```html
71
113
  <!doctype html>
@@ -85,6 +127,28 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
85
127
  </html>
86
128
  ```
87
129
 
130
+ <!--section:install-->
131
+
132
+ #### Standalone versions
133
+
134
+ <!--section:install,standalone-->
135
+
136
+ Most of internal Blades CSS modules are available as standalone helpers, giving you flexibility to use them with other CSS frameworks:
137
+
138
+ | Module | CDN | Import from NPM |
139
+ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
140
+ | [Breakout container](/css/breakout/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/breakout.min.css | N/A |
141
+ | [Link icon](/css/link-icon/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/link-icon.min.css | N/A |
142
+ | [Responsive table](/css/responsive-table/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/responsive-table.min.css | N/A |
143
+ | [Float labels](/css/float-label/) <br> https://github.com/anyblades/float-label-css | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/float-label.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/float-label";` |
144
+ | [All above together](/css/standalone/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.standalone.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/standalone";` |
145
+ | [Reset/normalizer](/css/pico/) <br> https://github.com/anyblades/pico | https://cdn.jsdelivr.net/npm/@anyblades/pico@2/css/pico.min.css | `npm install @anyblades/pico` <br> `@import "@anyblades/pico";` |
146
+ | [Experimental "ninja" add-ons](/css/ninja/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.ninja.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/ninja";` |
147
+
148
+ Live examples:
149
+
150
+ - https://www.mattanger.dev/ (Link icon via CDN)
151
+
88
152
  <!--section:gh-only-->
89
153
 
90
154
  ## Documentation
@@ -165,23 +229,22 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
165
229
 
166
230
  ---
167
231
 
168
- ## <sup style>Trusted by</sup>
232
+ ## <sup style>Trusted by</sup><!--DRY with featured-->
169
233
 
170
234
  - https://github.com/pallets/website 🐍
171
- - https://github.com/getgrav/grav-theme-quark2 🛸
172
- - https://www.11ty.dev/docs/starter/#:~:text=blades
173
- - https://sveltiacms.app/en/docs/start#starter-templates:~:text=anyblades
174
- - https://github.com/johnheenan/minform#css-and-performance
175
- - https://github.com/hostfurl/minformhf
176
235
 
177
236
  <!--section:info-->
178
237
 
179
- ## <sup style>Featured by</sup>
238
+ ## <sup style>Featured by</sup><!--Z-A-->
180
239
 
181
- - [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
182
- - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
240
+ - [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades)
241
+ - [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades) [↗](https://github.com/getgrav/grav-theme-quark2)
183
242
  - [dummy.my/frameworks](https://dummy.my/frameworks/)
243
+ - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
244
+ - [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
245
+ - [11ty.dev](https://www.11ty.dev/docs/starter/#:~:text=blades) [↗](https://www.11ty.dev/docs/plugins/community/#:~:text=blades)
184
246
  - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
247
+ - [@johnheenan](https://github.com/johnheenan/minform#css-and-performance)
185
248
  - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) [↗](https://www.instagram.com/reel/DXOSTpajG4f/)
186
249
 
187
250
  <!--{.markerless .columns}-->
@@ -189,6 +252,6 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
189
252
  ## <sup style>Credits</sup>
190
253
 
191
254
  - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
192
- - https://11ty.dev/ for [site generation ↗](https://github.com/anyblades/blades.ninja)
255
+ - https://11ty.dev/ for [site generation](//github.com/anyblades/blades.ninja)
193
256
 
194
257
  <!--{.markerless}-->
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.4.8"
5
+ spec.version = "2.4.9"
6
6
 
7
7
  spec.authors = ["Anton Staroverov"]
8
8
  spec.homepage = "https://blades.ninja/"
package/css/blades.css CHANGED
@@ -3010,12 +3010,10 @@ textarea,
3010
3010
  transition-duration: 0s !important;
3011
3011
  }
3012
3012
  }
3013
+ /*\3c !--section:code-->```css */
3013
3014
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
3014
3015
  /* Layout */
3015
- /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
3016
- \3c !--section:docs,columns-->
3017
-
3018
- ### Auto-columns
3016
+ /*\3c !--section:columns-->
3019
3017
 
3020
3018
  `.columns` automatically creates columns with at least 30 characters each:
3021
3019
 
@@ -3042,10 +3040,7 @@ How it works:
3042
3040
  -moz-column-break-inside: avoid;
3043
3041
  break-inside: avoid;
3044
3042
  }
3045
- /*```
3046
- \3c !--section:docs,jump-->
3047
-
3048
- ### Jump to top
3043
+ /*```\3c !--section:jump-->
3049
3044
 
3050
3045
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
3051
3046
  ```css */
@@ -3055,8 +3050,6 @@ How it works:
3055
3050
  bottom: 0;
3056
3051
  padding-top: 50vh;
3057
3052
  }
3058
- /*```
3059
- \3c !--section--> */
3060
3053
  /*
3061
3054
  \3c !--section:code-->
3062
3055
  ```css */
@@ -3183,15 +3176,12 @@ Or anything else:
3183
3176
 
3184
3177
  \3c !--section--> */
3185
3178
  /* Content */
3186
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
3187
- \3c !--section:docs,h-anchor-->
3188
-
3189
- ### Heading anchors
3179
+ /*\3c !--section:h-anchor-->
3190
3180
 
3191
3181
  Links with `href="#..."` inside headings are automatically displayed as anchors:
3192
3182
 
3193
3183
  <article>
3194
- <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
3184
+ <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
3195
3185
  </article>
3196
3186
 
3197
3187
  How it works:
@@ -3223,9 +3213,7 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
3223
3213
 
3224
3214
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
3225
3215
 
3226
- \3c !--section:docs,list-->
3227
-
3228
- ### List markers
3216
+ \3c !--section:list-->
3229
3217
 
3230
3218
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
3231
3219
 
@@ -3309,8 +3297,6 @@ ul.unlist,
3309
3297
  ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unlist-all > li, .unlist-all ol > li {
3310
3298
  list-style: none;
3311
3299
  }
3312
- /*```
3313
- \3c !--section--> */
3314
3300
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
3315
3301
  \3c !--section:code-->
3316
3302
  ```css */
@@ -3370,10 +3356,9 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
3370
3356
  **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
3371
3357
 
3372
3358
  \3c !--section--> */
3373
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
3374
- \3c !--section:docs-->
3359
+ /*\3c !--section:docs-->
3375
3360
 
3376
- ### Column expanders
3361
+ ## Column expanders
3377
3362
 
3378
3363
  Place `<hr>` element inside `<th>` column to expand it horizontally:
3379
3364
 
@@ -3406,7 +3391,7 @@ th hr.x2 {
3406
3391
  }
3407
3392
  /*```
3408
3393
 
3409
- ### Borderless table
3394
+ ## Borderless table
3410
3395
 
3411
3396
  `.borderless` removes all default borders:
3412
3397
 
@@ -3419,9 +3404,7 @@ th hr.x2 {
3419
3404
  {.borderless}
3420
3405
  </article>
3421
3406
 
3422
- Living example: https://bladeswitch.com/#minimal-dependencies table
3423
-
3424
- \3c !--section--> */
3407
+ \3c !--section-->*/
3425
3408
  table.borderless th,
3426
3409
  table.borderless td {
3427
3410
  border: none;
@@ -3483,10 +3466,7 @@ Living examples: \3c !--A-Z-->
3483
3466
  - https://blades.ninja/ssg/
3484
3467
 
3485
3468
  \3c !--section--> */
3486
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
3487
- \3c !--section:docs-->
3488
-
3489
- ### Code
3469
+ /*\3c !--section:docs-->
3490
3470
 
3491
3471
  The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
3492
3472
 
@@ -3496,7 +3476,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
3496
3476
  ├── blades.theme.css # minimal opinionated theme
3497
3477
  └── blades.css # above two together
3498
3478
  ```
3499
- How it works:
3479
+
3480
+ \3c !--section:code-->
3500
3481
  ```css */
3501
3482
  @media (width < 768px) {
3502
3483
  pre {
@@ -3511,25 +3492,23 @@ code[data-caption]::before {
3511
3492
  font-style: italic;
3512
3493
  opacity: 50%;
3513
3494
  }
3514
- /*```
3515
- \3c !--section--> */
3516
3495
  /* Forms */
3517
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
3496
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
3518
3497
  \3c !--section:docs-->
3519
3498
 
3520
3499
  First, we target either:
3521
3500
  1. `<label>` which `:has` inner form inputs (classless approach)
3522
3501
  2. or explicit `.has-float-label` class (explicit approach)
3502
+
3523
3503
  ```css */
3524
3504
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
3525
3505
  .has-float-label {
3526
3506
  display: block;
3527
3507
  position: relative;
3528
3508
  }
3529
- /*
3530
- ```
3531
- Then, we define the default/fallback state (when the float label should be minimized):
3532
- ```css */
3509
+ /*```
3510
+ Then, we define the default/fallback state (when the float label should be minimized):
3511
+ ```css */
3533
3512
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3534
3513
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
3535
3514
  .has-float-label > span,
@@ -3540,10 +3519,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
3540
3519
  font-size: 75%;
3541
3520
  cursor: text;
3542
3521
  }
3543
- /*
3544
- ```
3545
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
3546
- ```css */
3522
+ /*```
3523
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
3524
+ ```css */
3547
3525
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
3548
3526
  opacity: 0;
3549
3527
  }
@@ -3564,12 +3542,13 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
3564
3542
  font-size: inherit;
3565
3543
  opacity: 50%;
3566
3544
  }
3567
- /*
3568
- ```
3545
+ /*```
3546
+
3569
3547
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
3570
3548
 
3571
3549
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
3572
- \3c !--section--> */
3550
+
3551
+ \3c !--section-->*/
3573
3552
  /* Components */
3574
3553
  /*\3c !--section:docs-->
3575
3554
 
@@ -3592,12 +3571,10 @@ dl.timeline dd, .has-timeline > dl dd {
3592
3571
  padding: 0.25rem 0 0.75rem 1rem;
3593
3572
  border-inline-start: 0.25rem solid gray;
3594
3573
  }
3595
- /*```*/
3596
3574
  /* Utilities */
3597
- /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
3598
- \3c !--section:docs-->
3575
+ /*\3c !--section:docs-->
3599
3576
 
3600
- ### Auto-dark
3577
+ ## Auto-dark
3601
3578
 
3602
3579
  `.dark-auto` automatically creates a simple dark version of any element:
3603
3580
 
@@ -3626,7 +3603,7 @@ How it works:
3626
3603
  }
3627
3604
  /*```
3628
3605
 
3629
- ### Faded
3606
+ ## Faded
3630
3607
 
3631
3608
  `.faded` reduces the opacity of an element:
3632
3609
 
@@ -3648,9 +3625,7 @@ How it works:
3648
3625
  .invert ::-webkit-scrollbar {
3649
3626
  filter: invert(1) !important;
3650
3627
  }
3651
- /*
3652
- \3c !--section:code-->
3653
- ```css */
3628
+ /*\3c !--section:code-->```css */
3654
3629
  /* Default/fallback state */
3655
3630
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3656
3631
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
@@ -3793,5 +3768,3 @@ table pre {
3793
3768
  .faded a {
3794
3769
  text-decoration-style: dotted;
3795
3770
  }
3796
- /*```
3797
- \3c !--section--> */
package/css/blades.standalone.core.css CHANGED
@@ -1,11 +1,10 @@
1
+ /*\3c !--section:code-->```css */
2
+
1
3
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
2
4
 
3
5
  /* Layout */
4
6
 
5
- /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
6
- \3c !--section:docs,columns-->
7
-
8
- ### Auto-columns
7
+ /*\3c !--section:columns-->
9
8
 
10
9
  `.columns` automatically creates columns with at least 30 characters each:
11
10
 
@@ -36,10 +35,7 @@ How it works:
36
35
  break-inside: avoid;
37
36
  }
38
37
 
39
- /*```
40
- \3c !--section:docs,jump-->
41
-
42
- ### Jump to top
38
+ /*```\3c !--section:jump-->
43
39
 
44
40
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
45
41
  ```css */
@@ -51,9 +47,6 @@ How it works:
51
47
  padding-top: 50vh;
52
48
  }
53
49
 
54
- /*```
55
- \3c !--section--> */
56
-
57
50
  /*
58
51
  \3c !--section:code-->
59
52
  ```css */
@@ -199,15 +192,12 @@ Or anything else:
199
192
 
200
193
  /* Content */
201
194
 
202
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
203
- \3c !--section:docs,h-anchor-->
204
-
205
- ### Heading anchors
195
+ /*\3c !--section:h-anchor-->
206
196
 
207
197
  Links with `href="#..."` inside headings are automatically displayed as anchors:
208
198
 
209
199
  <article>
210
- <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
200
+ <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
211
201
  </article>
212
202
 
213
203
  How it works:
@@ -243,9 +233,7 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
243
233
 
244
234
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
245
235
 
246
- \3c !--section:docs,list-->
247
-
248
- ### List markers
236
+ \3c !--section:list-->
249
237
 
250
238
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
251
239
 
@@ -340,9 +328,6 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
340
328
  list-style: none;
341
329
  }
342
330
 
343
- /*```
344
- \3c !--section--> */
345
-
346
331
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
347
332
  \3c !--section:code-->
348
333
  ```css */
@@ -412,10 +397,9 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
412
397
 
413
398
  \3c !--section--> */
414
399
 
415
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
416
- \3c !--section:docs-->
400
+ /*\3c !--section:docs-->
417
401
 
418
- ### Column expanders
402
+ ## Column expanders
419
403
 
420
404
  Place `<hr>` element inside `<th>` column to expand it horizontally:
421
405
 
@@ -452,7 +436,7 @@ th hr.x2 {
452
436
 
453
437
  /*```
454
438
 
455
- ### Borderless table
439
+ ## Borderless table
456
440
 
457
441
  `.borderless` removes all default borders:
458
442
 
@@ -465,9 +449,7 @@ th hr.x2 {
465
449
  {.borderless}
466
450
  </article>
467
451
 
468
- Living example: https://bladeswitch.com/#minimal-dependencies table
469
-
470
- \3c !--section--> */
452
+ \3c !--section-->*/
471
453
 
472
454
  table.borderless th,
473
455
  table.borderless td {
@@ -535,10 +517,7 @@ Living examples: \3c !--A-Z-->
535
517
 
536
518
  \3c !--section--> */
537
519
 
538
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
539
- \3c !--section:docs-->
540
-
541
- ### Code
520
+ /*\3c !--section:docs-->
542
521
 
543
522
  The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
544
523
 
@@ -548,7 +527,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
548
527
  ├── blades.theme.css # minimal opinionated theme
549
528
  └── blades.css # above two together
550
529
  ```
551
- How it works:
530
+
531
+ \3c !--section:code-->
552
532
  ```css */
553
533
 
554
534
  @media (width < 768px) {
@@ -568,17 +548,15 @@ code[data-caption]::before {
568
548
  opacity: 50%;
569
549
  }
570
550
 
571
- /*```
572
- \3c !--section--> */
573
-
574
551
  /* Forms */
575
552
 
576
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
553
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
577
554
  \3c !--section:docs-->
578
555
 
579
556
  First, we target either:
580
557
  1. `<label>` which `:has` inner form inputs (classless approach)
581
558
  2. or explicit `.has-float-label` class (explicit approach)
559
+
582
560
  ```css */
583
561
 
584
562
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
@@ -587,10 +565,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
587
565
  position: relative;
588
566
  }
589
567
 
590
- /*
591
- ```
592
- Then, we define the default/fallback state (when the float label should be minimized):
593
- ```css */
568
+ /*```
569
+ Then, we define the default/fallback state (when the float label should be minimized):
570
+ ```css */
594
571
 
595
572
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
596
573
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
@@ -603,10 +580,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
603
580
  cursor: text;
604
581
  }
605
582
 
606
- /*
607
- ```
608
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
609
- ```css */
583
+ /*```
584
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
585
+ ```css */
610
586
 
611
587
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
612
588
  opacity: 0;
@@ -633,12 +609,13 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
633
609
  opacity: 50%;
634
610
  }
635
611
 
636
- /*
637
- ```
612
+ /*```
613
+
638
614
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
639
615
 
640
616
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
641
- \3c !--section--> */
617
+
618
+ \3c !--section-->*/
642
619
 
643
620
  /* Components */
644
621
 
@@ -665,14 +642,11 @@ dl.timeline dd, .has-timeline > dl dd {
665
642
  border-inline-start: 0.25rem solid gray;
666
643
  }
667
644
 
668
- /*```*/
669
-
670
645
  /* Utilities */
671
646
 
672
- /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
673
- \3c !--section:docs-->
647
+ /*\3c !--section:docs-->
674
648
 
675
- ### Auto-dark
649
+ ## Auto-dark
676
650
 
677
651
  `.dark-auto` automatically creates a simple dark version of any element:
678
652
 
@@ -709,7 +683,7 @@ How it works:
709
683
 
710
684
  /*```
711
685
 
712
- ### Faded
686
+ ## Faded
713
687
 
714
688
  `.faded` reduces the opacity of an element:
715
689
 
package/css/blades.standalone.css CHANGED
@@ -1,11 +1,10 @@
1
+ /*\3c !--section:code-->```css */
2
+
1
3
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
2
4
 
3
5
  /* Layout */
4
6
 
5
- /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
6
- \3c !--section:docs,columns-->
7
-
8
- ### Auto-columns
7
+ /*\3c !--section:columns-->
9
8
 
10
9
  `.columns` automatically creates columns with at least 30 characters each:
11
10
 
@@ -36,10 +35,7 @@ How it works:
36
35
  break-inside: avoid;
37
36
  }
38
37
 
39
- /*```
40
- \3c !--section:docs,jump-->
41
-
42
- ### Jump to top
38
+ /*```\3c !--section:jump-->
43
39
 
44
40
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
45
41
  ```css */
@@ -51,9 +47,6 @@ How it works:
51
47
  padding-top: 50vh;
52
48
  }
53
49
 
54
- /*```
55
- \3c !--section--> */
56
-
57
50
  /*
58
51
  \3c !--section:code-->
59
52
  ```css */
@@ -199,15 +192,12 @@ Or anything else:
199
192
 
200
193
  /* Content */
201
194
 
202
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
203
- \3c !--section:docs,h-anchor-->
204
-
205
- ### Heading anchors
195
+ /*\3c !--section:h-anchor-->
206
196
 
207
197
  Links with `href="#..."` inside headings are automatically displayed as anchors:
208
198
 
209
199
  <article>
210
- <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
200
+ <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
211
201
  </article>
212
202
 
213
203
  How it works:
@@ -243,9 +233,7 @@ h1 a[aria-hidden="true"], h2 a[aria-hidden="true"], h3 a[aria-hidden="true"], h4
243
233
 
244
234
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
245
235
 
246
- \3c !--section:docs,list-->
247
-
248
- ### List markers
236
+ \3c !--section:list-->
249
237
 
250
238
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
251
239
 
@@ -340,9 +328,6 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
340
328
  list-style: none;
341
329
  }
342
330
 
343
- /*```
344
- \3c !--section--> */
345
-
346
331
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
347
332
  \3c !--section:code-->
348
333
  ```css */
@@ -412,10 +397,9 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
412
397
 
413
398
  \3c !--section--> */
414
399
 
415
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
416
- \3c !--section:docs-->
400
+ /*\3c !--section:docs-->
417
401
 
418
- ### Column expanders
402
+ ## Column expanders
419
403
 
420
404
  Place `<hr>` element inside `<th>` column to expand it horizontally:
421
405
 
@@ -452,7 +436,7 @@ th hr.x2 {
452
436
 
453
437
  /*```
454
438
 
455
- ### Borderless table
439
+ ## Borderless table
456
440
 
457
441
  `.borderless` removes all default borders:
458
442
 
@@ -465,9 +449,7 @@ th hr.x2 {
465
449
  {.borderless}
466
450
  </article>
467
451
 
468
- Living example: https://bladeswitch.com/#minimal-dependencies table
469
-
470
- \3c !--section--> */
452
+ \3c !--section-->*/
471
453
 
472
454
  table.borderless th,
473
455
  table.borderless td {
@@ -535,10 +517,7 @@ Living examples: \3c !--A-Z-->
535
517
 
536
518
  \3c !--section--> */
537
519
 
538
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
539
- \3c !--section:docs-->
540
-
541
- ### Code
520
+ /*\3c !--section:docs-->
542
521
 
543
522
  The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
544
523
 
@@ -548,7 +527,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
548
527
  ├── blades.theme.css # minimal opinionated theme
549
528
  └── blades.css # above two together
550
529
  ```
551
- How it works:
530
+
531
+ \3c !--section:code-->
552
532
  ```css */
553
533
 
554
534
  @media (width < 768px) {
@@ -568,17 +548,15 @@ code[data-caption]::before {
568
548
  opacity: 50%;
569
549
  }
570
550
 
571
- /*```
572
- \3c !--section--> */
573
-
574
551
  /* Forms */
575
552
 
576
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
553
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
577
554
  \3c !--section:docs-->
578
555
 
579
556
  First, we target either:
580
557
  1. `<label>` which `:has` inner form inputs (classless approach)
581
558
  2. or explicit `.has-float-label` class (explicit approach)
559
+
582
560
  ```css */
583
561
 
584
562
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
@@ -587,10 +565,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
587
565
  position: relative;
588
566
  }
589
567
 
590
- /*
591
- ```
592
- Then, we define the default/fallback state (when the float label should be minimized):
593
- ```css */
568
+ /*```
569
+ Then, we define the default/fallback state (when the float label should be minimized):
570
+ ```css */
594
571
 
595
572
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
596
573
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
@@ -603,10 +580,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
603
580
  cursor: text;
604
581
  }
605
582
 
606
- /*
607
- ```
608
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
609
- ```css */
583
+ /*```
584
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
585
+ ```css */
610
586
 
611
587
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
612
588
  opacity: 0;
@@ -633,12 +609,13 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
633
609
  opacity: 50%;
634
610
  }
635
611
 
636
- /*
637
- ```
612
+ /*```
613
+
638
614
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
639
615
 
640
616
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
641
- \3c !--section--> */
617
+
618
+ \3c !--section-->*/
642
619
 
643
620
  /* Components */
644
621
 
@@ -665,14 +642,11 @@ dl.timeline dd, .has-timeline > dl dd {
665
642
  border-inline-start: 0.25rem solid gray;
666
643
  }
667
644
 
668
- /*```*/
669
-
670
645
  /* Utilities */
671
646
 
672
- /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
673
- \3c !--section:docs-->
647
+ /*\3c !--section:docs-->
674
648
 
675
- ### Auto-dark
649
+ ## Auto-dark
676
650
 
677
651
  `.dark-auto` automatically creates a simple dark version of any element:
678
652
 
@@ -709,7 +683,7 @@ How it works:
709
683
 
710
684
  /*```
711
685
 
712
- ### Faded
686
+ ## Faded
713
687
 
714
688
  `.faded` reduces the opacity of an element:
715
689
 
@@ -737,9 +711,7 @@ How it works:
737
711
  filter: invert(1) !important;
738
712
  }
739
713
 
740
- /*
741
- \3c !--section:code-->
742
- ```css */
714
+ /*\3c !--section:code-->```css */
743
715
 
744
716
  /* Default/fallback state */
745
717
 
@@ -913,6 +885,3 @@ table pre {
913
885
  .faded a {
914
886
  text-decoration-style: dotted;
915
887
  }
916
-
917
- /*```
918
- \3c !--section--> */
package/css/blades.standalone.theme.css CHANGED
@@ -1,6 +1,4 @@
1
- /*
2
- \3c !--section:code-->
3
- ```css */
1
+ /*\3c !--section:code-->```css */
4
2
  /* Default/fallback state */
5
3
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
6
4
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
@@ -143,5 +141,3 @@ table pre {
143
141
  .faded a {
144
142
  text-decoration-style: dotted;
145
143
  }
146
- /*```
147
- \3c !--section--> */
package/css/float-label.core.css CHANGED
@@ -1,19 +1,19 @@
1
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
1
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
2
2
  \3c !--section:docs-->
3
3
 
4
4
  First, we target either:
5
5
  1. `<label>` which `:has` inner form inputs (classless approach)
6
6
  2. or explicit `.has-float-label` class (explicit approach)
7
+
7
8
  ```css */
8
9
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
9
10
  .has-float-label {
10
11
  display: block;
11
12
  position: relative;
12
13
  }
13
- /*
14
- ```
15
- Then, we define the default/fallback state (when the float label should be minimized):
16
- ```css */
14
+ /*```
15
+ Then, we define the default/fallback state (when the float label should be minimized):
16
+ ```css */
17
17
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
18
18
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
19
19
  .has-float-label > span,
@@ -24,10 +24,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
24
24
  font-size: 75%;
25
25
  cursor: text;
26
26
  }
27
- /*
28
- ```
29
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
30
- ```css */
27
+ /*```
28
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
29
+ ```css */
31
30
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
32
31
  opacity: 0;
33
32
  }
@@ -48,9 +47,10 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
48
47
  font-size: inherit;
49
48
  opacity: 50%;
50
49
  }
51
- /*
52
- ```
50
+ /*```
51
+
53
52
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
54
53
 
55
54
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
56
- \3c !--section--> */
55
+
56
+ \3c !--section-->*/
package/css/float-label.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* Float Label CSS v2.0.0-alpha */
2
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
2
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
3
3
  \3c !--section:docs-->
4
4
 
5
5
  First, we target either:
6
6
  1. `<label>` which `:has` inner form inputs (classless approach)
7
7
  2. or explicit `.has-float-label` class (explicit approach)
8
+
8
9
  ```css */
9
10
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
10
11
  .has-float-label {
11
12
  display: block;
12
13
  position: relative;
13
14
  }
14
- /*
15
- ```
16
- Then, we define the default/fallback state (when the float label should be minimized):
17
- ```css */
15
+ /*```
16
+ Then, we define the default/fallback state (when the float label should be minimized):
17
+ ```css */
18
18
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
19
19
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
20
20
  .has-float-label > span,
@@ -25,10 +25,9 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
25
25
  font-size: 75%;
26
26
  cursor: text;
27
27
  }
28
- /*
29
- ```
30
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
31
- ```css */
28
+ /*```
29
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
30
+ ```css */
32
31
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
33
32
  opacity: 0;
34
33
  }
@@ -49,12 +48,13 @@ label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"
49
48
  font-size: inherit;
50
49
  opacity: 50%;
51
50
  }
52
- /*
53
- ```
51
+ /*```
52
+
54
53
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
55
54
 
56
55
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
57
- \3c !--section--> */
56
+
57
+ \3c !--section-->*/
58
58
  /* Default/fallback state */
59
59
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
60
60
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "2.4.8",
3
+ "version": "2.4.9",
4
4
  "exports": {
5
5
  ".": "./src/blades.css",
6
6
  "./standalone": "./src/blades.standalone.css",
package/src/_layout.css CHANGED
@@ -1,7 +1,4 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
2
- <!--section:docs,columns-->
3
-
4
- ### Auto-columns
1
+ /*<!--section:columns-->
5
2
 
6
3
  `.columns` automatically creates columns with at least 30 characters each:
7
4
 
@@ -27,10 +24,7 @@ How it works:
27
24
  break-inside: avoid;
28
25
  }
29
26
  }
30
- /*```
31
- <!--section:docs,jump-->
32
-
33
- ### Jump to top
27
+ /*```<!--section:jump-->
34
28
 
35
29
  `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
36
30
  ```css */
@@ -40,5 +34,3 @@ How it works:
40
34
  right: 0;
41
35
  padding-top: 50vh;
42
36
  }
43
- /*```
44
- <!--section--> */
package/src/_utilities.css CHANGED
@@ -1,7 +1,6 @@
1
- /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
2
- <!--section:docs-->
1
+ /*<!--section:docs-->
3
2
 
4
- ### Auto-dark
3
+ ## Auto-dark
5
4
 
6
5
  `.dark-auto` automatically creates a simple dark version of any element:
7
6
 
@@ -28,7 +27,7 @@ How it works:
28
27
  }
29
28
  /*```
30
29
 
31
- ### Faded
30
+ ## Faded
32
31
 
33
32
  `.faded` reduces the opacity of an element:
34
33
 
package/src/blades.standalone.core.css CHANGED
@@ -1,3 +1,5 @@
1
+ /*<!--section:code-->```css */
2
+
1
3
  /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
2
4
 
3
5
  /* Layout */
package/src/blades.standalone.theme.css CHANGED
@@ -1,6 +1,4 @@
1
- /*
2
- <!--section:code-->
3
- ```css */
1
+ /*<!--section:code-->```css */
4
2
  @import "./float-label.theme";
5
3
 
6
4
  html {
@@ -130,5 +128,3 @@ table {
130
128
  text-decoration-style: dotted;
131
129
  }
132
130
  }
133
- /*```
134
- <!--section--> */
package/src/components/_timeline.css CHANGED
@@ -22,4 +22,3 @@ dl.timeline,
22
22
  border-inline-start: 0.25rem solid gray;
23
23
  }
24
24
  }
25
- /*```*/
package/src/content/_code.css CHANGED
@@ -1,7 +1,4 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
2
- <!--section:docs-->
3
-
4
- ### Code
1
+ /*<!--section:docs-->
5
2
 
6
3
  The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
7
4
 
@@ -11,7 +8,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
11
8
  ├── blades.theme.css # minimal opinionated theme
12
9
  └── blades.css # above two together
13
10
  ```
14
- How it works:
11
+
12
+ <!--section:code-->
15
13
  ```css */
16
14
  pre {
17
15
  @media (width < 768px) {
@@ -31,5 +29,3 @@ code {
31
29
  }
32
30
  }
33
31
  }
34
- /*```
35
- <!--section--> */
package/src/content/_table.css CHANGED
@@ -1,7 +1,6 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
2
- <!--section:docs-->
1
+ /*<!--section:docs-->
3
2
 
4
- ### Column expanders
3
+ ## Column expanders
5
4
 
6
5
  Place `<hr>` element inside `<th>` column to expand it horizontally:
7
6
 
@@ -37,7 +36,7 @@ th {
37
36
  }
38
37
  /*```
39
38
 
40
- ### Borderless table
39
+ ## Borderless table
41
40
 
42
41
  `.borderless` removes all default borders:
43
42
 
@@ -50,9 +49,7 @@ th {
50
49
  {.borderless}
51
50
  </article>
52
51
 
53
- Living example: https://bladeswitch.com/#minimal-dependencies table
54
-
55
- <!--section--> */
52
+ <!--section-->*/
56
53
  table.borderless {
57
54
  th,
58
55
  td {
package/src/content/_typography.css CHANGED
@@ -1,12 +1,9 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
2
- <!--section:docs,h-anchor-->
3
-
4
- ### Heading anchors
1
+ /*<!--section:h-anchor-->
5
2
 
6
3
  Links with `href="#..."` inside headings are automatically displayed as anchors:
7
4
 
8
5
  <article>
9
- <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
6
+ <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
10
7
  </article>
11
8
 
12
9
  How it works:
@@ -41,9 +38,7 @@ h6 {
41
38
 
42
39
  **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
43
40
 
44
- <!--section:docs,list-->
45
-
46
- ### List markers
41
+ <!--section:list-->
47
42
 
48
43
  Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
49
44
 
@@ -136,5 +131,3 @@ ol {
136
131
  }
137
132
  }
138
133
  }
139
- /*```
140
- <!--section--> */
package/src/float-label.core.css CHANGED
@@ -1,18 +1,18 @@
1
- /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
1
+ /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
2
2
  <!--section:docs-->
3
3
 
4
4
  First, we target either:
5
5
  1. `<label>` which `:has` inner form inputs (classless approach)
6
6
  2. or explicit `.has-float-label` class (explicit approach)
7
+
7
8
  ```css */
8
9
  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
9
10
  .has-float-label {
10
11
  display: block;
11
12
  position: relative;
12
- /*
13
- ```
14
- Then, we define the default/fallback state (when the float label should be minimized):
15
- ```css */
13
+ /*```
14
+ Then, we define the default/fallback state (when the float label should be minimized):
15
+ ```css */
16
16
  > span,
17
17
  label {
18
18
  position: absolute;
@@ -21,10 +21,9 @@ Then, we define the default/fallback state (when the float label should be minim
21
21
  cursor: text;
22
22
  font-size: 75%;
23
23
  }
24
- /*
25
- ```
26
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
27
- ```css */
24
+ /*```
25
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
26
+ ```css */
28
27
  *:placeholder-shown:not(:focus)::placeholder {
29
28
  opacity: 0;
30
29
  }
@@ -36,9 +35,10 @@ Finally, we detect if placeholder is shown, but not in focus. That means we can
36
35
  }
37
36
  }
38
37
  }
39
- /*
40
- ```
38
+ /*```
39
+
41
40
  The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
42
41
 
43
42
  Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
44
- <!--section--> */
43
+
44
+ <!--section-->*/