@anydigital/bricks 0.27.0-alpha → 0.27.0-alpha.10
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 +2 -2
- package/_includes/bricks/html.liquid +2 -1
- package/_includes/bricks/html.njk +2 -1
- package/_includes/bricks/nav.liquid +6 -1
- package/assets/breakout.css +23 -11
- package/assets/bricks.css +186 -18
- package/assets/bricks.theme.css +54 -3
- package/bricks.gemspec +1 -1
- package/package.json +3 -1
- package/src/_classless.css +15 -0
- package/src/_tricks.css +128 -4
- package/src/_unreduce-motion.css +12 -0
- package/src/breakout.css +23 -11
- package/src/bricks.css +1 -3
- package/src/bricks.theme.css +54 -3
- package/src/_refactor/_prose.css +0 -136
- package/src/_refactor/_util.css +0 -19
- /package/src/{_refactor/_prism.css → _prism.css} +0 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# `bricks[.css]
|
|
1
|
+
# `bricks`<sub><sup>`[.css|.njk|.liquid]`</sup></sub>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A graceful, semantic CSS extension for Pico or Tailwind, with Nunjucks/Liquid batteries included 🥷
|
|
4
4
|
|
|
5
5
|
<!--section:css-h2-->
|
|
6
6
|
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
|
|
6
|
+
<link rel="icon" href="{{ site.favicon | default: '/favicon.ico' }}">
|
|
6
7
|
<title>
|
|
7
8
|
{%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
|
|
8
9
|
{{- site.title -}}
|
|
9
10
|
</title>
|
|
10
|
-
<
|
|
11
|
+
<meta name="description" content="{{ site.description }}">
|
|
11
12
|
|
|
12
13
|
{%- for href in site.styles %}
|
|
13
14
|
<link rel="stylesheet" href="{{ href | relative_url }}">
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
|
6
|
+
<link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
|
|
6
7
|
<title>
|
|
7
8
|
{{- title | strip_html ~ ' | ' if title -}}
|
|
8
9
|
{{- site.title -}}
|
|
9
10
|
</title>
|
|
10
|
-
<
|
|
11
|
+
<meta name="description" content="{{ site.description }}" />
|
|
11
12
|
|
|
12
13
|
{%- for href in site.styles %}
|
|
13
14
|
<link rel="stylesheet" href="{{ href }}" />
|
|
@@ -6,4 +6,9 @@
|
|
|
6
6
|
</a>
|
|
7
7
|
{%- endfor %}
|
|
8
8
|
</nav>
|
|
9
|
-
|
|
9
|
+
|
|
10
|
+
{%- comment %}
|
|
11
|
+
Compatible with:
|
|
12
|
+
- https://picocss.com/docs/nav
|
|
13
|
+
- https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually
|
|
14
|
+
{%- endcomment %}
|
package/assets/breakout.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
|
-
.breakout
|
|
3
|
+
.breakout,
|
|
4
|
+
.breakout-all {
|
|
4
5
|
/* Prepare the container for breakout elements */
|
|
5
6
|
padding-inline: 10%;
|
|
6
7
|
max-width: calc(10% + 65ch + 10%);
|
|
@@ -11,8 +12,7 @@
|
|
|
11
12
|
table,
|
|
12
13
|
pre,
|
|
13
14
|
figure, video, iframe, canvas,
|
|
14
|
-
|
|
15
|
-
p > img, p > picture,
|
|
15
|
+
img, picture,
|
|
16
16
|
/* Custom utility classes for other tags that need to be broken out */
|
|
17
17
|
.breakout-item,
|
|
18
18
|
.breakout-item-max
|
|
@@ -25,12 +25,14 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
/* Respect img/picture min-width */
|
|
28
|
-
&:is(
|
|
28
|
+
&:is(img, picture) {
|
|
29
29
|
min-width: auto;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
/*
|
|
33
|
-
|
|
32
|
+
/* <!--section:responsive-table-without-wrapper-->
|
|
33
|
+
### Responsive tables without wrapper
|
|
34
|
+
```css */
|
|
35
|
+
&:is(table):not(.does-not-exist) {
|
|
34
36
|
/* Let them full-bleed */
|
|
35
37
|
width: max-content;
|
|
36
38
|
min-width: auto;
|
|
@@ -41,7 +43,16 @@
|
|
|
41
43
|
display: block;
|
|
42
44
|
overflow-x: auto;
|
|
43
45
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
46
|
+
|
|
47
|
+
th,
|
|
48
|
+
td {
|
|
49
|
+
padding-inline-start: 0;
|
|
50
|
+
}
|
|
44
51
|
}
|
|
52
|
+
/*```
|
|
53
|
+
#### Soft-increase selector specificity
|
|
54
|
+
`&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
55
|
+
<!--section--> */
|
|
45
56
|
|
|
46
57
|
/* Max out the width of the element */
|
|
47
58
|
&.breakout-item-max {
|
|
@@ -58,8 +69,8 @@
|
|
|
58
69
|
content: "";
|
|
59
70
|
display: block;
|
|
60
71
|
position: absolute;
|
|
61
|
-
background:
|
|
62
|
-
opacity:
|
|
72
|
+
background: gray;
|
|
73
|
+
opacity: 12.5%;
|
|
63
74
|
}
|
|
64
75
|
}
|
|
65
76
|
|
|
@@ -67,14 +78,15 @@
|
|
|
67
78
|
&::before {
|
|
68
79
|
width: 10em;
|
|
69
80
|
right: 100%;
|
|
70
|
-
margin-right:
|
|
81
|
+
margin-right: 0.8ch;
|
|
71
82
|
height: 0.25em;
|
|
72
83
|
top: 50%;
|
|
73
84
|
transform: translateY(-50%);
|
|
74
|
-
background: linear-gradient(to left,
|
|
85
|
+
background: linear-gradient(to left, gray, transparent);
|
|
75
86
|
}
|
|
76
87
|
|
|
77
|
-
|
|
88
|
+
/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
|
|
89
|
+
&:where(hr + *) {
|
|
78
90
|
&::before {
|
|
79
91
|
display: none !important;
|
|
80
92
|
}
|
package/assets/bricks.css
CHANGED
|
@@ -35,13 +35,27 @@ body {
|
|
|
35
35
|
pre {
|
|
36
36
|
padding: 1rem 1.5rem;
|
|
37
37
|
padding-inline-end: 2rem;
|
|
38
|
+
|
|
39
|
+
code {
|
|
40
|
+
padding: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media screen and (max-width: 767px) {
|
|
44
|
+
border-radius: 0;
|
|
45
|
+
}
|
|
38
46
|
}
|
|
39
47
|
|
|
40
|
-
|
|
48
|
+
small {
|
|
49
|
+
[role="button"] {
|
|
50
|
+
padding: 0.75em 1em;
|
|
51
|
+
font-size: inherit;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
41
54
|
|
|
42
55
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
43
56
|
|
|
44
|
-
.breakout
|
|
57
|
+
.breakout,
|
|
58
|
+
.breakout-all {
|
|
45
59
|
/* Prepare the container for breakout elements */
|
|
46
60
|
padding-inline: 10%;
|
|
47
61
|
max-width: calc(10% + 65ch + 10%);
|
|
@@ -52,8 +66,7 @@ pre {
|
|
|
52
66
|
table,
|
|
53
67
|
pre,
|
|
54
68
|
figure, video, iframe, canvas,
|
|
55
|
-
|
|
56
|
-
p > img, p > picture,
|
|
69
|
+
img, picture,
|
|
57
70
|
/* Custom utility classes for other tags that need to be broken out */
|
|
58
71
|
.breakout-item,
|
|
59
72
|
.breakout-item-max
|
|
@@ -66,12 +79,14 @@ pre {
|
|
|
66
79
|
}
|
|
67
80
|
|
|
68
81
|
/* Respect img/picture min-width */
|
|
69
|
-
&:is(
|
|
82
|
+
&:is(img, picture) {
|
|
70
83
|
min-width: auto;
|
|
71
84
|
}
|
|
72
85
|
|
|
73
|
-
/*
|
|
74
|
-
|
|
86
|
+
/* <!--section:responsive-table-without-wrapper-->
|
|
87
|
+
### Responsive tables without wrapper
|
|
88
|
+
```css */
|
|
89
|
+
&:is(table):not(.does-not-exist) {
|
|
75
90
|
/* Let them full-bleed */
|
|
76
91
|
width: max-content;
|
|
77
92
|
min-width: auto;
|
|
@@ -82,7 +97,16 @@ pre {
|
|
|
82
97
|
display: block;
|
|
83
98
|
overflow-x: auto;
|
|
84
99
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
100
|
+
|
|
101
|
+
th,
|
|
102
|
+
td {
|
|
103
|
+
padding-inline-start: 0;
|
|
104
|
+
}
|
|
85
105
|
}
|
|
106
|
+
/*```
|
|
107
|
+
#### Soft-increase selector specificity
|
|
108
|
+
`&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
109
|
+
<!--section--> */
|
|
86
110
|
|
|
87
111
|
/* Max out the width of the element */
|
|
88
112
|
&.breakout-item-max {
|
|
@@ -99,8 +123,8 @@ pre {
|
|
|
99
123
|
content: "";
|
|
100
124
|
display: block;
|
|
101
125
|
position: absolute;
|
|
102
|
-
background:
|
|
103
|
-
opacity:
|
|
126
|
+
background: gray;
|
|
127
|
+
opacity: 12.5%;
|
|
104
128
|
}
|
|
105
129
|
}
|
|
106
130
|
|
|
@@ -108,14 +132,15 @@ pre {
|
|
|
108
132
|
&::before {
|
|
109
133
|
width: 10em;
|
|
110
134
|
right: 100%;
|
|
111
|
-
margin-right:
|
|
135
|
+
margin-right: 0.8ch;
|
|
112
136
|
height: 0.25em;
|
|
113
137
|
top: 50%;
|
|
114
138
|
transform: translateY(-50%);
|
|
115
|
-
background: linear-gradient(to left,
|
|
139
|
+
background: linear-gradient(to left, gray, transparent);
|
|
116
140
|
}
|
|
117
141
|
|
|
118
|
-
|
|
142
|
+
/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
|
|
143
|
+
&:where(hr + *) {
|
|
119
144
|
&::before {
|
|
120
145
|
display: none !important;
|
|
121
146
|
}
|
|
@@ -135,20 +160,163 @@ pre {
|
|
|
135
160
|
}
|
|
136
161
|
}
|
|
137
162
|
|
|
138
|
-
/*
|
|
163
|
+
/* Prism.js */
|
|
139
164
|
|
|
140
|
-
|
|
165
|
+
.token.treeview-part {
|
|
166
|
+
.entry-line {
|
|
167
|
+
width: 2.5em !important;
|
|
168
|
+
opacity: 25%;
|
|
169
|
+
}
|
|
170
|
+
.entry-name:last-child {
|
|
171
|
+
opacity: 50%;
|
|
172
|
+
|
|
173
|
+
&::before {
|
|
174
|
+
display: none !important;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
table {
|
|
180
|
+
/* Workaround to widen particular columns @TODO: add to tricks-wiki */
|
|
181
|
+
th {
|
|
182
|
+
hr {
|
|
183
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
184
|
+
height: 0;
|
|
185
|
+
margin: 0;
|
|
186
|
+
visibility: hidden;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
141
190
|
|
|
142
191
|
table.borderless {
|
|
192
|
+
th,
|
|
143
193
|
td {
|
|
144
194
|
border: none;
|
|
145
195
|
}
|
|
146
196
|
}
|
|
147
197
|
|
|
198
|
+
/* Header anchors @TODO: add to tricks-wiki */
|
|
199
|
+
|
|
200
|
+
h1,
|
|
201
|
+
h2,
|
|
202
|
+
h3,
|
|
203
|
+
h4,
|
|
204
|
+
h5,
|
|
205
|
+
h6 {
|
|
206
|
+
position: relative;
|
|
207
|
+
|
|
208
|
+
[data-is-anchor] {
|
|
209
|
+
visibility: hidden;
|
|
210
|
+
position: absolute;
|
|
211
|
+
top: 0;
|
|
212
|
+
right: 100%;
|
|
213
|
+
padding-right: 0.2ch;
|
|
214
|
+
color: silver;
|
|
215
|
+
text-decoration: none;
|
|
216
|
+
}
|
|
217
|
+
&:hover {
|
|
218
|
+
[data-is-anchor] {
|
|
219
|
+
visibility: visible;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* Helper to handle icons in links */
|
|
225
|
+
|
|
226
|
+
a > i {
|
|
227
|
+
display: inline-block;
|
|
228
|
+
margin-inline-end: 0.375ch; /* =3/8 */
|
|
229
|
+
font-style: normal;
|
|
230
|
+
}
|
|
231
|
+
|
|
148
232
|
/* Favicons in links @TODO: add to tricks-wiki */
|
|
149
233
|
|
|
150
|
-
a
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
234
|
+
a[data-has-favicon] {
|
|
235
|
+
display: inline-block;
|
|
236
|
+
|
|
237
|
+
> img {
|
|
238
|
+
max-height: 1.25em;
|
|
239
|
+
margin-top: calc(-0.25em / 2);
|
|
240
|
+
margin-inline-end: 0.375ch; /* =3/8 */
|
|
241
|
+
|
|
242
|
+
/* for tw-typography (.prose) */
|
|
243
|
+
display: inline-block;
|
|
244
|
+
margin-bottom: 0;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
code[data-caption] {
|
|
249
|
+
&::before {
|
|
250
|
+
content: attr(data-caption);
|
|
251
|
+
display: block;
|
|
252
|
+
margin-bottom: 1rem;
|
|
253
|
+
opacity: 50%;
|
|
254
|
+
font-style: italic;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Tailwind tricks */
|
|
259
|
+
|
|
260
|
+
.invert {
|
|
261
|
+
/* Fix the scrollbar color when inverted */
|
|
262
|
+
::-webkit-scrollbar {
|
|
263
|
+
filter: invert(1) !important;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* Jump to top trick */
|
|
268
|
+
|
|
269
|
+
[data-jump-to="top"] {
|
|
270
|
+
position: fixed;
|
|
271
|
+
bottom: 0;
|
|
272
|
+
right: 0;
|
|
273
|
+
padding-top: 50vh;
|
|
274
|
+
opacity: 25%;
|
|
275
|
+
|
|
276
|
+
&:hover {
|
|
277
|
+
opacity: 75%;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Table of contents */
|
|
282
|
+
|
|
283
|
+
[data-is-toc] {
|
|
284
|
+
font-size: 87.5%;
|
|
285
|
+
|
|
286
|
+
a {
|
|
287
|
+
text-decoration: none;
|
|
288
|
+
}
|
|
289
|
+
> ul {
|
|
290
|
+
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
/* @TODO: to TRICKS */
|
|
295
|
+
|
|
296
|
+
.columns {
|
|
297
|
+
columns: 20ch auto; /* 3 cols max for 65ch container */
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* @TODO: to TRICKS */
|
|
301
|
+
|
|
302
|
+
ul,
|
|
303
|
+
ol {
|
|
304
|
+
li[data-marker]::marker {
|
|
305
|
+
content: attr(data-marker) " ";
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.faded {
|
|
310
|
+
opacity: 50%;
|
|
311
|
+
&:hover {
|
|
312
|
+
opacity: 87.5%;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
@media (prefers-color-scheme: dark) {
|
|
317
|
+
:root:not([data-theme="light"]) {
|
|
318
|
+
.dark-auto {
|
|
319
|
+
filter: invert(100%) hue-rotate(180deg);
|
|
320
|
+
}
|
|
321
|
+
}
|
|
154
322
|
}
|
package/assets/bricks.theme.css
CHANGED
|
@@ -1,23 +1,74 @@
|
|
|
1
|
+
a {
|
|
2
|
+
&:not([href^="#"]) {
|
|
3
|
+
text-decoration-thickness: 1px;
|
|
4
|
+
&:hover {
|
|
5
|
+
text-decoration-thickness: 2px;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
1
10
|
h1 {
|
|
2
|
-
font-size:
|
|
11
|
+
font-size: 2.5em; /* for pico.css & tw-typography */
|
|
12
|
+
margin-bottom: 1rem; /* for tw-typography */
|
|
3
13
|
}
|
|
4
14
|
|
|
5
15
|
hr {
|
|
6
|
-
margin-block:
|
|
16
|
+
margin-block: 2em; /* for pico.css & tw-typography */
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ul {
|
|
20
|
+
ul {
|
|
21
|
+
font-size: 87.5%;
|
|
22
|
+
}
|
|
7
23
|
}
|
|
8
24
|
|
|
9
25
|
pre {
|
|
10
26
|
small {
|
|
11
|
-
opacity:
|
|
27
|
+
opacity: 75%;
|
|
12
28
|
font-weight: lighter;
|
|
13
29
|
}
|
|
14
30
|
}
|
|
15
31
|
|
|
16
32
|
table {
|
|
17
33
|
th {
|
|
34
|
+
vertical-align: bottom;
|
|
18
35
|
font-weight: bold;
|
|
19
36
|
}
|
|
37
|
+
td {
|
|
38
|
+
vertical-align: top;
|
|
39
|
+
}
|
|
20
40
|
pre {
|
|
21
41
|
margin-bottom: 0.25rem;
|
|
22
42
|
}
|
|
23
43
|
}
|
|
44
|
+
|
|
45
|
+
[data-jump-to="top"] {
|
|
46
|
+
> i {
|
|
47
|
+
display: inline-block;
|
|
48
|
+
padding: 0.25rem;
|
|
49
|
+
margin: 0.5rem;
|
|
50
|
+
font-size: 0.75rem;
|
|
51
|
+
color: black;
|
|
52
|
+
border-color: black;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-is-toc] {
|
|
57
|
+
> ul > * > a {
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.breakout,
|
|
63
|
+
.breakout-all {
|
|
64
|
+
> img,
|
|
65
|
+
> figure {
|
|
66
|
+
margin-bottom: 1rem;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.faded {
|
|
71
|
+
a {
|
|
72
|
+
text-decoration-style: dotted;
|
|
73
|
+
}
|
|
74
|
+
}
|
package/bricks.gemspec
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |spec|
|
|
4
4
|
spec.name = "bricks"
|
|
5
|
-
spec.version = "0.
|
|
5
|
+
spec.version = "0.27.0-alpha.10"
|
|
6
6
|
spec.authors = ["Anton Staroverov"]
|
|
7
7
|
|
|
8
8
|
spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development."
|
package/package.json
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/bricks",
|
|
3
|
-
"version": "0.27.0-alpha",
|
|
3
|
+
"version": "0.27.0-alpha.10",
|
|
4
4
|
"description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
|
|
5
5
|
"style": "./src/bricks.css",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./src/bricks.css",
|
|
8
|
+
"./theme": "./src/bricks.theme.css",
|
|
9
|
+
"./unreduce-motion": "./src/_unreduce-motion.css",
|
|
8
10
|
"./dist": "./dist/bricks.css"
|
|
9
11
|
},
|
|
10
12
|
"scripts": {
|
package/src/_classless.css
CHANGED
|
@@ -30,4 +30,19 @@ body {
|
|
|
30
30
|
pre {
|
|
31
31
|
padding: 1rem 1.5rem;
|
|
32
32
|
padding-inline-end: 2rem;
|
|
33
|
+
|
|
34
|
+
code {
|
|
35
|
+
padding: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@media screen and (max-width: 767px) {
|
|
39
|
+
border-radius: 0;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
small {
|
|
44
|
+
[role="button"] {
|
|
45
|
+
padding: 0.75em 1em;
|
|
46
|
+
font-size: inherit;
|
|
47
|
+
}
|
|
33
48
|
}
|
package/src/_tricks.css
CHANGED
|
@@ -1,12 +1,136 @@
|
|
|
1
|
+
table {
|
|
2
|
+
/* Workaround to widen particular columns @TODO: add to tricks-wiki */
|
|
3
|
+
th {
|
|
4
|
+
hr {
|
|
5
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
6
|
+
height: 0;
|
|
7
|
+
margin: 0;
|
|
8
|
+
visibility: hidden;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
1
13
|
table.borderless {
|
|
14
|
+
th,
|
|
2
15
|
td {
|
|
3
16
|
border: none;
|
|
4
17
|
}
|
|
5
18
|
}
|
|
6
19
|
|
|
20
|
+
/* Header anchors @TODO: add to tricks-wiki */
|
|
21
|
+
h1,
|
|
22
|
+
h2,
|
|
23
|
+
h3,
|
|
24
|
+
h4,
|
|
25
|
+
h5,
|
|
26
|
+
h6 {
|
|
27
|
+
position: relative;
|
|
28
|
+
|
|
29
|
+
[data-is-anchor] {
|
|
30
|
+
visibility: hidden;
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 0;
|
|
33
|
+
right: 100%;
|
|
34
|
+
padding-right: 0.2ch;
|
|
35
|
+
color: silver;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
}
|
|
38
|
+
&:hover {
|
|
39
|
+
[data-is-anchor] {
|
|
40
|
+
visibility: visible;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Helper to handle icons in links */
|
|
46
|
+
a > i {
|
|
47
|
+
display: inline-block;
|
|
48
|
+
margin-inline-end: 0.375ch; /* =3/8 */
|
|
49
|
+
font-style: normal;
|
|
50
|
+
}
|
|
51
|
+
|
|
7
52
|
/* Favicons in links @TODO: add to tricks-wiki */
|
|
8
|
-
a
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
53
|
+
a[data-has-favicon] {
|
|
54
|
+
display: inline-block;
|
|
55
|
+
|
|
56
|
+
> img {
|
|
57
|
+
max-height: 1.25em;
|
|
58
|
+
margin-top: calc(-0.25em / 2);
|
|
59
|
+
margin-inline-end: 0.375ch; /* =3/8 */
|
|
60
|
+
|
|
61
|
+
/* for tw-typography (.prose) */
|
|
62
|
+
display: inline-block;
|
|
63
|
+
margin-bottom: 0;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
code[data-caption] {
|
|
68
|
+
&::before {
|
|
69
|
+
content: attr(data-caption);
|
|
70
|
+
display: block;
|
|
71
|
+
margin-bottom: 1rem;
|
|
72
|
+
opacity: 50%;
|
|
73
|
+
font-style: italic;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Tailwind tricks */
|
|
78
|
+
.invert {
|
|
79
|
+
/* Fix the scrollbar color when inverted */
|
|
80
|
+
::-webkit-scrollbar {
|
|
81
|
+
filter: invert(1) !important;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Jump to top trick */
|
|
86
|
+
[data-jump-to="top"] {
|
|
87
|
+
position: fixed;
|
|
88
|
+
bottom: 0;
|
|
89
|
+
right: 0;
|
|
90
|
+
padding-top: 50vh;
|
|
91
|
+
opacity: 25%;
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
opacity: 75%;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Table of contents */
|
|
99
|
+
[data-is-toc] {
|
|
100
|
+
font-size: 87.5%;
|
|
101
|
+
|
|
102
|
+
a {
|
|
103
|
+
text-decoration: none;
|
|
104
|
+
}
|
|
105
|
+
> ul {
|
|
106
|
+
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* @TODO: to TRICKS */
|
|
111
|
+
.columns {
|
|
112
|
+
columns: 20ch auto; /* 3 cols max for 65ch container */
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* @TODO: to TRICKS */
|
|
116
|
+
ul,
|
|
117
|
+
ol {
|
|
118
|
+
li[data-marker]::marker {
|
|
119
|
+
content: attr(data-marker) " ";
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.faded {
|
|
124
|
+
opacity: 50%;
|
|
125
|
+
&:hover {
|
|
126
|
+
opacity: 87.5%;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
@media (prefers-color-scheme: dark) {
|
|
131
|
+
:root:not([data-theme="light"]) {
|
|
132
|
+
.dark-auto {
|
|
133
|
+
filter: invert(100%) hue-rotate(180deg);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
12
136
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/* @TODO: tricks-wiki */
|
|
2
|
+
@utility unreduce-animation-* {
|
|
3
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4
|
+
&:not([aria-busy="true"]) {
|
|
5
|
+
animation-duration: --value([ *]) !important;
|
|
6
|
+
animation-delay: 0 !important;
|
|
7
|
+
animation-iteration-count: infinite !important;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss */
|
package/src/breakout.css
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
2
|
|
|
3
|
-
.breakout
|
|
3
|
+
.breakout,
|
|
4
|
+
.breakout-all {
|
|
4
5
|
/* Prepare the container for breakout elements */
|
|
5
6
|
padding-inline: 10%;
|
|
6
7
|
max-width: calc(10% + 65ch + 10%);
|
|
@@ -11,8 +12,7 @@
|
|
|
11
12
|
table,
|
|
12
13
|
pre,
|
|
13
14
|
figure, video, iframe, canvas,
|
|
14
|
-
|
|
15
|
-
p > img, p > picture,
|
|
15
|
+
img, picture,
|
|
16
16
|
/* Custom utility classes for other tags that need to be broken out */
|
|
17
17
|
.breakout-item,
|
|
18
18
|
.breakout-item-max
|
|
@@ -25,12 +25,14 @@
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
/* Respect img/picture min-width */
|
|
28
|
-
&:is(
|
|
28
|
+
&:is(img, picture) {
|
|
29
29
|
min-width: auto;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
/*
|
|
33
|
-
|
|
32
|
+
/* <!--section:responsive-table-without-wrapper-->
|
|
33
|
+
### Responsive tables without wrapper
|
|
34
|
+
```css */
|
|
35
|
+
&:is(table):not(.does-not-exist) {
|
|
34
36
|
/* Let them full-bleed */
|
|
35
37
|
width: max-content;
|
|
36
38
|
min-width: auto;
|
|
@@ -41,7 +43,16 @@
|
|
|
41
43
|
display: block;
|
|
42
44
|
overflow-x: auto;
|
|
43
45
|
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
46
|
+
|
|
47
|
+
th,
|
|
48
|
+
td {
|
|
49
|
+
padding-inline-start: 0;
|
|
50
|
+
}
|
|
44
51
|
}
|
|
52
|
+
/*```
|
|
53
|
+
#### Soft-increase selector specificity
|
|
54
|
+
`&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
55
|
+
<!--section--> */
|
|
45
56
|
|
|
46
57
|
/* Max out the width of the element */
|
|
47
58
|
&.breakout-item-max {
|
|
@@ -58,8 +69,8 @@
|
|
|
58
69
|
content: "";
|
|
59
70
|
display: block;
|
|
60
71
|
position: absolute;
|
|
61
|
-
background:
|
|
62
|
-
opacity:
|
|
72
|
+
background: gray;
|
|
73
|
+
opacity: 12.5%;
|
|
63
74
|
}
|
|
64
75
|
}
|
|
65
76
|
|
|
@@ -67,14 +78,15 @@
|
|
|
67
78
|
&::before {
|
|
68
79
|
width: 10em;
|
|
69
80
|
right: 100%;
|
|
70
|
-
margin-right:
|
|
81
|
+
margin-right: 0.8ch;
|
|
71
82
|
height: 0.25em;
|
|
72
83
|
top: 50%;
|
|
73
84
|
transform: translateY(-50%);
|
|
74
|
-
background: linear-gradient(to left,
|
|
85
|
+
background: linear-gradient(to left, gray, transparent);
|
|
75
86
|
}
|
|
76
87
|
|
|
77
|
-
|
|
88
|
+
/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
|
|
89
|
+
&:where(hr + *) {
|
|
78
90
|
&::before {
|
|
79
91
|
display: none !important;
|
|
80
92
|
}
|
package/src/bricks.css
CHANGED
package/src/bricks.theme.css
CHANGED
|
@@ -1,23 +1,74 @@
|
|
|
1
|
+
a {
|
|
2
|
+
&:not([href^="#"]) {
|
|
3
|
+
text-decoration-thickness: 1px;
|
|
4
|
+
&:hover {
|
|
5
|
+
text-decoration-thickness: 2px;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
1
10
|
h1 {
|
|
2
|
-
font-size:
|
|
11
|
+
font-size: 2.5em; /* for pico.css & tw-typography */
|
|
12
|
+
margin-bottom: 1rem; /* for tw-typography */
|
|
3
13
|
}
|
|
4
14
|
|
|
5
15
|
hr {
|
|
6
|
-
margin-block:
|
|
16
|
+
margin-block: 2em; /* for pico.css & tw-typography */
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
ul {
|
|
20
|
+
ul {
|
|
21
|
+
font-size: 87.5%;
|
|
22
|
+
}
|
|
7
23
|
}
|
|
8
24
|
|
|
9
25
|
pre {
|
|
10
26
|
small {
|
|
11
|
-
opacity:
|
|
27
|
+
opacity: 75%;
|
|
12
28
|
font-weight: lighter;
|
|
13
29
|
}
|
|
14
30
|
}
|
|
15
31
|
|
|
16
32
|
table {
|
|
17
33
|
th {
|
|
34
|
+
vertical-align: bottom;
|
|
18
35
|
font-weight: bold;
|
|
19
36
|
}
|
|
37
|
+
td {
|
|
38
|
+
vertical-align: top;
|
|
39
|
+
}
|
|
20
40
|
pre {
|
|
21
41
|
margin-bottom: 0.25rem;
|
|
22
42
|
}
|
|
23
43
|
}
|
|
44
|
+
|
|
45
|
+
[data-jump-to="top"] {
|
|
46
|
+
> i {
|
|
47
|
+
display: inline-block;
|
|
48
|
+
padding: 0.25rem;
|
|
49
|
+
margin: 0.5rem;
|
|
50
|
+
font-size: 0.75rem;
|
|
51
|
+
color: black;
|
|
52
|
+
border-color: black;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-is-toc] {
|
|
57
|
+
> ul > * > a {
|
|
58
|
+
font-weight: 500;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.breakout,
|
|
63
|
+
.breakout-all {
|
|
64
|
+
> img,
|
|
65
|
+
> figure {
|
|
66
|
+
margin-bottom: 1rem;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.faded {
|
|
71
|
+
a {
|
|
72
|
+
text-decoration-style: dotted;
|
|
73
|
+
}
|
|
74
|
+
}
|
package/src/_refactor/_prose.css
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
.prose {
|
|
2
|
-
/* Container-like behavior with auto margins */
|
|
3
|
-
width: 100%;
|
|
4
|
-
margin-inline: auto;
|
|
5
|
-
|
|
6
|
-
/* Helper for multi-line subtitles */
|
|
7
|
-
sub {
|
|
8
|
-
vertical-align: top;
|
|
9
|
-
bottom: -0.05em;
|
|
10
|
-
line-height: 1.1;
|
|
11
|
-
font-weight: 300;
|
|
12
|
-
/* Workaround to prevent underline inside links */
|
|
13
|
-
display: inline-block;
|
|
14
|
-
width: 100%;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
a {
|
|
18
|
-
text-underline-offset: 0.1em;
|
|
19
|
-
text-decoration-thickness: 1px;
|
|
20
|
-
/* Don't underline links that point to anchors */
|
|
21
|
-
&[href^="#"] {
|
|
22
|
-
text-decoration: none;
|
|
23
|
-
}
|
|
24
|
-
&:hover {
|
|
25
|
-
text-decoration-thickness: 2px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Helper to insert icons in links */
|
|
29
|
-
i {
|
|
30
|
-
height: 1em;
|
|
31
|
-
margin-right: 0.25em;
|
|
32
|
-
font-style: normal;
|
|
33
|
-
/* Workaround to prevent underline */
|
|
34
|
-
display: inline-block;
|
|
35
|
-
|
|
36
|
-
img {
|
|
37
|
-
height: 100%;
|
|
38
|
-
margin: 0;
|
|
39
|
-
position: relative;
|
|
40
|
-
bottom: -0.15em;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
img {
|
|
46
|
-
&:not(:where(.prose > img, .prose > p > img)) {
|
|
47
|
-
margin-top: 0;
|
|
48
|
-
margin-bottom: 1em;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* Support for markdown anchors */
|
|
53
|
-
h1,
|
|
54
|
-
h2,
|
|
55
|
-
h3,
|
|
56
|
-
h4,
|
|
57
|
-
h5,
|
|
58
|
-
h6 {
|
|
59
|
-
position: relative;
|
|
60
|
-
|
|
61
|
-
.header-anchor {
|
|
62
|
-
display: none;
|
|
63
|
-
position: absolute;
|
|
64
|
-
right: 100%;
|
|
65
|
-
top: 0;
|
|
66
|
-
padding-right: 0.2ch;
|
|
67
|
-
color: rgba(0, 0, 0, 0.25);
|
|
68
|
-
}
|
|
69
|
-
&:hover {
|
|
70
|
-
.header-anchor {
|
|
71
|
-
display: block;
|
|
72
|
-
}
|
|
73
|
-
/* Support for `breakout-css` headings */
|
|
74
|
-
&::before {
|
|
75
|
-
margin-right: 1.5ch !important;
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
h1 {
|
|
80
|
-
margin-bottom: 0.5em !important;
|
|
81
|
-
|
|
82
|
-
sub {
|
|
83
|
-
font-size: 50%;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
th,
|
|
88
|
-
td {
|
|
89
|
-
/* Keep extra space on the right for better horizontal scroll on mobile */
|
|
90
|
-
padding: 1rem 2rem 1rem 0;
|
|
91
|
-
vertical-align: top;
|
|
92
|
-
/* Workaround to widen particular columns */
|
|
93
|
-
hr {
|
|
94
|
-
width: 12ch;
|
|
95
|
-
height: 0;
|
|
96
|
-
margin: 0;
|
|
97
|
-
visibility: hidden;
|
|
98
|
-
/* &.ch16 {
|
|
99
|
-
width: 16ch;
|
|
100
|
-
} */
|
|
101
|
-
}
|
|
102
|
-
/* Workaround for headings in Markdown tables */
|
|
103
|
-
big {
|
|
104
|
-
font-weight: bold;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
th {
|
|
108
|
-
vertical-align: bottom;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
blockquote {
|
|
112
|
-
font-weight: 300;
|
|
113
|
-
|
|
114
|
-
+ figcaption {
|
|
115
|
-
margin-top: -1em;
|
|
116
|
-
text-align: right;
|
|
117
|
-
font-style: italic;
|
|
118
|
-
font-weight: 300;
|
|
119
|
-
|
|
120
|
-
&::before {
|
|
121
|
-
content: "—";
|
|
122
|
-
margin-right: 0.25em;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
code[data-caption] {
|
|
128
|
-
&::before {
|
|
129
|
-
content: attr(data-caption);
|
|
130
|
-
display: block;
|
|
131
|
-
margin-bottom: 1.5em;
|
|
132
|
-
opacity: 0.5;
|
|
133
|
-
font-style: italic;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
package/src/_refactor/_util.css
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/* Utility classes and fixes */
|
|
2
|
-
|
|
3
|
-
.invert {
|
|
4
|
-
/* Fix the scrollbar color when inverted */
|
|
5
|
-
::-webkit-scrollbar {
|
|
6
|
-
filter: invert(1) !important;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/* Workaround for icon to stay with text in links */
|
|
11
|
-
a.whitespace-nowrap {
|
|
12
|
-
white-space: nowrap;
|
|
13
|
-
/* Fix for Safari :( why Safari, why? */
|
|
14
|
-
display: inline-block;
|
|
15
|
-
|
|
16
|
-
span {
|
|
17
|
-
white-space: normal;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
File without changes
|