@welcome-home/wh-base 0.3.4 → 0.3.5
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/.turbo/turbo-build.log +5 -10
- package/CHANGELOG.md +7 -0
- package/dist/css/wh-base.css +590 -0
- package/package.json +6 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
.
|
|
5
|
-
|
|
6
|
-
. [96mbuild:css:dev[39m$ postcss src/css/main.css -o dist/css/pandabear.css --no-map
|
|
7
|
-
[95m└─[39m [95mRunning...[39m
|
|
8
|
-
[1A[95m└─[39m [95mDone in 417ms[39m
|
|
9
|
-
[3A[95m└─[39m [95mDone in 649ms[39m
|
|
10
|
-
[2B
|
|
1
|
+
$ pnpm run '/^build:css:.*/'
|
|
2
|
+
. build:css:prod$ postcss src/css/wh-base.css -o dist/css/wh-base.min.css --env production --no-map
|
|
3
|
+
. build:css:dev$ postcss src/css/wh-base.css -o dist/css/wh-base.css --no-map
|
|
4
|
+
. build:css:dev: Done
|
|
5
|
+
. build:css:prod: Done
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,590 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
@layer base-config, user-config;
|
|
4
|
+
/*
|
|
5
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
6
|
+
*
|
|
7
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
11
|
+
*
|
|
12
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
13
|
+
*/
|
|
14
|
+
/* 1. Use a more-intuitive box-sizing model */
|
|
15
|
+
*,
|
|
16
|
+
*::before,
|
|
17
|
+
*::after {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
/* 2. Remove default margin */
|
|
21
|
+
*:not(dialog) {
|
|
22
|
+
margin: 0;
|
|
23
|
+
}
|
|
24
|
+
/* 3. Enable keyword animations */
|
|
25
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
26
|
+
html {
|
|
27
|
+
interpolate-size: allow-keywords;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
body {
|
|
31
|
+
/* 4. Increase line-height */
|
|
32
|
+
line-height: 1.5;
|
|
33
|
+
/* 5. Improve text rendering */
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
}
|
|
36
|
+
/* 6. Improve media defaults */
|
|
37
|
+
img,
|
|
38
|
+
picture,
|
|
39
|
+
video,
|
|
40
|
+
canvas,
|
|
41
|
+
svg {
|
|
42
|
+
display: block;
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
}
|
|
45
|
+
/* 7. Inherit fonts for form controls */
|
|
46
|
+
input,
|
|
47
|
+
button,
|
|
48
|
+
textarea,
|
|
49
|
+
select {
|
|
50
|
+
font: inherit;
|
|
51
|
+
}
|
|
52
|
+
/* 8. Avoid text overflows */
|
|
53
|
+
p,
|
|
54
|
+
h1,
|
|
55
|
+
h2,
|
|
56
|
+
h3,
|
|
57
|
+
h4,
|
|
58
|
+
h5,
|
|
59
|
+
h6 {
|
|
60
|
+
overflow-wrap: break-word;
|
|
61
|
+
}
|
|
62
|
+
/* 9. Improve line wrapping */
|
|
63
|
+
p {
|
|
64
|
+
text-wrap: pretty;
|
|
65
|
+
}
|
|
66
|
+
h1,
|
|
67
|
+
h2,
|
|
68
|
+
h3,
|
|
69
|
+
h4,
|
|
70
|
+
h5,
|
|
71
|
+
h6 {
|
|
72
|
+
text-wrap: balance;
|
|
73
|
+
}
|
|
74
|
+
/*
|
|
75
|
+
10. Create a root stacking context
|
|
76
|
+
*/
|
|
77
|
+
#root,
|
|
78
|
+
#__next {
|
|
79
|
+
isolation: isolate;
|
|
80
|
+
}
|
|
81
|
+
/*
|
|
82
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
83
|
+
*
|
|
84
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
85
|
+
*/
|
|
86
|
+
@layer base-config {
|
|
87
|
+
:root,
|
|
88
|
+
:host {
|
|
89
|
+
--untoast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Upvote</title><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
|
|
90
|
+
--toast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Already upvoted</title><path d="m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6"/></svg>');
|
|
91
|
+
--body-line-height: clamp(1.544rem, 0.831vw + 1.346rem, 2.344rem);
|
|
92
|
+
|
|
93
|
+
/* 15px at 320px viewport */
|
|
94
|
+
/* 20px at 1920px viewport */
|
|
95
|
+
--font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem);
|
|
96
|
+
|
|
97
|
+
/* stylelint-disable-next-line value-keyword-case */
|
|
98
|
+
--font-family-base:
|
|
99
|
+
optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
|
|
100
|
+
--font-weight-base: 400;
|
|
101
|
+
|
|
102
|
+
--font-family-title: var(--font-family-base);
|
|
103
|
+
--font-family-heading: var(--font-family-base);
|
|
104
|
+
--font-weight-heading: 500;
|
|
105
|
+
|
|
106
|
+
--font-weight-title: 600;
|
|
107
|
+
|
|
108
|
+
--font-family-code:
|
|
109
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
110
|
+
'DejaVu Sans Mono', monospace;
|
|
111
|
+
|
|
112
|
+
--body-width: min(800px, calc(70% + 100px));
|
|
113
|
+
|
|
114
|
+
--nav-margin: 4vh;
|
|
115
|
+
|
|
116
|
+
/* Internal variables. Do not use */
|
|
117
|
+
--iwh-font-weight-title: calc(
|
|
118
|
+
var(--font-weight-title) -
|
|
119
|
+
var(--dark-lightening-factor)
|
|
120
|
+
);
|
|
121
|
+
--iwh-font-weight-heading: calc(
|
|
122
|
+
var(--font-weight-heading) -
|
|
123
|
+
var(--dark-lightening-factor)
|
|
124
|
+
);
|
|
125
|
+
--iwh-font-weight-base: calc(
|
|
126
|
+
var(--font-weight-base) -
|
|
127
|
+
var(--dark-lightening-factor)
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media (prefers-color-scheme: dark) {
|
|
132
|
+
:root,
|
|
133
|
+
:host {
|
|
134
|
+
--csstools-color-scheme--light: ;
|
|
135
|
+
color-scheme: dark;
|
|
136
|
+
|
|
137
|
+
/** Catppuccin blue */
|
|
138
|
+
--color-primary: hsl(217deg 92% 76%);
|
|
139
|
+
--color-hover: lch(from var(--color-primary) calc(l + 20) c h);
|
|
140
|
+
--color-visited: lch(from var(--color-primary) l calc(c + 10) h);
|
|
141
|
+
|
|
142
|
+
/** Catppuccin surface 0 */
|
|
143
|
+
--color-bg-alt: hsl(237deg 16% 23%);
|
|
144
|
+
|
|
145
|
+
/** Catppuccin base */
|
|
146
|
+
--color-bg: rgb(30, 30, 46);
|
|
147
|
+
|
|
148
|
+
/* Catppuccin text */
|
|
149
|
+
--color-text: hsl(226deg 64% 88%);
|
|
150
|
+
|
|
151
|
+
/** Catppuccin Rosewater */
|
|
152
|
+
--color-secondary: hsl(267deg 84% 81%);
|
|
153
|
+
--color-headline: var(--color-text);
|
|
154
|
+
--color-h1: var(--color-text);
|
|
155
|
+
|
|
156
|
+
/* Catppuccin subtext 1 */
|
|
157
|
+
--color-h2: hsl(227deg 35% 80%);
|
|
158
|
+
--color-h3: var(--color-h2);
|
|
159
|
+
--color-h4: var(--color-h2);
|
|
160
|
+
|
|
161
|
+
/* Catppuccin subtext 0 */
|
|
162
|
+
--color-h5: hsl(228deg 24% 72%);
|
|
163
|
+
--color-h6: var(--color-h5);
|
|
164
|
+
|
|
165
|
+
--button-color-bg: var(--color-bg-alt);
|
|
166
|
+
|
|
167
|
+
/* Color of <code> blocks. Catppuccin green */
|
|
168
|
+
--color-code: hsl(115deg, 54%, 76%);
|
|
169
|
+
|
|
170
|
+
/* Catppuccin surface 1 */
|
|
171
|
+
--button-color-hover-bg: hsl(234deg, 13%, 31%);
|
|
172
|
+
|
|
173
|
+
--dark-lightening-factor: 50;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@media (prefers-color-scheme: light) {
|
|
178
|
+
:root,
|
|
179
|
+
:host {
|
|
180
|
+
--csstools-color-scheme--light: ;
|
|
181
|
+
color-scheme: dark;
|
|
182
|
+
|
|
183
|
+
/** Catppuccin blue */
|
|
184
|
+
--color-primary: hsl(220deg 91% 54%);
|
|
185
|
+
--color-hover: lch(from var(--color-primary) calc(l + 20) c h);
|
|
186
|
+
--color-visited: lch(from var(--color-primary) l calc(c + 10) h);
|
|
187
|
+
|
|
188
|
+
/** Catppuccin surface 0 */
|
|
189
|
+
--color-bg-alt: hsl(223deg 16% 83%);
|
|
190
|
+
|
|
191
|
+
/** Catppuccin crust */
|
|
192
|
+
--color-bg: rgb(239, 241, 245);
|
|
193
|
+
|
|
194
|
+
/* Catppuccin text */
|
|
195
|
+
--color-text: hsl(234deg 16% 35%);
|
|
196
|
+
|
|
197
|
+
/** Catppuccin Rosewater */
|
|
198
|
+
--color-secondary: hsl(266deg 85% 58%);
|
|
199
|
+
--color-headline: var(--color-text);
|
|
200
|
+
--color-h1: var(--color-text);
|
|
201
|
+
|
|
202
|
+
/* Catppuccin subtext 1 */
|
|
203
|
+
--color-h2: hsl(233deg 13% 41%);
|
|
204
|
+
--color-h3: var(--color-h2);
|
|
205
|
+
--color-h4: var(--color-h2);
|
|
206
|
+
|
|
207
|
+
/* Catppuccin subtext 0 */
|
|
208
|
+
--color-h5: hsl(233deg 10% 47%);
|
|
209
|
+
--color-h6: var(--color-h5);
|
|
210
|
+
|
|
211
|
+
--button-color-bg: var(--color-bg-alt);
|
|
212
|
+
|
|
213
|
+
/* Color of <code> blocks. Catppuccin green */
|
|
214
|
+
--color-code: hsl(109deg, 58%, 40%);
|
|
215
|
+
|
|
216
|
+
/* Catppuccin surface 1 */
|
|
217
|
+
--button-color-hover-bg: hsl(225deg, 14%, 77%);
|
|
218
|
+
|
|
219
|
+
--dark-lightening-factor: 0;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
/*
|
|
224
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
225
|
+
*
|
|
226
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
227
|
+
*/
|
|
228
|
+
nav {
|
|
229
|
+
p {
|
|
230
|
+
margin-bottom: var(--nav-margin);
|
|
231
|
+
font-size: clamp(1.25rem, 0.7794rem + 2.3529vw, 2.25rem);
|
|
232
|
+
|
|
233
|
+
a {
|
|
234
|
+
padding-right: 0.3em;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
.title h1 {
|
|
239
|
+
margin-bottom: 0;
|
|
240
|
+
}
|
|
241
|
+
/*
|
|
242
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
243
|
+
*
|
|
244
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
245
|
+
*/
|
|
246
|
+
/* Margin to separate the date from the post title a little bit */
|
|
247
|
+
li[data-tags] i {
|
|
248
|
+
margin-right: 0.3em;
|
|
249
|
+
}
|
|
250
|
+
/*
|
|
251
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
252
|
+
*
|
|
253
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
254
|
+
*/
|
|
255
|
+
/* biome-ignore-all lint/complexity/noImportantStyles: important is important */
|
|
256
|
+
button.upvote-button {
|
|
257
|
+
--width: 2em;
|
|
258
|
+
--height: 2em;
|
|
259
|
+
|
|
260
|
+
margin-bottom: 2em;
|
|
261
|
+
|
|
262
|
+
background-color: var(--color-bg-alt);
|
|
263
|
+
border: solid 1px var(--color-primary);
|
|
264
|
+
border-radius: 5px;
|
|
265
|
+
padding-top: 10px;
|
|
266
|
+
padding-left: 10px;
|
|
267
|
+
padding-right: 10px;
|
|
268
|
+
|
|
269
|
+
svg {
|
|
270
|
+
display: none;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.upvote-count {
|
|
274
|
+
color: var(--color-text);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/* when your post is untoasted */
|
|
278
|
+
.upvote-count::before {
|
|
279
|
+
background: var(--untoast-icon);
|
|
280
|
+
display: block;
|
|
281
|
+
width: var(--width);
|
|
282
|
+
height: var(--height);
|
|
283
|
+
background-size: cover;
|
|
284
|
+
content: '';
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
button:disabled.upvote-button .upvote-count::before {
|
|
288
|
+
background: var(--toast-icon);
|
|
289
|
+
display: block;
|
|
290
|
+
width: var(--width);
|
|
291
|
+
height: var(--height);
|
|
292
|
+
background-size: cover;
|
|
293
|
+
content: '';
|
|
294
|
+
}
|
|
295
|
+
button:not([disabled]).upvote-button {
|
|
296
|
+
&:hover {
|
|
297
|
+
background-color: color-mix(in srgb, var(--color-bg-alt) 90%, white);
|
|
298
|
+
cursor: pointer;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
/*
|
|
302
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
303
|
+
*
|
|
304
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
305
|
+
*/
|
|
306
|
+
pre {
|
|
307
|
+
background-color: var(--color-bg-alt);
|
|
308
|
+
display: block;
|
|
309
|
+
padding: 1em;
|
|
310
|
+
overflow-x: auto;
|
|
311
|
+
margin-top: 0;
|
|
312
|
+
margin-bottom: 2.5rem;
|
|
313
|
+
font-size: 0.9em;
|
|
314
|
+
}
|
|
315
|
+
/** The default highlight.css blue isn't good in dark mode */
|
|
316
|
+
.highlight {
|
|
317
|
+
pre span {
|
|
318
|
+
font-family: var(--font-family-code);
|
|
319
|
+
|
|
320
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
321
|
+
font-weight: 400 !important;
|
|
322
|
+
line-height: var(--body-line-height);
|
|
323
|
+
font-size: var(--font-size);
|
|
324
|
+
|
|
325
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
326
|
+
font-style: normal !important;
|
|
327
|
+
|
|
328
|
+
&.nt,
|
|
329
|
+
&.nf,
|
|
330
|
+
&.nb,
|
|
331
|
+
&.nd {
|
|
332
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
333
|
+
color: var(--color-primary) !important;
|
|
334
|
+
}
|
|
335
|
+
&.k,
|
|
336
|
+
&.kt {
|
|
337
|
+
color: var(--color-code);
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
code {
|
|
342
|
+
font-family: var(--font-family-code);
|
|
343
|
+
line-height: var(--body-line-height);
|
|
344
|
+
}
|
|
345
|
+
code,
|
|
346
|
+
kbd,
|
|
347
|
+
samp {
|
|
348
|
+
color: var(--color-code);
|
|
349
|
+
hyphens: none;
|
|
350
|
+
}
|
|
351
|
+
pre > code {
|
|
352
|
+
padding: 0;
|
|
353
|
+
background-color: transparent;
|
|
354
|
+
white-space: pre;
|
|
355
|
+
}
|
|
356
|
+
a:has(code) {
|
|
357
|
+
text-decoration-color: var(--color-code);
|
|
358
|
+
}
|
|
359
|
+
/*
|
|
360
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
361
|
+
*
|
|
362
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
363
|
+
*/
|
|
364
|
+
div.tags {
|
|
365
|
+
margin-bottom: 0.7rem;
|
|
366
|
+
|
|
367
|
+
a {
|
|
368
|
+
margin-right: 5px;
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
section.footnotes {
|
|
372
|
+
&:before {
|
|
373
|
+
content: 'Footnotes';
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
ol {
|
|
377
|
+
margin-top: 1.2rem;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
border-top: solid thin var(--color-secondary);
|
|
381
|
+
padding-top: 10px;
|
|
382
|
+
}
|
|
383
|
+
html {
|
|
384
|
+
font-family: var(--font-family-base);
|
|
385
|
+
}
|
|
386
|
+
body {
|
|
387
|
+
line-height: var(--body-line-height);
|
|
388
|
+
margin: auto;
|
|
389
|
+
color: var(--color-text);
|
|
390
|
+
background-color: var(--color-bg);
|
|
391
|
+
padding: 13px;
|
|
392
|
+
font-size: var(--font-size);
|
|
393
|
+
font-weight: var(--iwh-font-weight-base);
|
|
394
|
+
width: var(--body-width);
|
|
395
|
+
text-wrap: pretty;
|
|
396
|
+
hyphens: auto;
|
|
397
|
+
}
|
|
398
|
+
main h1:first-of-type {
|
|
399
|
+
border-top: solid thin var(--color-secondary);
|
|
400
|
+
margin-bottom: 1rem;
|
|
401
|
+
padding-top: 1rem;
|
|
402
|
+
}
|
|
403
|
+
h1,
|
|
404
|
+
h2,
|
|
405
|
+
h3,
|
|
406
|
+
h4,
|
|
407
|
+
h5,
|
|
408
|
+
h6 {
|
|
409
|
+
font-family: var(--font-family-heading);
|
|
410
|
+
font-weight: var(--iwh-font-weight-heading);
|
|
411
|
+
margin-top: 2rem;
|
|
412
|
+
margin-bottom: 1.5rem;
|
|
413
|
+
overflow-wrap: break-word;
|
|
414
|
+
text-wrap: pretty;
|
|
415
|
+
line-height: 1.1;
|
|
416
|
+
}
|
|
417
|
+
a {
|
|
418
|
+
-webkit-text-decoration: underline;
|
|
419
|
+
text-decoration: underline;
|
|
420
|
+
text-underline-offset: auto;
|
|
421
|
+
color: var(--color-primary);
|
|
422
|
+
|
|
423
|
+
&:visited {
|
|
424
|
+
color: var(--color-visited);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
&:hover {
|
|
428
|
+
-webkit-text-decoration: none;
|
|
429
|
+
text-decoration: none;
|
|
430
|
+
color: var(--color-hover);
|
|
431
|
+
}
|
|
432
|
+
}
|
|
433
|
+
a.title {
|
|
434
|
+
-webkit-text-decoration: none;
|
|
435
|
+
text-decoration: none;
|
|
436
|
+
|
|
437
|
+
& > h1 {
|
|
438
|
+
font-family: var(--font-family-title);
|
|
439
|
+
color: var(--color-headline);
|
|
440
|
+
font-size: clamp(3.75rem, 1.22vw + 3.46rem, 4.375rem);
|
|
441
|
+
font-weight: var(--iwh-font-weight-title);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
&:hover {
|
|
445
|
+
-webkit-text-decoration: underline;
|
|
446
|
+
text-decoration: underline;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
h1 {
|
|
450
|
+
color: var(--color-h1);
|
|
451
|
+
|
|
452
|
+
/* 32px at 320px viewport */
|
|
453
|
+
/* 64px at 1920px viewport */
|
|
454
|
+
font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
|
|
455
|
+
}
|
|
456
|
+
h1 > code {
|
|
457
|
+
/* 32px at 320px viewport */
|
|
458
|
+
/* 64px at 1920px viewport */
|
|
459
|
+
font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
|
|
460
|
+
}
|
|
461
|
+
h2 {
|
|
462
|
+
color: var(--color-h2);
|
|
463
|
+
|
|
464
|
+
/* 24px at 320px viewport */
|
|
465
|
+
/* 48px at 1920px viewport */
|
|
466
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
467
|
+
}
|
|
468
|
+
h2 > code {
|
|
469
|
+
/* 24px at 320px viewport */
|
|
470
|
+
/* 48px at 1920px viewport */
|
|
471
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
472
|
+
}
|
|
473
|
+
h3 {
|
|
474
|
+
color: var(--color-h3);
|
|
475
|
+
|
|
476
|
+
/* 20px at 320px viewport */
|
|
477
|
+
/* 36px at 1920px viewport */
|
|
478
|
+
font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
|
|
479
|
+
}
|
|
480
|
+
h3 > code {
|
|
481
|
+
/* 20px at 320px viewport */
|
|
482
|
+
/* 36px at 1920px viewport */
|
|
483
|
+
font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
|
|
484
|
+
}
|
|
485
|
+
h4 {
|
|
486
|
+
color: var(--color-h4);
|
|
487
|
+
|
|
488
|
+
/* 18px at 320px viewport */
|
|
489
|
+
/* 28px at 1920px viewport */
|
|
490
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
491
|
+
}
|
|
492
|
+
h4 > code {
|
|
493
|
+
/* 18px at 320px viewport */
|
|
494
|
+
/* 28px at 1920px viewport */
|
|
495
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
496
|
+
}
|
|
497
|
+
h5 {
|
|
498
|
+
color: var(--color-h5);
|
|
499
|
+
|
|
500
|
+
/* 18px at 320px viewport */
|
|
501
|
+
/* 28px at 1920px viewport */
|
|
502
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
503
|
+
}
|
|
504
|
+
h6 {
|
|
505
|
+
color: var(--color-h6);
|
|
506
|
+
|
|
507
|
+
/* 18px at 320px viewport */
|
|
508
|
+
/* 28px at 1920px viewport */
|
|
509
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
510
|
+
}
|
|
511
|
+
p {
|
|
512
|
+
margin-top: 0;
|
|
513
|
+
margin-bottom: 2rem;
|
|
514
|
+
}
|
|
515
|
+
small,
|
|
516
|
+
sub,
|
|
517
|
+
sup {
|
|
518
|
+
font-size: 90%;
|
|
519
|
+
}
|
|
520
|
+
sup.footnote-ref {
|
|
521
|
+
font-size: var(--font-size);
|
|
522
|
+
vertical-align: baseline;
|
|
523
|
+
margin-left: 1px;
|
|
524
|
+
}
|
|
525
|
+
sup.footnote-ref ::before {
|
|
526
|
+
content: '[';
|
|
527
|
+
}
|
|
528
|
+
sup.footnote-ref ::after {
|
|
529
|
+
content: ']';
|
|
530
|
+
}
|
|
531
|
+
hr {
|
|
532
|
+
border-color: var(--color-primary);
|
|
533
|
+
}
|
|
534
|
+
ul {
|
|
535
|
+
padding-left: 1.4em;
|
|
536
|
+
margin-top: 0;
|
|
537
|
+
margin-bottom: 2.5rem;
|
|
538
|
+
}
|
|
539
|
+
li {
|
|
540
|
+
margin-bottom: 0.4em;
|
|
541
|
+
}
|
|
542
|
+
blockquote {
|
|
543
|
+
margin-left: 0;
|
|
544
|
+
margin-right: 0;
|
|
545
|
+
padding: 0.8em 0.8em 0.8em 1em;
|
|
546
|
+
border-left: 5px solid var(--color-primary);
|
|
547
|
+
margin-bottom: 2.5rem;
|
|
548
|
+
background-color: var(--color-bg-alt);
|
|
549
|
+
}
|
|
550
|
+
blockquote p {
|
|
551
|
+
margin-bottom: 0;
|
|
552
|
+
}
|
|
553
|
+
img,
|
|
554
|
+
video {
|
|
555
|
+
margin-bottom: 2.5rem;
|
|
556
|
+
}
|
|
557
|
+
p > img {
|
|
558
|
+
/* Image sizes will stay at max, making resizing harder. So resize the image
|
|
559
|
+
* according to the body with while keeping the same aspect-ratio */
|
|
560
|
+
width: var(--body-width);
|
|
561
|
+
height: auto;
|
|
562
|
+
}
|
|
563
|
+
/* Bearblog puts img tags that aren't in markdown in p tags, adding extra
|
|
564
|
+
margin */
|
|
565
|
+
p:has(img) {
|
|
566
|
+
margin-bottom: 0;
|
|
567
|
+
}
|
|
568
|
+
mark {
|
|
569
|
+
background-color: var(--color-secondary);
|
|
570
|
+
}
|
|
571
|
+
/* Tables */
|
|
572
|
+
table {
|
|
573
|
+
text-align: justify;
|
|
574
|
+
width: 100%;
|
|
575
|
+
border-collapse: collapse;
|
|
576
|
+
margin-bottom: 2rem;
|
|
577
|
+
}
|
|
578
|
+
td,
|
|
579
|
+
th {
|
|
580
|
+
padding: 0.5em;
|
|
581
|
+
border-bottom: 1px solid var(--color-bg-alt);
|
|
582
|
+
}
|
|
583
|
+
.toc ul {
|
|
584
|
+
list-style: none;
|
|
585
|
+
}
|
|
586
|
+
.bear {
|
|
587
|
+
font-family:
|
|
588
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
589
|
+
'DejaVu Sans Mono', monospace;
|
|
590
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@welcome-home/wh-base",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.5",
|
|
4
4
|
"description": "A CSS module for theming and extending bearblog",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./src/css/wh-base.css",
|
|
@@ -15,7 +15,11 @@
|
|
|
15
15
|
"url": "https://gitlab.com/wh-tools/welcome-home/-/work_items"
|
|
16
16
|
},
|
|
17
17
|
"keywords": [],
|
|
18
|
-
"author":
|
|
18
|
+
"author": {
|
|
19
|
+
"name": "Finley J Baker",
|
|
20
|
+
"email": "finleyb.dev@proton.me",
|
|
21
|
+
"url": "https://welcomehome.city"
|
|
22
|
+
},
|
|
19
23
|
"license": "MPL-2.0",
|
|
20
24
|
"type": "module",
|
|
21
25
|
"devDependencies": {
|