@anyblades/blades 2.2.1 → 2.2.3
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.
- package/README.md +17 -15
- package/_includes/blades/html.njk +2 -2
- package/assets/blades.css +37 -6
- package/assets/blades.standalone.core.css +42 -6
- package/assets/blades.standalone.css +42 -6
- package/assets/breakout.css +10 -3
- package/assets/link-icon.css +1 -0
- package/assets/responsive-table.css +1 -1
- package/blades.gemspec +1 -1
- package/package.json +1 -1
- package/src/breakout.css +7 -3
- package/src/content/_typography.css +29 -2
- package/src/link-icon.css +1 -0
- package/src/responsive-table.css +1 -1
package/README.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
<!--section:summary-->
|
|
4
4
|
|
|
5
|
-
<h1><mark>Minimal CSS
|
|
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](
|
|
9
|
+
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.
|
|
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
|
|
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" />
|
|
@@ -157,21 +157,23 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
|
|
|
157
157
|
|
|
158
158
|
<!--section:info-->
|
|
159
159
|
|
|
160
|
-
## <sup>Featured by</sup><!--A
|
|
160
|
+
## <sup>Featured by</sup><!--awesome,sites,social/Z-A-->
|
|
161
161
|
|
|
162
|
-
-
|
|
163
|
-
- [
|
|
164
|
-
- [
|
|
165
|
-
- [
|
|
166
|
-
-
|
|
167
|
-
- [
|
|
168
|
-
- [https://
|
|
162
|
+
- https://github.com/uhub/awesome-css
|
|
163
|
+
- [classless-css](https://github.com/dbohdan/classless-css#components:~:text=float%20label) [#float-label](//blades.ninja/css/float-label/){.faded}
|
|
164
|
+
- [awesome-css-frameworks-and-ui-libraries](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
|
|
165
|
+
- [awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
|
|
166
|
+
- https://dummy.my/frameworks/
|
|
167
|
+
- [sveltiacms.app](https://sveltiacms.app/en/docs/start#starter-templates)
|
|
168
|
+
- [https://trendshift.io/](https://trendshift.io/repositories/29875) [#pico-fork](//blades.ninja/css/pico/){.faded}
|
|
169
|
+
- [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
|
|
170
|
+
- [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
|
|
169
171
|
|
|
170
|
-
<!--{.
|
|
172
|
+
<!--{.markerless .columns}-->
|
|
171
173
|
|
|
172
174
|
## <sup>Credits</sup>
|
|
173
175
|
|
|
174
|
-
- https://picocss.com/
|
|
175
|
-
- https://11ty.dev/ for [this site generation](https://github.com/anyblades/blades.ninja)
|
|
176
|
+
- https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
|
|
177
|
+
- https://11ty.dev/ for [this site generation ↗](https://github.com/anyblades/blades.ninja)
|
|
176
178
|
|
|
177
|
-
<!--{.
|
|
179
|
+
<!--{.markerless}-->
|
|
@@ -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/assets/blades.css
CHANGED
|
@@ -530,6 +530,13 @@ How it works:
|
|
|
530
530
|
padding-inline: 10%;
|
|
531
531
|
max-width: calc(10% + 65ch + 10%);
|
|
532
532
|
}
|
|
533
|
+
@media (width < 768px) {
|
|
534
|
+
.breakout,
|
|
535
|
+
.breakout-all {
|
|
536
|
+
padding-inline: 1rem;
|
|
537
|
+
max-width: calc(1rem + 65ch + 1rem)
|
|
538
|
+
}
|
|
539
|
+
}
|
|
533
540
|
/* Breakout direct children only */
|
|
534
541
|
.breakout > *:is(
|
|
535
542
|
table,
|
|
@@ -552,7 +559,7 @@ How it works:
|
|
|
552
559
|
width: -moz-fit-content;
|
|
553
560
|
width: fit-content;
|
|
554
561
|
min-width: 100%;
|
|
555
|
-
max-width: 125
|
|
562
|
+
max-width: min(125%, 100dvw);
|
|
556
563
|
margin-left: 50%;
|
|
557
564
|
transform: translateX(-50%);
|
|
558
565
|
}
|
|
@@ -562,7 +569,7 @@ How it works:
|
|
|
562
569
|
}
|
|
563
570
|
/* Max out the width of the element */
|
|
564
571
|
.breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
|
|
565
|
-
width: 125
|
|
572
|
+
width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
566
573
|
}
|
|
567
574
|
.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
|
|
568
575
|
position: relative;
|
|
@@ -593,7 +600,7 @@ How it works:
|
|
|
593
600
|
overflow: visible;
|
|
594
601
|
}
|
|
595
602
|
.breakout-all > *:is(hr)::before {
|
|
596
|
-
width:
|
|
603
|
+
width: 100dvw;
|
|
597
604
|
left: 50%;
|
|
598
605
|
height: 100%;
|
|
599
606
|
transform: translateX(-50%);
|
|
@@ -715,9 +722,32 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
715
722
|
}
|
|
716
723
|
/*```
|
|
717
724
|
|
|
725
|
+
### Markerless
|
|
726
|
+
|
|
727
|
+
`.markerless` removes markers and reduces padding:
|
|
728
|
+
|
|
729
|
+
<article>
|
|
730
|
+
|
|
731
|
+
- 1️⃣ so you can use
|
|
732
|
+
- 2️⃣ emojis or images
|
|
733
|
+
- 3️⃣ instead of bullets
|
|
734
|
+
|
|
735
|
+
{.markerless}
|
|
736
|
+
</article>
|
|
737
|
+
|
|
738
|
+
How it works:
|
|
739
|
+
```css */
|
|
740
|
+
ul.markerless, ol.markerless {
|
|
741
|
+
padding-inline-start: 1.25rem;
|
|
742
|
+
}
|
|
743
|
+
ul.markerless li, ol.markerless li {
|
|
744
|
+
list-style: none;
|
|
745
|
+
}
|
|
746
|
+
/*```
|
|
747
|
+
|
|
718
748
|
### Unlist
|
|
719
749
|
|
|
720
|
-
`.unlist` removes list styling:
|
|
750
|
+
`.unlist` removes list styling at all:
|
|
721
751
|
|
|
722
752
|
<article>
|
|
723
753
|
|
|
@@ -728,7 +758,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
728
758
|
{.unlist .grid style=margin:0}
|
|
729
759
|
</article>
|
|
730
760
|
|
|
731
|
-
`.unlist-all`
|
|
761
|
+
`.unlist-all` removes styling from all nested lists too.
|
|
732
762
|
|
|
733
763
|
How it works:
|
|
734
764
|
```css */
|
|
@@ -752,6 +782,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
|
|
|
752
782
|
a:has(> i) {
|
|
753
783
|
display: inline-flex;
|
|
754
784
|
gap: 0.375ch; /* =3/8 */
|
|
785
|
+
text-wrap: balance;
|
|
755
786
|
overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
|
|
756
787
|
}
|
|
757
788
|
a > i {
|
|
@@ -873,7 +904,7 @@ table.responsive,
|
|
|
873
904
|
width: -moz-max-content;
|
|
874
905
|
width: max-content;
|
|
875
906
|
min-width: auto;
|
|
876
|
-
max-width:
|
|
907
|
+
max-width: 100dvw;
|
|
877
908
|
padding-inline: 7.5%;
|
|
878
909
|
|
|
879
910
|
/* Let them scroll */
|
|
@@ -65,6 +65,15 @@ How it works:
|
|
|
65
65
|
max-width: calc(10% + 65ch + 10%);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
+
@media (width < 768px) {
|
|
69
|
+
|
|
70
|
+
.breakout,
|
|
71
|
+
.breakout-all {
|
|
72
|
+
padding-inline: 1rem;
|
|
73
|
+
max-width: calc(1rem + 65ch + 1rem)
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
68
77
|
/* Breakout direct children only */
|
|
69
78
|
|
|
70
79
|
.breakout > *:is(
|
|
@@ -88,7 +97,7 @@ How it works:
|
|
|
88
97
|
width: -moz-fit-content;
|
|
89
98
|
width: fit-content;
|
|
90
99
|
min-width: 100%;
|
|
91
|
-
max-width: 125
|
|
100
|
+
max-width: min(125%, 100dvw);
|
|
92
101
|
margin-left: 50%;
|
|
93
102
|
transform: translateX(-50%);
|
|
94
103
|
}
|
|
@@ -102,7 +111,7 @@ How it works:
|
|
|
102
111
|
/* Max out the width of the element */
|
|
103
112
|
|
|
104
113
|
.breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
|
|
105
|
-
width: 125
|
|
114
|
+
width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
106
115
|
}
|
|
107
116
|
|
|
108
117
|
.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
|
|
@@ -140,7 +149,7 @@ How it works:
|
|
|
140
149
|
}
|
|
141
150
|
|
|
142
151
|
.breakout-all > *:is(hr)::before {
|
|
143
|
-
width:
|
|
152
|
+
width: 100dvw;
|
|
144
153
|
left: 50%;
|
|
145
154
|
height: 100%;
|
|
146
155
|
transform: translateX(-50%);
|
|
@@ -274,9 +283,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
274
283
|
|
|
275
284
|
/*```
|
|
276
285
|
|
|
286
|
+
### Markerless
|
|
287
|
+
|
|
288
|
+
`.markerless` removes markers and reduces padding:
|
|
289
|
+
|
|
290
|
+
<article>
|
|
291
|
+
|
|
292
|
+
- 1️⃣ so you can use
|
|
293
|
+
- 2️⃣ emojis or images
|
|
294
|
+
- 3️⃣ instead of bullets
|
|
295
|
+
|
|
296
|
+
{.markerless}
|
|
297
|
+
</article>
|
|
298
|
+
|
|
299
|
+
How it works:
|
|
300
|
+
```css */
|
|
301
|
+
|
|
302
|
+
ul.markerless, ol.markerless {
|
|
303
|
+
padding-inline-start: 1.25rem;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
ul.markerless li, ol.markerless li {
|
|
307
|
+
list-style: none;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/*```
|
|
311
|
+
|
|
277
312
|
### Unlist
|
|
278
313
|
|
|
279
|
-
`.unlist` removes list styling:
|
|
314
|
+
`.unlist` removes list styling at all:
|
|
280
315
|
|
|
281
316
|
<article>
|
|
282
317
|
|
|
@@ -287,7 +322,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
287
322
|
{.unlist .grid style=margin:0}
|
|
288
323
|
</article>
|
|
289
324
|
|
|
290
|
-
`.unlist-all`
|
|
325
|
+
`.unlist-all` removes styling from all nested lists too.
|
|
291
326
|
|
|
292
327
|
How it works:
|
|
293
328
|
```css */
|
|
@@ -317,6 +352,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
|
|
|
317
352
|
a:has(> i) {
|
|
318
353
|
display: inline-flex;
|
|
319
354
|
gap: 0.375ch; /* =3/8 */
|
|
355
|
+
text-wrap: balance;
|
|
320
356
|
overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
|
|
321
357
|
}
|
|
322
358
|
|
|
@@ -453,7 +489,7 @@ table.responsive,
|
|
|
453
489
|
width: -moz-max-content;
|
|
454
490
|
width: max-content;
|
|
455
491
|
min-width: auto;
|
|
456
|
-
max-width:
|
|
492
|
+
max-width: 100dvw;
|
|
457
493
|
padding-inline: 7.5%;
|
|
458
494
|
|
|
459
495
|
/* Let them scroll */
|
|
@@ -65,6 +65,15 @@ How it works:
|
|
|
65
65
|
max-width: calc(10% + 65ch + 10%);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
+
@media (width < 768px) {
|
|
69
|
+
|
|
70
|
+
.breakout,
|
|
71
|
+
.breakout-all {
|
|
72
|
+
padding-inline: 1rem;
|
|
73
|
+
max-width: calc(1rem + 65ch + 1rem)
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
68
77
|
/* Breakout direct children only */
|
|
69
78
|
|
|
70
79
|
.breakout > *:is(
|
|
@@ -88,7 +97,7 @@ How it works:
|
|
|
88
97
|
width: -moz-fit-content;
|
|
89
98
|
width: fit-content;
|
|
90
99
|
min-width: 100%;
|
|
91
|
-
max-width: 125
|
|
100
|
+
max-width: min(125%, 100dvw);
|
|
92
101
|
margin-left: 50%;
|
|
93
102
|
transform: translateX(-50%);
|
|
94
103
|
}
|
|
@@ -102,7 +111,7 @@ How it works:
|
|
|
102
111
|
/* Max out the width of the element */
|
|
103
112
|
|
|
104
113
|
.breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
|
|
105
|
-
width: 125
|
|
114
|
+
width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
106
115
|
}
|
|
107
116
|
|
|
108
117
|
.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
|
|
@@ -140,7 +149,7 @@ How it works:
|
|
|
140
149
|
}
|
|
141
150
|
|
|
142
151
|
.breakout-all > *:is(hr)::before {
|
|
143
|
-
width:
|
|
152
|
+
width: 100dvw;
|
|
144
153
|
left: 50%;
|
|
145
154
|
height: 100%;
|
|
146
155
|
transform: translateX(-50%);
|
|
@@ -274,9 +283,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
274
283
|
|
|
275
284
|
/*```
|
|
276
285
|
|
|
286
|
+
### Markerless
|
|
287
|
+
|
|
288
|
+
`.markerless` removes markers and reduces padding:
|
|
289
|
+
|
|
290
|
+
<article>
|
|
291
|
+
|
|
292
|
+
- 1️⃣ so you can use
|
|
293
|
+
- 2️⃣ emojis or images
|
|
294
|
+
- 3️⃣ instead of bullets
|
|
295
|
+
|
|
296
|
+
{.markerless}
|
|
297
|
+
</article>
|
|
298
|
+
|
|
299
|
+
How it works:
|
|
300
|
+
```css */
|
|
301
|
+
|
|
302
|
+
ul.markerless, ol.markerless {
|
|
303
|
+
padding-inline-start: 1.25rem;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
ul.markerless li, ol.markerless li {
|
|
307
|
+
list-style: none;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/*```
|
|
311
|
+
|
|
277
312
|
### Unlist
|
|
278
313
|
|
|
279
|
-
`.unlist` removes list styling:
|
|
314
|
+
`.unlist` removes list styling at all:
|
|
280
315
|
|
|
281
316
|
<article>
|
|
282
317
|
|
|
@@ -287,7 +322,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
|
|
|
287
322
|
{.unlist .grid style=margin:0}
|
|
288
323
|
</article>
|
|
289
324
|
|
|
290
|
-
`.unlist-all`
|
|
325
|
+
`.unlist-all` removes styling from all nested lists too.
|
|
291
326
|
|
|
292
327
|
How it works:
|
|
293
328
|
```css */
|
|
@@ -317,6 +352,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
|
|
|
317
352
|
a:has(> i) {
|
|
318
353
|
display: inline-flex;
|
|
319
354
|
gap: 0.375ch; /* =3/8 */
|
|
355
|
+
text-wrap: balance;
|
|
320
356
|
overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
|
|
321
357
|
}
|
|
322
358
|
|
|
@@ -453,7 +489,7 @@ table.responsive,
|
|
|
453
489
|
width: -moz-max-content;
|
|
454
490
|
width: max-content;
|
|
455
491
|
min-width: auto;
|
|
456
|
-
max-width:
|
|
492
|
+
max-width: 100dvw;
|
|
457
493
|
padding-inline: 7.5%;
|
|
458
494
|
|
|
459
495
|
/* Let them scroll */
|
package/assets/breakout.css
CHANGED
|
@@ -7,6 +7,13 @@
|
|
|
7
7
|
padding-inline: 10%;
|
|
8
8
|
max-width: calc(10% + 65ch + 10%);
|
|
9
9
|
}
|
|
10
|
+
@media (width < 768px) {
|
|
11
|
+
.breakout,
|
|
12
|
+
.breakout-all {
|
|
13
|
+
padding-inline: 1rem;
|
|
14
|
+
max-width: calc(1rem + 65ch + 1rem)
|
|
15
|
+
}
|
|
16
|
+
}
|
|
10
17
|
/* Breakout direct children only */
|
|
11
18
|
.breakout > *:is(
|
|
12
19
|
table,
|
|
@@ -29,7 +36,7 @@
|
|
|
29
36
|
width: -moz-fit-content;
|
|
30
37
|
width: fit-content;
|
|
31
38
|
min-width: 100%;
|
|
32
|
-
max-width: 125
|
|
39
|
+
max-width: min(125%, 100dvw);
|
|
33
40
|
margin-left: 50%;
|
|
34
41
|
transform: translateX(-50%);
|
|
35
42
|
}
|
|
@@ -39,7 +46,7 @@
|
|
|
39
46
|
}
|
|
40
47
|
/* Max out the width of the element */
|
|
41
48
|
.breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
|
|
42
|
-
width: 125
|
|
49
|
+
width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
43
50
|
}
|
|
44
51
|
.breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
|
|
45
52
|
position: relative;
|
|
@@ -70,7 +77,7 @@
|
|
|
70
77
|
overflow: visible;
|
|
71
78
|
}
|
|
72
79
|
.breakout-all > *:is(hr)::before {
|
|
73
|
-
width:
|
|
80
|
+
width: 100dvw;
|
|
74
81
|
left: 50%;
|
|
75
82
|
height: 100%;
|
|
76
83
|
transform: translateX(-50%);
|
package/assets/link-icon.css
CHANGED
package/blades.gemspec
CHANGED
package/package.json
CHANGED
package/src/breakout.css
CHANGED
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
/* Prepare the container for breakout elements */
|
|
7
7
|
padding-inline: 10%;
|
|
8
8
|
max-width: calc(10% + 65ch + 10%);
|
|
9
|
+
@media (width < 768px) {
|
|
10
|
+
padding-inline: 1rem;
|
|
11
|
+
max-width: calc(1rem + 65ch + 1rem);
|
|
12
|
+
}
|
|
9
13
|
|
|
10
14
|
/* Breakout direct children only */
|
|
11
15
|
& > * {
|
|
@@ -20,7 +24,7 @@
|
|
|
20
24
|
) {
|
|
21
25
|
width: fit-content;
|
|
22
26
|
min-width: 100%;
|
|
23
|
-
max-width: 125
|
|
27
|
+
max-width: min(125%, 100dvw);
|
|
24
28
|
margin-left: 50%;
|
|
25
29
|
transform: translateX(-50%);
|
|
26
30
|
}
|
|
@@ -32,7 +36,7 @@
|
|
|
32
36
|
|
|
33
37
|
/* Max out the width of the element */
|
|
34
38
|
&.breakout-item-max {
|
|
35
|
-
width: 125
|
|
39
|
+
width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
36
40
|
}
|
|
37
41
|
}
|
|
38
42
|
}
|
|
@@ -74,7 +78,7 @@
|
|
|
74
78
|
overflow: visible;
|
|
75
79
|
|
|
76
80
|
&::before {
|
|
77
|
-
width:
|
|
81
|
+
width: 100dvw;
|
|
78
82
|
left: 50%;
|
|
79
83
|
height: 100%;
|
|
80
84
|
transform: translateX(-50%);
|
|
@@ -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`
|
|
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