@kadal/theme-shibainu 0.0.0-stage → 0.4.2

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/style.css ADDED
@@ -0,0 +1,447 @@
1
+ /* Shibainu — a port of Slidev's shibainu theme (@slidev/theme-shibainu, MIT, © 2021 Slidev.js
2
+ Team; the theme by Inès Fendi) to Kadal Deck: soft blobs and paw-print dots in the browns of a shiba's coat, Titillium Web, and
3
+ fourteen layouts that are each a different arrangement of the blobs. Dark only, as in Slidev.
4
+
5
+ Every theme layout has its own background (assets/page-*.svg, the theme's own drawings),
6
+ painted on the slide itself so it reaches the edges whatever the padding. The words are pale
7
+ (#ebeef2) on the dark ones and the deep brown primary (#402312) on the light tan ones (cover,
8
+ center, section-2), as in Slidev. The engine's other layouts sit on the coat brown, pale.
9
+
10
+ Units. Slidev draws on a 980px-wide canvas with a 16px rem and a 1.1rem body; Kadal draws on a
11
+ 1920px one. Everything here is in `--shibainu-rem`, one Slidev rem at Kadal's scale, worked out
12
+ from the slide's base size the way Slidev's body is (1.1rem), so the proportions are Slidev's
13
+ exactly and a deck that changes --deck-base-size scales the whole theme with it.
14
+
15
+ themeConfig: `primary` → --theme-primary (the deep brown of the words on the light layouts). */
16
+
17
+ .theme-shibainu {
18
+ --shibainu-rem: calc(var(--deck-base-size) / 1.1);
19
+ --shibainu-primary: var(--theme-primary, #402312);
20
+ --shibainu-pale: #ebeef2;
21
+ color-scheme: dark;
22
+ /* colour */
23
+ --deck-bg: #734226;
24
+ --deck-fg: var(--shibainu-pale);
25
+ --deck-muted: #c9b29c;
26
+ --deck-accent: #bf926b;
27
+ --deck-accent-2: #8c6645;
28
+ --deck-surface: rgba(27, 15, 8, 0.22);
29
+ --deck-border: rgba(235, 238, 242, 0.2);
30
+ --deck-live: #bf926b;
31
+ /* type: config.fonts loads Titillium Web and Fira Code */
32
+ --deck-heading-font: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
33
+ --deck-body-font: "Titillium Web", ui-sans-serif, system-ui, sans-serif;
34
+ --deck-mono-font: "Fira Code", ui-monospace, "SF Mono", Menlo, monospace;
35
+ --deck-serif-font: ui-serif, Georgia, Cambria, "Times New Roman", serif;
36
+ --deck-base-size: 34.5px;
37
+ /* code: Slidev's dark code page */
38
+ --deck-code-bg: #1b1b1b;
39
+ --deck-code-fg: #eeeeee;
40
+ --deck-code-active: rgba(191, 146, 107, 0.2);
41
+ /* shape */
42
+ --deck-radius: calc(var(--shibainu-rem) * 0.25);
43
+ --deck-pad: calc(var(--shibainu-rem) * 3.5);
44
+ --deck-transition: 500ms;
45
+ --deck-controls-color: var(--shibainu-pale);
46
+ }
47
+
48
+ /* ── the page ─────────────────────────────────────────────────────────── */
49
+ .theme-shibainu .deck-slide {
50
+ padding: calc(var(--shibainu-rem) * 2.5) calc(var(--shibainu-rem) * 3.5);
51
+ line-height: 1.5;
52
+ background-repeat: no-repeat;
53
+ background-position: center;
54
+ background-size: cover;
55
+ }
56
+ .theme-shibainu .deck-slide-background {
57
+ inset: calc(var(--shibainu-rem) * -2.5) calc(var(--shibainu-rem) * -3.5);
58
+ }
59
+
60
+ /* ── type (Slidev's layouts-base.css and the theme's layouts.css) ─────── */
61
+ .theme-shibainu .deck-slide :is(h1, h2, h3, h4, h5, h6) {
62
+ font-family: var(--deck-heading-font);
63
+ font-weight: 400;
64
+ letter-spacing: normal;
65
+ margin: 0;
66
+ text-wrap: wrap;
67
+ }
68
+ .theme-shibainu .deck-slide h1 {
69
+ font-size: calc(var(--shibainu-rem) * 2.25);
70
+ line-height: calc(var(--shibainu-rem) * 2.5);
71
+ margin-bottom: var(--shibainu-rem);
72
+ margin-inline-start: -0.05em;
73
+ }
74
+ .theme-shibainu .deck-slide h2 {
75
+ font-size: calc(var(--shibainu-rem) * 1.875);
76
+ line-height: calc(var(--shibainu-rem) * 2.25);
77
+ }
78
+ .theme-shibainu .deck-slide h3 {
79
+ font-size: calc(var(--shibainu-rem) * 1.5);
80
+ line-height: calc(var(--shibainu-rem) * 2);
81
+ }
82
+ .theme-shibainu .deck-slide h4 {
83
+ font-size: calc(var(--shibainu-rem) * 1.25);
84
+ line-height: calc(var(--shibainu-rem) * 1.75);
85
+ }
86
+ .theme-shibainu .deck-slide h5 {
87
+ font-size: var(--shibainu-rem);
88
+ line-height: calc(var(--shibainu-rem) * 1.5);
89
+ }
90
+ .theme-shibainu .deck-slide h6 {
91
+ font-size: calc(var(--shibainu-rem) * 0.875);
92
+ line-height: calc(var(--shibainu-rem) * 1.25);
93
+ padding-top: calc(var(--shibainu-rem) * 0.25);
94
+ text-transform: uppercase;
95
+ letter-spacing: 0.1em;
96
+ font-weight: 500;
97
+ margin-inline-start: -0.05em;
98
+ }
99
+ .theme-shibainu .deck-slide h6:not(.opacity-100) {
100
+ opacity: 0.4;
101
+ }
102
+ .theme-shibainu .deck-slide p {
103
+ margin: var(--shibainu-rem) 0;
104
+ line-height: calc(var(--shibainu-rem) * 1.5);
105
+ }
106
+ .theme-shibainu .deck-slide h1 + p {
107
+ margin-top: calc(var(--shibainu-rem) * -0.5);
108
+ margin-bottom: var(--shibainu-rem);
109
+ opacity: 0.5;
110
+ }
111
+ .theme-shibainu .deck-slide :is(p, ul, table) + h2 {
112
+ margin-top: calc(var(--shibainu-rem) * 2.5);
113
+ }
114
+ .theme-shibainu .deck-slide :is(ul, ol) {
115
+ margin: 0;
116
+ padding: 0;
117
+ }
118
+ .theme-shibainu .deck-slide ul {
119
+ list-style: square;
120
+ }
121
+ .theme-shibainu .deck-slide ol {
122
+ list-style: decimal;
123
+ }
124
+ .theme-shibainu .deck-slide li {
125
+ margin: 0 0 0 1.1em;
126
+ padding-inline-start: 0.2em;
127
+ line-height: 1.8em;
128
+ }
129
+ .theme-shibainu .deck-slide blockquote {
130
+ margin: 0;
131
+ padding: calc(var(--shibainu-rem) * 0.25) calc(var(--shibainu-rem) * 0.5);
132
+ font-size: calc(var(--shibainu-rem) * 0.875);
133
+ line-height: calc(var(--shibainu-rem) * 1.25);
134
+ font-style: normal;
135
+ color: var(--deck-code-fg);
136
+ background: var(--deck-code-bg);
137
+ border: 0;
138
+ border-inline-start: 1px solid var(--deck-accent);
139
+ border-radius: calc(var(--shibainu-rem) * 0.25);
140
+ }
141
+ .theme-shibainu .deck-slide blockquote > * {
142
+ margin-block: 0;
143
+ }
144
+ .theme-shibainu .deck-slide table {
145
+ width: 100%;
146
+ font-size: 1em;
147
+ line-height: calc(var(--shibainu-rem) * 1.5);
148
+ }
149
+ .theme-shibainu .deck-slide :is(th, td) {
150
+ padding: calc(var(--shibainu-rem) * 0.75) calc(var(--shibainu-rem) * 0.5);
151
+ border-bottom: 1px solid var(--deck-border);
152
+ }
153
+ .theme-shibainu .deck-slide th {
154
+ text-align: left;
155
+ font-size: 1em;
156
+ font-weight: 400;
157
+ text-transform: none;
158
+ letter-spacing: normal;
159
+ color: inherit;
160
+ }
161
+ .theme-shibainu .deck-slide a {
162
+ color: inherit;
163
+ text-decoration: none;
164
+ border-bottom: 1px dashed currentColor;
165
+ }
166
+ .theme-shibainu .deck-slide a:hover {
167
+ color: var(--deck-accent);
168
+ border-bottom-style: solid;
169
+ }
170
+ .theme-shibainu .deck-slide :is(b, strong) {
171
+ font-weight: 600;
172
+ }
173
+ .theme-shibainu .deck-slide :not(pre) > code {
174
+ font-family: var(--deck-mono-font);
175
+ font-size: 0.9em;
176
+ font-weight: 300;
177
+ padding: calc(var(--shibainu-rem) * 0.125) calc(var(--shibainu-rem) * 0.375);
178
+ background: var(--deck-code-bg);
179
+ border-radius: calc(var(--shibainu-rem) * 0.25);
180
+ }
181
+ .theme-shibainu .deck-slide :is(kbd, .deck-kbd) {
182
+ font-family: var(--deck-mono-font);
183
+ font-size: calc(var(--shibainu-rem) * 0.75);
184
+ padding: calc(var(--shibainu-rem) * 0.125) calc(var(--shibainu-rem) * 0.25);
185
+ border: 1px solid var(--deck-border);
186
+ border-bottom-width: 2px;
187
+ border-radius: calc(var(--shibainu-rem) * 0.25);
188
+ background: rgba(156, 163, 175, 0.05);
189
+ box-shadow: none;
190
+ }
191
+
192
+ /* ── code: Slidev's 12px / 18px blocks with a 4px corner and no border ── */
193
+ .theme-shibainu .deck-code-block {
194
+ margin: calc(var(--shibainu-rem) * 0.25) 0;
195
+ border: 0;
196
+ border-radius: calc(var(--shibainu-rem) * 0.25);
197
+ }
198
+ .theme-shibainu pre.deck-code,
199
+ .theme-shibainu .shiki-magic-move-wrap {
200
+ font-size: calc(var(--shibainu-rem) * 0.75);
201
+ line-height: calc(var(--shibainu-rem) * 1.125);
202
+ padding: calc(var(--shibainu-rem) * 0.5) 0;
203
+ }
204
+ .theme-shibainu .shiki-magic-move-wrap {
205
+ padding-inline: calc(var(--shibainu-rem) * 0.5);
206
+ }
207
+ .theme-shibainu pre.deck-code .line {
208
+ padding: 0 calc(var(--shibainu-rem) * 0.5);
209
+ }
210
+ .theme-shibainu pre.deck-code .line.is-dim {
211
+ opacity: 0.3;
212
+ }
213
+ .theme-shibainu .deck-code-title {
214
+ font-size: calc(var(--shibainu-rem) * 0.75);
215
+ padding: calc(var(--shibainu-rem) * 0.5);
216
+ border-bottom-color: var(--deck-border);
217
+ }
218
+
219
+ /* shibainu: small-caps h3, and inline code as a dark chip on the brown */
220
+ .theme-shibainu .deck-slide h3 {
221
+ font-size: calc(var(--shibainu-rem) * 0.875);
222
+ line-height: calc(var(--shibainu-rem) * 1.25);
223
+ padding-top: calc(var(--shibainu-rem) * 0.5);
224
+ text-transform: uppercase;
225
+ letter-spacing: 0.1em;
226
+ font-weight: 500;
227
+ margin-inline-start: -0.05em;
228
+ }
229
+ .theme-shibainu .deck-slide h3:not(.opacity-100) {
230
+ opacity: 0.4;
231
+ }
232
+ .theme-shibainu .deck-slide :not(pre) > code {
233
+ background: rgba(27, 15, 8, 0.25);
234
+ }
235
+ .theme-shibainu .deck-slide blockquote {
236
+ background: rgba(27, 15, 8, 0.25);
237
+ color: inherit;
238
+ }
239
+
240
+ /* ── the layouts ──────────────────────────────────────────────────────── */
241
+ /* the blobs behind each layout */
242
+ .theme-shibainu .deck-slide.layout-cover {
243
+ background-image: url("./assets/page-1.svg");
244
+ }
245
+ .theme-shibainu .deck-slide.layout-center {
246
+ background-image: url("./assets/page-2.svg");
247
+ }
248
+ .theme-shibainu .deck-slide.layout-section {
249
+ background-image: url("./assets/page-3.svg");
250
+ }
251
+ .theme-shibainu .deck-slide.layout-default-2 {
252
+ background-image: url("./assets/page-4.svg");
253
+ }
254
+ .theme-shibainu .deck-slide.layout-default-3 {
255
+ background-image: url("./assets/page-5.svg");
256
+ }
257
+ .theme-shibainu .deck-slide.layout-default {
258
+ background-image: url("./assets/page-6.svg");
259
+ }
260
+ .theme-shibainu .deck-slide.layout-section-2 {
261
+ background-image: url("./assets/page-7.svg");
262
+ }
263
+ .theme-shibainu .deck-slide:is(.layout-default-4, .layout-right) {
264
+ background-image: url("./assets/page-9.svg");
265
+ }
266
+ .theme-shibainu .deck-slide.layout-default-5 {
267
+ background-image: url("./assets/page-10.svg");
268
+ }
269
+ .theme-shibainu .deck-slide.layout-default-6 {
270
+ background-image: url("./assets/page-12.svg");
271
+ }
272
+ .theme-shibainu .deck-slide.layout-default-7 {
273
+ background-image: url("./assets/page-13.svg");
274
+ }
275
+ .theme-shibainu .deck-slide.layout-section-3 {
276
+ background-image: url("./assets/page-14.svg");
277
+ }
278
+ .theme-shibainu .deck-slide.layout-quote {
279
+ background-image: url("./assets/page-15.svg");
280
+ }
281
+
282
+ /* the light tan layouts carry the deep brown words */
283
+ .theme-shibainu :is(.deck-layout-cover, .deck-layout-center, .deck-layout-section-2) {
284
+ color: var(--shibainu-primary);
285
+ --deck-muted: color-mix(in srgb, var(--shibainu-primary) 60%, #bf926b);
286
+ }
287
+
288
+ /* default: the words in the left 70% */
289
+ .theme-shibainu .deck-layout-default {
290
+ justify-content: flex-start;
291
+ padding-inline-end: 30%;
292
+ }
293
+ /* cover: the title centred top to bottom, on the left */
294
+ .theme-shibainu .deck-layout-cover {
295
+ align-items: stretch;
296
+ text-align: start;
297
+ }
298
+ .theme-shibainu .deck-layout-cover h1 {
299
+ font-size: calc(var(--shibainu-rem) * 3.75);
300
+ line-height: calc(var(--shibainu-rem) * 5);
301
+ }
302
+ /* center: a centred column 60% wide */
303
+ .theme-shibainu .deck-layout-center {
304
+ justify-content: center;
305
+ align-items: center;
306
+ text-align: center;
307
+ }
308
+ .theme-shibainu .deck-layout-center > * {
309
+ width: 60%;
310
+ }
311
+ /* section: the title centred top to bottom, a little indented */
312
+ .theme-shibainu :is(.deck-layout-section, .deck-layout-section-2) {
313
+ justify-content: center;
314
+ align-items: stretch;
315
+ text-align: start;
316
+ padding-inline: calc(var(--shibainu-rem) * 2.5);
317
+ }
318
+ .theme-shibainu .deck-layout-section {
319
+ padding-top: calc(var(--shibainu-rem) * 3.75);
320
+ }
321
+ .theme-shibainu :is(.deck-layout-section, .deck-layout-section-2) h1 {
322
+ font-size: calc(var(--shibainu-rem) * 3.75);
323
+ line-height: calc(var(--shibainu-rem) * 5);
324
+ font-weight: 500;
325
+ }
326
+ /* section-3 and quote: centred, the title at 3em and 4em of the page's type */
327
+ .theme-shibainu :is(.deck-layout-section-3, .deck-layout-quote) {
328
+ justify-content: center;
329
+ align-items: stretch;
330
+ text-align: center;
331
+ padding-inline: 0;
332
+ font-size: 1em;
333
+ font-style: normal;
334
+ }
335
+ .theme-shibainu .deck-layout-section-3 h1 {
336
+ font-size: 3em;
337
+ line-height: 1.25;
338
+ }
339
+ .theme-shibainu .deck-layout-quote h1 {
340
+ font-size: 4em;
341
+ line-height: 1.25;
342
+ }
343
+ .theme-shibainu .deck-layout-quote h1 + p {
344
+ margin-top: calc(var(--shibainu-rem) * 0.5);
345
+ }
346
+ /* default-2 … default-7 and right: the words in a box placed differently on each */
347
+ .theme-shibainu .shibainu-box {
348
+ min-width: 0;
349
+ }
350
+ .theme-shibainu .deck-layout-default-2 > .shibainu-box {
351
+ width: 80%;
352
+ padding: calc(var(--shibainu-rem) * 2.5);
353
+ }
354
+ .theme-shibainu .deck-layout-default-3 > .shibainu-box {
355
+ padding: 2% 8%;
356
+ flex: 1;
357
+ }
358
+ .theme-shibainu .deck-layout-default-4 > .shibainu-box {
359
+ padding: 2% 0 2% 20%;
360
+ }
361
+ .theme-shibainu .deck-layout-default-5 > .shibainu-box {
362
+ padding: 2% 10% 2% 0;
363
+ }
364
+ .theme-shibainu .deck-layout-default-6 > .shibainu-box {
365
+ padding: 5% 15%;
366
+ }
367
+ .theme-shibainu .deck-layout-default-7 > .shibainu-box {
368
+ padding: 2% 25% 2% 0;
369
+ }
370
+ .theme-shibainu .deck-layout-right > .shibainu-box {
371
+ padding: calc(var(--shibainu-rem) * 1.25) calc(var(--shibainu-rem) * 1.25)
372
+ calc(var(--shibainu-rem) * 1.25) 30%;
373
+ text-align: right;
374
+ }
375
+ /* fact and statement (the engine's, which Slidev's theme restyles) */
376
+ .theme-shibainu :is(.deck-layout-fact, .deck-layout-statement) {
377
+ text-align: center;
378
+ }
379
+ .theme-shibainu .deck-layout-fact > :is(h1, h2, p, .deck-counter) {
380
+ letter-spacing: normal;
381
+ }
382
+ .theme-shibainu .deck-layout-fact h1 {
383
+ font-size: calc(var(--shibainu-rem) * 6);
384
+ line-height: 1;
385
+ font-weight: 700;
386
+ }
387
+ .theme-shibainu .deck-layout-fact h1 + p {
388
+ font-size: calc(var(--shibainu-rem) * 1.5);
389
+ line-height: calc(var(--shibainu-rem) * 2);
390
+ font-weight: 700;
391
+ }
392
+ .theme-shibainu .deck-layout-statement h1 {
393
+ font-size: calc(var(--shibainu-rem) * 3.75);
394
+ line-height: 1;
395
+ font-weight: 700;
396
+ }
397
+ .theme-shibainu .deck-layout-intro {
398
+ align-items: stretch;
399
+ text-align: start;
400
+ }
401
+ .theme-shibainu .deck-layout-intro h1 {
402
+ font-size: calc(var(--shibainu-rem) * 3.75);
403
+ line-height: calc(var(--shibainu-rem) * 5);
404
+ }
405
+ .theme-shibainu .deck-slide.layout-end {
406
+ background: #000;
407
+ }
408
+ .theme-shibainu .deck-layout-end {
409
+ color: rgba(255, 255, 255, 0.85);
410
+ font-size: calc(var(--shibainu-rem) * 1.25);
411
+ letter-spacing: 0.1em;
412
+ user-select: none;
413
+ }
414
+ .theme-shibainu .deck-layout-end:empty::before {
415
+ content: "END";
416
+ }
417
+ .theme-shibainu .deck-layout-full {
418
+ padding: 0;
419
+ }
420
+ .theme-shibainu :is(.deck-layout-two-cols, .deck-layout-two-cols-header) {
421
+ column-gap: var(--shibainu-rem);
422
+ }
423
+ .theme-shibainu .deck-layout-two-cols-header > .deck-slot-bottom {
424
+ align-self: end;
425
+ }
426
+ .theme-shibainu :is(.deck-layout-image-left, .deck-layout-image-right) .deck-layout-image-content,
427
+ .theme-shibainu :is(.deck-layout-iframe-left, .deck-layout-iframe-right) .deck-layout-iframe-content {
428
+ justify-content: flex-start;
429
+ padding: calc(var(--shibainu-rem) * 2.5) calc(var(--shibainu-rem) * 3.5);
430
+ }
431
+ .theme-shibainu .deck-layout-image .deck-layout-image-content:empty {
432
+ display: none;
433
+ }
434
+ .theme-shibainu :is(.deck-layout-iframe, .deck-layout-iframe-left, .deck-layout-iframe-right) {
435
+ padding: 0;
436
+ gap: 0;
437
+ }
438
+ .theme-shibainu .deck-frame.deck-layout-iframe-pane {
439
+ border: 0;
440
+ border-radius: 0;
441
+ box-shadow: none;
442
+ }
443
+
444
+ /* ── chrome ───────────────────────────────────────────────────────────── */
445
+ .theme-shibainu .deck-progress span {
446
+ background: #bf926b;
447
+ }