@anydigital/blades 0.27.0-beta → 0.27.0-beta.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 +81 -64
- package/_includes/blades/sitemap.xml.njk +12 -0
- package/assets/blades.css +51 -51
- package/assets/blades.theme.css +5 -0
- package/assets/responsive-table.css +0 -1
- package/blades.gemspec +1 -1
- package/package.json +1 -1
- package/src/_code.css +1 -0
- package/src/_layout.css +22 -3
- package/src/_link.css +3 -4
- package/src/_table.css +2 -2
- package/src/_typography.css +10 -2
- package/src/_utilities.css +11 -36
- package/src/blades.theme.css +5 -0
- package/src/responsive-table.css +0 -1
package/README.md
CHANGED
|
@@ -1,49 +1,54 @@
|
|
|
1
|
-
# 🥷 Blades
|
|
1
|
+
# 🥷 Blades
|
|
2
2
|
|
|
3
3
|
<!--section:hero-->
|
|
4
4
|
|
|
5
5
|
<hgroup>Framework-agnostic,<wbr> class-light CSS⁺ blade kit.</hgroup>
|
|
6
6
|
|
|
7
|
-
<big>Use with Pico, Tailwind, or any other CSS reset/framework.</big>
|
|
7
|
+
<big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
[](https://github.com/anydigital/blades)
|
|
8
11
|
|
|
9
12
|
<!--section-->
|
|
10
13
|
|
|
11
14
|
Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
|
|
12
15
|
|
|
16
|
+
[](https://blades.ninja/)
|
|
17
|
+
|
|
13
18
|
---
|
|
14
19
|
|
|
15
20
|
<!--section:index-->
|
|
16
21
|
|
|
17
|
-
<hgroup id="css">
|
|
18
|
-
<small>Class-light</small>
|
|
19
|
-
<h2>CSS blades</h2>
|
|
20
|
-
<p>inspired by Pico.css</p>
|
|
21
|
-
</hgroup>
|
|
22
|
+
<hgroup id="css"><small>Class-light</small>
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
- [Typography](https://blades.ninja/css/typography/)
|
|
26
|
-
- [Table](https://blades.ninja/css/table/)
|
|
27
|
-
- [Responsive table without wrapper](https://blades.ninja/css/table/#responsive-table-without-wrapper) {data-marker=🥷}
|
|
28
|
-
- [Heading anchors](https://blades.ninja/css/typography/#heading-anchors)
|
|
29
|
-
- [List markers](https://blades.ninja/css/typography/#list-markers) {data-marker=🥷}
|
|
30
|
-
- [Link [fav]icons](https://blades.ninja/css/typography/#link-fav-icons)
|
|
31
|
-
- [Code](https://blades.ninja/css/code/)
|
|
32
|
-
- [Layout](https://blades.ninja/css/layout/)
|
|
33
|
-
- [Breakout elements](https://blades.ninja/css/breakout/) {data-marker=🥷}
|
|
34
|
-
- [Utilities](https://blades.ninja/css/utilities/)
|
|
35
|
-
- [Jump to top](https://blades.ninja/css/utilities/#jump-to-top)
|
|
36
|
-
- [Table of contents](https://blades.ninja/css/utilities/#table-of-contents)
|
|
37
|
-
- [Auto-columns](https://blades.ninja/css/utilities/#auto-columns)
|
|
38
|
-
- [Auto-dark](https://blades.ninja/css/utilities/#auto-dark)
|
|
24
|
+
## [CSS blades](https://blades.ninja/css/)
|
|
39
25
|
|
|
40
|
-
|
|
26
|
+
inspired by Pico.css
|
|
41
27
|
|
|
42
|
-
</
|
|
43
|
-
|
|
44
|
-
<details><summary role="button" class="outline">Install CSS blades</summary>
|
|
28
|
+
</hgroup>
|
|
45
29
|
|
|
46
|
-
|
|
30
|
+
<!-- copy-paste of ToC from https://blades.ninja/css/ -->
|
|
31
|
+
<ul class="unlist columns">
|
|
32
|
+
<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>
|
|
33
|
+
<li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
|
|
34
|
+
<li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
|
|
35
|
+
<li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#link-fav-icons">Link [fav]icons</a></li>
|
|
36
|
+
<li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
|
|
37
|
+
<li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
|
|
38
|
+
<li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
|
|
39
|
+
<li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">Breakout elements →</a></li>
|
|
40
|
+
<li><a href="https://blades.ninja/css/#document">Document</a></li>
|
|
41
|
+
<li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
|
|
42
|
+
<li><a href="https://blades.ninja/css/#table-of-contents">Table of contents</a></li>
|
|
43
|
+
<li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
|
|
44
|
+
<li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
|
|
45
|
+
<li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
|
|
46
|
+
<li><a href="https://blades.ninja/css/#misc">Misc</a></li></ul></li></ul>
|
|
47
|
+
|
|
48
|
+
<!--section:index,install-css-->
|
|
49
|
+
<details><summary role="button" class="outline"><b>Install CSS blades</b></summary>
|
|
50
|
+
|
|
51
|
+
<mark>Option A.</mark> From CDN:
|
|
47
52
|
|
|
48
53
|
<!--prettier-ignore-->
|
|
49
54
|
```html
|
|
@@ -51,7 +56,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
|
|
|
51
56
|
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
|
|
52
57
|
```
|
|
53
58
|
|
|
54
|
-
<mark>Option
|
|
59
|
+
<mark>Option B.</mark> Via npm:
|
|
55
60
|
|
|
56
61
|
```sh
|
|
57
62
|
npm install @anydigital/blades
|
|
@@ -67,43 +72,41 @@ Then import in your .css:
|
|
|
67
72
|
Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
|
|
68
73
|
|
|
69
74
|
</details>
|
|
75
|
+
<!--section:index-->
|
|
70
76
|
|
|
71
77
|
---
|
|
72
78
|
|
|
73
|
-
<hgroup>
|
|
74
|
-
<small>Nunjucks / Liquid</small>
|
|
75
|
-
<h2>HTML blades</h2>
|
|
76
|
-
<p>for 11ty/Build Awesome, Jekyll, etc.</p>
|
|
77
|
-
</hgroup>
|
|
79
|
+
<hgroup><small>Nunjucks / Liquid</small>
|
|
78
80
|
|
|
79
|
-
|
|
81
|
+
## [HTML blades](https://blades.ninja/html/)
|
|
80
82
|
|
|
81
|
-
|
|
82
|
-
- [Links](https://blades.ninja/html/links/)
|
|
83
|
-
- [Google Tag Manager](https://blades.ninja/html/gtm/)
|
|
83
|
+
for 11ty/Build Awesome, Jekyll, etc.
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
</hgroup>
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
- [Base HTML](https://blades.ninja/html/#base) {data-marker=🥷}
|
|
88
|
+
- [Links](https://blades.ninja/html/#links)
|
|
89
|
+
- [Google Tag Manager](https://blades.ninja/html/#gtm)
|
|
88
90
|
|
|
89
|
-
|
|
91
|
+
{.columns}
|
|
92
|
+
|
|
93
|
+
<!--section:index,install-html-->
|
|
94
|
+
<details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
|
|
90
95
|
|
|
91
96
|
```sh
|
|
92
97
|
npm install @anydigital/blades
|
|
93
|
-
cd ./_includes #
|
|
98
|
+
cd ./_includes # your includes dir
|
|
94
99
|
ln -s ../node_modules/@anydigital/blades/_includes/blades
|
|
95
100
|
```
|
|
96
101
|
|
|
97
102
|
That's it! Now you can use HTML blades in your templates like this:
|
|
98
103
|
|
|
99
|
-
```jinja2
|
|
104
|
+
```jinja2 {data-caption=Nunjucks}
|
|
100
105
|
{% extends 'blades/html.njk' %}
|
|
101
106
|
{% include 'blades/gtm.njk' %}
|
|
102
107
|
```
|
|
103
108
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
```liquid
|
|
109
|
+
```liquid {data-caption=Liquid}
|
|
107
110
|
{% include blades/html.liquid %}
|
|
108
111
|
{% include blades/gtm.liquid for_body=true %}
|
|
109
112
|
{% render blades/links, links: site.links, current_url: page.url %}
|
|
@@ -111,28 +114,42 @@ or:
|
|
|
111
114
|
|
|
112
115
|
</details>
|
|
113
116
|
|
|
117
|
+
<!--section:gh-only-->
|
|
118
|
+
|
|
114
119
|
---
|
|
115
120
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
121
|
+
<!--section:appendix-->
|
|
122
|
+
|
|
123
|
+
<hgroup><small>Old-school</small><h2>Jekyll blades</h2><p></p></hgroup>
|
|
124
|
+
|
|
125
|
+
All CSS and HTML blades above are available as a Jekyll theme:
|
|
126
|
+
|
|
127
|
+
<details><summary role="button" class="outline"><b>Install as Jekyll theme</b></summary>
|
|
128
|
+
|
|
129
|
+
In you `_config.yml`:
|
|
130
|
+
|
|
131
|
+
```yaml
|
|
132
|
+
remote_theme: anydigital/blades@v0.27.0-beta # or latest
|
|
133
|
+
plugins:
|
|
134
|
+
- jekyll-remote-theme
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml
|
|
138
|
+
|
|
139
|
+
</details>
|
|
140
|
+
|
|
141
|
+
Or use a preconfigured template:
|
|
120
142
|
|
|
121
|
-
|
|
122
|
-
<a role="button" class="outline" href="https://github.com/anydigital/build-awesome-starter">
|
|
123
|
-
<big>Blades with Tailwind</big><br>
|
|
124
|
-
using Eleventy and Nunjucks <br>
|
|
125
|
-
<small>(Build Awesome Starter)</small>
|
|
126
|
-
</a>
|
|
127
|
-
<a role="button" class="outline" href="https://github.com/anydigital/bladeswitch">
|
|
128
|
-
<big>Blades with Pico</big><br>
|
|
129
|
-
using Jekyll and Liquid <br>
|
|
130
|
-
<small>(Bladeswitch Starter)</small>
|
|
131
|
-
</a>
|
|
132
|
-
</nav>
|
|
143
|
+
[🥷 Bladeswitch Starter ↗ <small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch){role=button .outline}
|
|
133
144
|
|
|
134
145
|
---
|
|
135
146
|
|
|
136
|
-
Featured by:
|
|
147
|
+
- Featured by:
|
|
148
|
+
- https://github.com/uhub/awesome-css
|
|
149
|
+
- 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
|
|
150
|
+
- [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
|
|
151
|
+
- Credits:
|
|
152
|
+
- https://picocss.com/ for inspiration
|
|
153
|
+
- https://11ty.dev/ for build power
|
|
137
154
|
|
|
138
|
-
|
|
155
|
+
{.unlist .columns}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
3
|
+
{%- for page in collections.all %}
|
|
4
|
+
{% if page.data.permalink != false %}
|
|
5
|
+
<url>
|
|
6
|
+
<loc>{{ site.base }}{{ page.url }}</loc>
|
|
7
|
+
<lastmod>{{ page.date }}</lastmod>
|
|
8
|
+
</url>
|
|
9
|
+
{% endif %}
|
|
10
|
+
{%- endfor %}
|
|
11
|
+
</urlset>
|
|
12
|
+
{# https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk #}
|
package/assets/blades.css
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
/* Layout */
|
|
4
4
|
|
|
5
|
-
/*
|
|
5
|
+
/*
|
|
6
|
+
<!--section:docs-->
|
|
7
|
+
|
|
8
|
+
### Document
|
|
6
9
|
Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
|
|
7
10
|
|
|
8
11
|
Prevent horizontal overflow and scrolling, modern way:
|
|
@@ -14,7 +17,7 @@ html {
|
|
|
14
17
|
|
|
15
18
|
/*```
|
|
16
19
|
|
|
17
|
-
|
|
20
|
+
### Landmarks
|
|
18
21
|
Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
|
|
19
22
|
|
|
20
23
|
1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
|
|
@@ -31,7 +34,25 @@ body {
|
|
|
31
34
|
}
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
/*```
|
|
37
|
+
/*```
|
|
38
|
+
|
|
39
|
+
### Jump to top
|
|
40
|
+
```css */
|
|
41
|
+
|
|
42
|
+
[data-jump-to="top"] {
|
|
43
|
+
position: fixed;
|
|
44
|
+
bottom: 0;
|
|
45
|
+
right: 0;
|
|
46
|
+
padding-top: 50vh;
|
|
47
|
+
opacity: 25%;
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
opacity: 75%;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/*```
|
|
55
|
+
<!--section--> */
|
|
35
56
|
|
|
36
57
|
/* <!--section:code-->```css */
|
|
37
58
|
|
|
@@ -152,7 +173,7 @@ body {
|
|
|
152
173
|
|
|
153
174
|
/*
|
|
154
175
|
<!--section:docs-->
|
|
155
|
-
|
|
176
|
+
### Heading anchors
|
|
156
177
|
```css */
|
|
157
178
|
|
|
158
179
|
h1,
|
|
@@ -181,7 +202,7 @@ h6 {
|
|
|
181
202
|
|
|
182
203
|
/*```
|
|
183
204
|
|
|
184
|
-
|
|
205
|
+
### List markers
|
|
185
206
|
```css */
|
|
186
207
|
|
|
187
208
|
ul,
|
|
@@ -189,11 +210,20 @@ ol {
|
|
|
189
210
|
li[data-marker]::marker {
|
|
190
211
|
content: attr(data-marker) " ";
|
|
191
212
|
}
|
|
213
|
+
|
|
214
|
+
&.unlist {
|
|
215
|
+
padding-inline-start: 0;
|
|
216
|
+
|
|
217
|
+
> li {
|
|
218
|
+
list-style: none;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
192
221
|
}
|
|
193
222
|
|
|
194
223
|
/*``` <!--section--> */
|
|
195
224
|
|
|
196
|
-
/*
|
|
225
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
226
|
+
<!--section:code-->```css */
|
|
197
227
|
|
|
198
228
|
a {
|
|
199
229
|
/* Helper to handle icons in links */
|
|
@@ -220,13 +250,11 @@ a {
|
|
|
220
250
|
|
|
221
251
|
/*```
|
|
222
252
|
<!--section:docs-->
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
## Link [fav]icons
|
|
253
|
+
### Link [fav]icons
|
|
226
254
|
<!--section--> */
|
|
227
255
|
|
|
228
|
-
/*
|
|
229
|
-
|
|
256
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
|
|
257
|
+
<!--section:docs-->
|
|
230
258
|
|
|
231
259
|
### Horizontal expanders
|
|
232
260
|
|
|
@@ -316,7 +344,6 @@ Soft-increase selector specificity trick:
|
|
|
316
344
|
|
|
317
345
|
`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
318
346
|
<!--section:docs-->
|
|
319
|
-
### Responsive table without wrapper
|
|
320
347
|
`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
|
|
321
348
|
<div>
|
|
322
349
|
|
|
@@ -331,6 +358,7 @@ Tables inside `.breakout[-all]` are responsive by default.
|
|
|
331
358
|
<!--section--> */
|
|
332
359
|
|
|
333
360
|
/* <!--section:docs-->
|
|
361
|
+
### Code
|
|
334
362
|
Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
|
|
335
363
|
```css */
|
|
336
364
|
|
|
@@ -380,46 +408,16 @@ code {
|
|
|
380
408
|
|
|
381
409
|
/* Utilities */
|
|
382
410
|
|
|
383
|
-
/*
|
|
384
|
-
|
|
385
|
-
## Jump to top
|
|
386
|
-
```css */
|
|
387
|
-
|
|
388
|
-
[data-jump-to="top"] {
|
|
389
|
-
position: fixed;
|
|
390
|
-
bottom: 0;
|
|
391
|
-
right: 0;
|
|
392
|
-
padding-top: 50vh;
|
|
393
|
-
opacity: 25%;
|
|
394
|
-
|
|
395
|
-
&:hover {
|
|
396
|
-
opacity: 75%;
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
/*```
|
|
401
|
-
|
|
402
|
-
## Table of contents
|
|
403
|
-
```css */
|
|
404
|
-
|
|
405
|
-
[data-is-toc] {
|
|
406
|
-
font-size: 87.5%;
|
|
407
|
-
|
|
408
|
-
a {
|
|
409
|
-
text-decoration: none;
|
|
410
|
-
}
|
|
411
|
-
> ul {
|
|
412
|
-
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
/*```
|
|
411
|
+
/*
|
|
412
|
+
<!--section:docs-->
|
|
417
413
|
|
|
418
|
-
|
|
414
|
+
### Auto-columns
|
|
419
415
|
```css */
|
|
420
416
|
|
|
421
|
-
.columns
|
|
422
|
-
|
|
417
|
+
.columns,
|
|
418
|
+
[data-is-toc] > ul,
|
|
419
|
+
[data-is-toc] > ol {
|
|
420
|
+
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
423
421
|
|
|
424
422
|
/* Avoid breaking inside elements, such as nested lists */
|
|
425
423
|
> * {
|
|
@@ -429,7 +427,9 @@ code {
|
|
|
429
427
|
|
|
430
428
|
/*```
|
|
431
429
|
|
|
432
|
-
|
|
430
|
+
Table of contents (`[data-is-toc]`) has auto-columns by default.
|
|
431
|
+
|
|
432
|
+
### Auto-dark
|
|
433
433
|
```css */
|
|
434
434
|
|
|
435
435
|
@media (prefers-color-scheme: dark) {
|
|
@@ -442,7 +442,7 @@ code {
|
|
|
442
442
|
|
|
443
443
|
/*```
|
|
444
444
|
|
|
445
|
-
|
|
445
|
+
### Misc
|
|
446
446
|
```css */
|
|
447
447
|
|
|
448
448
|
.faded {
|
package/assets/blades.theme.css
CHANGED
|
@@ -29,7 +29,6 @@ Soft-increase selector specificity trick:
|
|
|
29
29
|
|
|
30
30
|
`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
31
31
|
<!--section:docs-->
|
|
32
|
-
### Responsive table without wrapper
|
|
33
32
|
`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
|
|
34
33
|
<div>
|
|
35
34
|
|
package/blades.gemspec
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |spec|
|
|
4
4
|
spec.name = "blades"
|
|
5
|
-
spec.version = "0.27.0-beta"
|
|
5
|
+
spec.version = "0.27.0-beta.3"
|
|
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
package/src/_code.css
CHANGED
package/src/_layout.css
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/*
|
|
2
|
+
<!--section:docs-->
|
|
3
|
+
|
|
4
|
+
### Document
|
|
2
5
|
Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
|
|
3
6
|
|
|
4
7
|
Prevent horizontal overflow and scrolling, modern way:
|
|
@@ -8,7 +11,7 @@ html {
|
|
|
8
11
|
}
|
|
9
12
|
/*```
|
|
10
13
|
|
|
11
|
-
|
|
14
|
+
### Landmarks
|
|
12
15
|
Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
|
|
13
16
|
|
|
14
17
|
1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
|
|
@@ -23,4 +26,20 @@ body {
|
|
|
23
26
|
flex-grow: 1;
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
|
-
/*```
|
|
29
|
+
/*```
|
|
30
|
+
|
|
31
|
+
### Jump to top
|
|
32
|
+
```css */
|
|
33
|
+
[data-jump-to="top"] {
|
|
34
|
+
position: fixed;
|
|
35
|
+
bottom: 0;
|
|
36
|
+
right: 0;
|
|
37
|
+
padding-top: 50vh;
|
|
38
|
+
opacity: 25%;
|
|
39
|
+
|
|
40
|
+
&:hover {
|
|
41
|
+
opacity: 75%;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
/*```
|
|
45
|
+
<!--section--> */
|
package/src/_link.css
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
2
|
+
<!--section:code-->```css */
|
|
2
3
|
a {
|
|
3
4
|
/* Helper to handle icons in links */
|
|
4
5
|
> i {
|
|
@@ -23,7 +24,5 @@ a {
|
|
|
23
24
|
}
|
|
24
25
|
/*```
|
|
25
26
|
<!--section:docs-->
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## Link [fav]icons
|
|
27
|
+
### Link [fav]icons
|
|
29
28
|
<!--section--> */
|
package/src/_table.css
CHANGED
package/src/_typography.css
CHANGED
|
@@ -16,7 +16,7 @@ body {
|
|
|
16
16
|
}
|
|
17
17
|
/*
|
|
18
18
|
<!--section:docs-->
|
|
19
|
-
|
|
19
|
+
### Heading anchors
|
|
20
20
|
```css */
|
|
21
21
|
h1,
|
|
22
22
|
h2,
|
|
@@ -43,12 +43,20 @@ h6 {
|
|
|
43
43
|
}
|
|
44
44
|
/*```
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
### List markers
|
|
47
47
|
```css */
|
|
48
48
|
ul,
|
|
49
49
|
ol {
|
|
50
50
|
li[data-marker]::marker {
|
|
51
51
|
content: attr(data-marker) " ";
|
|
52
52
|
}
|
|
53
|
+
|
|
54
|
+
&.unlist {
|
|
55
|
+
padding-inline-start: 0;
|
|
56
|
+
|
|
57
|
+
> li {
|
|
58
|
+
list-style: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
53
61
|
}
|
|
54
62
|
/*``` <!--section--> */
|
package/src/_utilities.css
CHANGED
|
@@ -1,39 +1,12 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/*
|
|
2
|
+
<!--section:docs-->
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
### Auto-columns
|
|
4
5
|
```css */
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
padding-top: 50vh;
|
|
10
|
-
opacity: 25%;
|
|
11
|
-
|
|
12
|
-
&:hover {
|
|
13
|
-
opacity: 75%;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
/*```
|
|
17
|
-
|
|
18
|
-
## Table of contents
|
|
19
|
-
```css */
|
|
20
|
-
[data-is-toc] {
|
|
21
|
-
font-size: 87.5%;
|
|
22
|
-
|
|
23
|
-
a {
|
|
24
|
-
text-decoration: none;
|
|
25
|
-
}
|
|
26
|
-
> ul {
|
|
27
|
-
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/*```
|
|
32
|
-
|
|
33
|
-
## Auto-columns
|
|
34
|
-
```css */
|
|
35
|
-
.columns {
|
|
36
|
-
columns: 20ch auto; /* 3 cols max for 65ch container */
|
|
6
|
+
.columns,
|
|
7
|
+
[data-is-toc] > ul,
|
|
8
|
+
[data-is-toc] > ol {
|
|
9
|
+
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
37
10
|
|
|
38
11
|
/* Avoid breaking inside elements, such as nested lists */
|
|
39
12
|
> * {
|
|
@@ -42,7 +15,9 @@
|
|
|
42
15
|
}
|
|
43
16
|
/*```
|
|
44
17
|
|
|
45
|
-
|
|
18
|
+
Table of contents (`[data-is-toc]`) has auto-columns by default.
|
|
19
|
+
|
|
20
|
+
### Auto-dark
|
|
46
21
|
```css */
|
|
47
22
|
@media (prefers-color-scheme: dark) {
|
|
48
23
|
:root:not([data-theme="light"]) {
|
|
@@ -53,7 +28,7 @@
|
|
|
53
28
|
}
|
|
54
29
|
/*```
|
|
55
30
|
|
|
56
|
-
|
|
31
|
+
### Misc
|
|
57
32
|
```css */
|
|
58
33
|
.faded {
|
|
59
34
|
opacity: 50%;
|
package/src/blades.theme.css
CHANGED
package/src/responsive-table.css
CHANGED
|
@@ -29,7 +29,6 @@ Soft-increase selector specificity trick:
|
|
|
29
29
|
|
|
30
30
|
`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
31
31
|
<!--section:docs-->
|
|
32
|
-
### Responsive table without wrapper
|
|
33
32
|
`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
|
|
34
33
|
<div>
|
|
35
34
|
|