mdeck 3.4.0 → 3.5.0

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.
Files changed (56) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +1 -1
  3. package/assets/extensions/palettes/cobalt/extension.toml +30 -0
  4. package/assets/extensions/palettes/greyscale/extension.toml +57 -0
  5. package/assets/extensions/themes/glass/extension.toml +59 -0
  6. package/assets/extensions/themes/glass/styles.css +754 -0
  7. package/assets/extensions/themes/plain/extension.toml +58 -0
  8. package/assets/extensions/themes/plain/styles.css +471 -0
  9. package/assets/extensions/themes/work/extension.toml +57 -0
  10. package/assets/extensions/themes/work/styles.css +512 -0
  11. package/docs/reference/authoring.md +25 -8
  12. package/docs/reference/palettes.md +4 -3
  13. package/docs/reference/themes.md +5 -3
  14. package/docs/site/content/appearance.md +24 -10
  15. package/docs/site/content/audience.md +14 -0
  16. package/docs/site/content/theme-repository.md +7 -7
  17. package/docs/site/images/themes/academic-dark.webp +0 -0
  18. package/docs/site/images/themes/academic-light.webp +0 -0
  19. package/docs/site/images/themes/academic.webp +0 -0
  20. package/docs/site/images/themes/glass-dark.webp +0 -0
  21. package/docs/site/images/themes/glass-light.webp +0 -0
  22. package/docs/site/images/themes/glass.webp +0 -0
  23. package/docs/site/images/themes/minimal-dark.webp +0 -0
  24. package/docs/site/images/themes/minimal-light.webp +0 -0
  25. package/docs/site/images/themes/minimal.webp +0 -0
  26. package/docs/site/images/themes/neue-dark.webp +0 -0
  27. package/docs/site/images/themes/neue-light.webp +0 -0
  28. package/docs/site/images/themes/neue.webp +0 -0
  29. package/docs/site/images/themes/plain-dark.webp +0 -0
  30. package/docs/site/images/themes/plain-light.webp +0 -0
  31. package/docs/site/images/themes/plain.webp +0 -0
  32. package/docs/site/images/themes/work-dark.webp +0 -0
  33. package/docs/site/images/themes/work-light.webp +0 -0
  34. package/docs/site/images/themes/work.webp +0 -0
  35. package/examples/showcase/slides.md +2 -2
  36. package/package.json +4 -1
  37. package/skills/write-slides/SKILL.md +2 -2
  38. package/src/build/slidesPlugin.js +16 -15
  39. package/src/components/Poll.jsx +17 -5
  40. package/src/components/inlineText.js +38 -15
  41. package/src/components/poll.css +3 -0
  42. package/src/core/editDeck.js +4 -5
  43. package/src/core/pollList.js +66 -0
  44. package/src/core/tags.js +195 -0
  45. package/src/extensions/discover.js +2 -2
  46. package/src/extensions/moved.js +4 -4
  47. package/src/layouts/layoutApi.jsx +20 -10
  48. package/src/live/roomTag.js +11 -19
  49. package/src/runtime/main.jsx +2 -1
  50. package/src/runtime/markedSetup.js +3 -0
  51. package/assets/extensions/palettes/neon/extension.toml +0 -30
  52. package/assets/extensions/themes/aurora/extension.toml +0 -40
  53. package/assets/extensions/themes/aurora/styles.css +0 -670
  54. package/docs/site/images/themes/aurora-dark.webp +0 -0
  55. package/docs/site/images/themes/aurora-light.webp +0 -0
  56. package/docs/site/images/themes/aurora.webp +0 -0
@@ -0,0 +1,512 @@
1
+ /* Work — an everyday company template.
2
+ What a good office template does, and nothing more: an accent band along
3
+ the top of every slide, the logo (or the organisation's name) at the top
4
+ left of the title slide, every heading in the same place at the top with
5
+ the content below it, section dividers with a large number in the
6
+ accent, and a quiet footer with a hairline, the author and the page
7
+ number. IBM Plex
8
+ Sans throughout, square bullets, striped tables. Any palette turns it
9
+ into a company's own template; all colours are the palette's. */
10
+
11
+ /* ─────────────────────────────────────────────
12
+ THE BAND — along the top of every slide
13
+ ───────────────────────────────────────────── */
14
+ .slide::before {
15
+ content: '';
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ right: 0;
20
+ height: var(--band);
21
+ background: var(--accent);
22
+ z-index: 3;
23
+ pointer-events: none;
24
+ }
25
+
26
+ /* ─────────────────────────────────────────────
27
+ HEADER / FOOTER
28
+ ───────────────────────────────────────────── */
29
+ .slide-header {
30
+ position: relative;
31
+ z-index: 2;
32
+ min-height: 40px;
33
+ font-family: var(--font-body);
34
+ font-size: var(--fs-eyebrow);
35
+ font-weight: 500;
36
+ letter-spacing: 0.02em;
37
+ color: var(--muted);
38
+ }
39
+ .slide-header .brand {
40
+ font-weight: 600;
41
+ font-size: 26px;
42
+ letter-spacing: 0;
43
+ color: var(--ink);
44
+ }
45
+ /* A logo stands where the name would, at the top left, and replaces it. */
46
+ .slide-header:has(.slide-logo) .brand { visibility: hidden; width: 0; }
47
+ .slide-logo {
48
+ position: absolute;
49
+ top: var(--pad-y);
50
+ left: var(--pad-x);
51
+ height: 72px;
52
+ width: auto;
53
+ max-width: 360px;
54
+ object-fit: contain;
55
+ object-position: left center;
56
+ filter: var(--logo-filter, none);
57
+ transform: translateY(calc(20px - 50%));
58
+ }
59
+
60
+ .slide-footer {
61
+ position: relative;
62
+ z-index: 2;
63
+ font-family: var(--font-body);
64
+ font-size: var(--fs-small);
65
+ color: var(--muted);
66
+ border-top: 1px solid var(--rule);
67
+ padding-top: 18px;
68
+ margin-top: 24px;
69
+ }
70
+ .slide-footer > span:last-child:not(:first-child) {
71
+ font-variant-numeric: tabular-nums;
72
+ font-weight: 600;
73
+ color: var(--ink);
74
+ }
75
+
76
+ /* ─────────────────────────────────────────────
77
+ TYPOGRAPHY
78
+ ───────────────────────────────────────────── */
79
+ .eyebrow {
80
+ font-family: var(--font-body);
81
+ font-size: var(--fs-eyebrow);
82
+ font-weight: 600;
83
+ letter-spacing: 0.1em;
84
+ text-transform: uppercase;
85
+ color: var(--accent);
86
+ margin: 0;
87
+ }
88
+ .display {
89
+ font-family: var(--font-display);
90
+ font-size: var(--fs-display);
91
+ font-weight: 600;
92
+ line-height: 1.04;
93
+ letter-spacing: -0.025em;
94
+ color: var(--ink);
95
+ margin: 0;
96
+ text-wrap: balance;
97
+ }
98
+ .title {
99
+ font-family: var(--font-display);
100
+ font-size: var(--fs-h);
101
+ font-weight: 600;
102
+ line-height: 1.12;
103
+ letter-spacing: -0.015em;
104
+ color: var(--ink);
105
+ margin: 0;
106
+ text-wrap: balance;
107
+ }
108
+ .subtitle {
109
+ font-family: var(--font-body);
110
+ font-size: var(--fs-sub);
111
+ font-weight: 400;
112
+ line-height: 1.3;
113
+ color: var(--ink-soft);
114
+ margin: 0;
115
+ text-wrap: pretty;
116
+ }
117
+ .body-text {
118
+ font-family: var(--font-body);
119
+ font-size: var(--fs-body);
120
+ line-height: 1.5;
121
+ color: var(--ink-soft);
122
+ margin: 0;
123
+ text-wrap: pretty;
124
+ }
125
+ .meta { font-family: var(--font-body); font-size: var(--fs-small); color: var(--muted); }
126
+
127
+ em { font-style: normal; font-weight: 600; color: var(--accent); }
128
+ strong { font-weight: 600; color: var(--ink); }
129
+
130
+ /* ─────────────────────────────────────────────
131
+ CONTENT SLIDE — the heading at the top, the content below it
132
+ ───────────────────────────────────────────── */
133
+ .slide:not(.slide--title, .slide--chapter, .slide--focus, .slide--full-bleed-image) > .slide-body {
134
+ justify-content: flex-start;
135
+ padding-top: 20px;
136
+ }
137
+ .slide-body h1 {
138
+ font-family: var(--font-display);
139
+ font-size: var(--fs-h);
140
+ font-weight: 600;
141
+ line-height: 1.12;
142
+ letter-spacing: -0.015em;
143
+ color: var(--ink);
144
+ margin: 0 0 var(--gap-title) 0;
145
+ max-width: 1500px;
146
+ text-wrap: balance;
147
+ }
148
+ .slide-body h2 {
149
+ font-family: var(--font-display);
150
+ font-size: var(--fs-sub);
151
+ font-weight: 600;
152
+ line-height: 1.2;
153
+ color: var(--ink);
154
+ margin: 0 0 var(--gap-item) 0;
155
+ }
156
+ .slide-body h3 {
157
+ font-family: var(--font-display);
158
+ font-size: var(--fs-body);
159
+ font-weight: 600;
160
+ color: var(--ink);
161
+ margin: 0 0 10px 0;
162
+ }
163
+ .slide-body p {
164
+ font-family: var(--font-body);
165
+ font-size: var(--fs-body);
166
+ line-height: 1.5;
167
+ color: var(--ink-soft);
168
+ margin: 0 0 var(--gap-item) 0;
169
+ max-width: 1500px;
170
+ text-wrap: pretty;
171
+ }
172
+ .slide-body :not(pre) > code {
173
+ font-family: var(--font-mono);
174
+ font-size: 0.88em;
175
+ padding: 0.05em 0.3em;
176
+ background: var(--surface);
177
+ border-radius: 3px;
178
+ color: var(--ink);
179
+ }
180
+
181
+ /* ─────────────────────────────────────────────
182
+ LISTS — square bullets, numbers in the accent
183
+ ───────────────────────────────────────────── */
184
+ .slide-body ul > li { line-height: 1.4; padding-left: 40px; }
185
+ .slide-body ul > li::before {
186
+ content: '';
187
+ position: absolute;
188
+ left: 2px;
189
+ top: calc(0.7em - 6px);
190
+ width: 12px;
191
+ height: 12px;
192
+ background: var(--accent);
193
+ }
194
+ /* A point inside a point: a dash. */
195
+ .slide-body li ul > li { padding-left: 34px; }
196
+ .slide-body li ul > li::before {
197
+ top: calc(0.7em - 1.5px);
198
+ width: 16px;
199
+ height: 3px;
200
+ background: var(--muted);
201
+ }
202
+ .slide-body ol > li { line-height: 1.4; padding-left: 52px; }
203
+ .slide-body ol > li::before {
204
+ content: counter(slide-ol) '.';
205
+ position: absolute;
206
+ left: 0;
207
+ top: 0;
208
+ font-weight: 600;
209
+ font-variant-numeric: tabular-nums;
210
+ color: var(--accent);
211
+ }
212
+
213
+ /* ─────────────────────────────────────────────
214
+ LAYOUT: TITLE — the title at the lower left, under a short rule
215
+ ───────────────────────────────────────────── */
216
+ /* A broader band on the title slide and the section dividers. */
217
+ :is(.slide--title, .slide--chapter)::before { height: calc(var(--band) * 2); }
218
+ .slide--title .slide-body {
219
+ justify-content: flex-end;
220
+ align-items: flex-start;
221
+ padding-bottom: 24px;
222
+ }
223
+ .slide--title .title-text { display: flex; flex-direction: column; align-items: flex-start; max-width: 1400px; }
224
+ .slide--title .title-text::before {
225
+ content: '';
226
+ width: 120px;
227
+ height: 8px;
228
+ background: var(--accent);
229
+ margin-bottom: 48px;
230
+ }
231
+ /* The title is an h1: as large as .display, not a content heading. */
232
+ .slide--title .display { font-size: var(--fs-display); margin: 0; }
233
+ .slide--title .subtitle { margin-top: 28px; max-width: 1200px; }
234
+
235
+ /* With a picture: the picture fills the right of the slide, edge to edge. */
236
+ .slide--title.has-image .title-text { max-width: 54%; }
237
+ .slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.72); }
238
+ .slide--title.has-image .title-image {
239
+ position: absolute;
240
+ top: 0;
241
+ right: 0;
242
+ bottom: 0;
243
+ width: 40%;
244
+ height: 100%;
245
+ max-height: none;
246
+ object-fit: cover;
247
+ z-index: 1;
248
+ }
249
+ .slide--title.has-image .slide-header > span:last-child:not(.brand) { visibility: hidden; }
250
+ /* The footer's hairline stops short of the picture (40% of 1920px, and a gap). */
251
+ :is(.slide--title, .slide--chapter).has-image .slide-footer { margin-right: 712px; }
252
+
253
+ /* ─────────────────────────────────────────────
254
+ LAYOUT: CHAPTER — a section divider: the number in the accent, a broader band
255
+ ───────────────────────────────────────────── */
256
+ .slide--chapter .slide-body { justify-content: flex-end; align-items: flex-start; padding-bottom: 32px; }
257
+ .chapter-num {
258
+ font-family: var(--font-display);
259
+ font-size: 200px;
260
+ font-weight: 300;
261
+ line-height: 0.9;
262
+ letter-spacing: -0.04em;
263
+ font-variant-numeric: tabular-nums;
264
+ color: var(--accent);
265
+ margin: 0 0 40px -6px;
266
+ }
267
+ .chapter-meta {
268
+ font-family: var(--font-body);
269
+ font-size: var(--fs-eyebrow);
270
+ font-weight: 600;
271
+ letter-spacing: 0.1em;
272
+ text-transform: uppercase;
273
+ color: var(--muted);
274
+ margin: 0 0 16px 0;
275
+ }
276
+ .slide--chapter .chapter-title {
277
+ font-family: var(--font-display);
278
+ font-size: var(--fs-title);
279
+ font-weight: 600;
280
+ line-height: 1.04;
281
+ letter-spacing: -0.025em;
282
+ color: var(--ink);
283
+ margin: 0 0 28px 0;
284
+ max-width: 1400px;
285
+ text-wrap: balance;
286
+ }
287
+ .slide--chapter .chapter-desc {
288
+ font-family: var(--font-body);
289
+ font-size: var(--fs-sub);
290
+ line-height: 1.35;
291
+ color: var(--ink-soft);
292
+ max-width: 1100px;
293
+ margin: 0;
294
+ }
295
+ /* With a picture: the picture fills the right of the slide, edge to edge. */
296
+ .slide--chapter.has-image .chapter-content { max-width: 52%; }
297
+ .slide--chapter.has-image .chapter-title { font-size: calc(var(--fs-title) * 0.78); }
298
+ .slide--chapter.has-image .chapter-image {
299
+ position: absolute;
300
+ top: 0;
301
+ right: 0;
302
+ bottom: 0;
303
+ width: 40%;
304
+ height: 100%;
305
+ max-height: none;
306
+ object-fit: cover;
307
+ z-index: 1;
308
+ }
309
+ .slide--chapter.has-image .slide-header > span:last-child:not(.brand) { visibility: hidden; }
310
+
311
+ /* ─────────────────────────────────────────────
312
+ LAYOUT: FOCUS — the key message, flush left beside an accent bar
313
+ ───────────────────────────────────────────── */
314
+ .slide--focus .slide-body { justify-content: center; align-items: flex-start; }
315
+ .focus-eyebrow {
316
+ font-family: var(--font-body);
317
+ font-size: var(--fs-eyebrow);
318
+ font-weight: 600;
319
+ letter-spacing: 0.1em;
320
+ text-transform: uppercase;
321
+ color: var(--accent);
322
+ margin: 0 0 32px 58px;
323
+ }
324
+ .focus-content {
325
+ display: flex;
326
+ flex-direction: column;
327
+ align-items: flex-start;
328
+ border-left: 10px solid var(--accent);
329
+ padding: 6px 0 10px 48px;
330
+ }
331
+ .focus-statement,
332
+ .slide--focus .focus-content h1,
333
+ .slide--focus .focus-content p {
334
+ font-family: var(--font-display);
335
+ font-size: var(--fs-focus);
336
+ font-weight: 600;
337
+ line-height: 1.15;
338
+ letter-spacing: -0.02em;
339
+ color: var(--ink);
340
+ max-width: 1450px;
341
+ margin: 0;
342
+ text-wrap: balance;
343
+ }
344
+ .focus-attribution {
345
+ font-family: var(--font-body);
346
+ font-size: var(--fs-body);
347
+ color: var(--muted);
348
+ margin: 32px 0 0 58px;
349
+ }
350
+
351
+ /* ─────────────────────────────────────────────
352
+ LAYOUT: IMAGE + TEXT
353
+ ───────────────────────────────────────────── */
354
+ .slide--image-text .slide-body { gap: 80px; }
355
+ .image-pane {
356
+ flex: 1.05;
357
+ min-width: 0;
358
+ display: flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ background: var(--surface);
362
+ overflow: hidden;
363
+ position: relative;
364
+ border-radius: 4px;
365
+ }
366
+ .image-placeholder {
367
+ width: 100%;
368
+ height: 100%;
369
+ background: repeating-linear-gradient(135deg, var(--surface) 0 22px, var(--bg) 22px 44px);
370
+ }
371
+ .image-placeholder span {
372
+ font-family: var(--font-mono);
373
+ font-size: 20px;
374
+ color: var(--muted);
375
+ letter-spacing: 0.06em;
376
+ text-transform: uppercase;
377
+ background: var(--bg);
378
+ padding: 12px 18px;
379
+ border: 1px solid var(--rule);
380
+ }
381
+ .text-pane .title { font-size: var(--fs-h); }
382
+ .text-pane .body-text + .body-text { margin-top: 8px; }
383
+
384
+ /* ─────────────────────────────────────────────
385
+ LAYOUT: SPLIT — two columns with a hairline between them
386
+ ───────────────────────────────────────────── */
387
+ .split-columns { gap: 0; }
388
+ .slide--split :is(.split-left, .split-right) { padding: 0 56px; }
389
+ .slide--split .split-left { padding-left: 0; border-right: 1px solid var(--rule); }
390
+ .slide--split .split-right { padding-right: 0; }
391
+
392
+ /* ─────────────────────────────────────────────
393
+ LAYOUT: FULL-BLEED IMAGE — the title on a label at the lower left
394
+ ───────────────────────────────────────────── */
395
+ .slide--full-bleed-image .slide-body { align-items: flex-start; }
396
+ .slide--full-bleed-image.has-overlay .slide-bg::after {
397
+ content: '';
398
+ position: absolute;
399
+ inset: 0;
400
+ background: linear-gradient(to top, color-mix(in oklab, var(--ink) 30%, transparent), transparent 50%);
401
+ }
402
+ .slide--full-bleed-image .overlay-title {
403
+ font-family: var(--font-display);
404
+ font-size: var(--fs-h);
405
+ font-weight: 600;
406
+ line-height: 1.12;
407
+ letter-spacing: -0.015em;
408
+ color: var(--ink);
409
+ background: var(--bg);
410
+ border-left: 10px solid var(--accent);
411
+ padding: 28px 44px 32px 40px;
412
+ margin: 0;
413
+ max-width: 1300px;
414
+ text-wrap: balance;
415
+ }
416
+
417
+ /* ─────────────────────────────────────────────
418
+ TABLES — a ruled header, striped rows
419
+ ───────────────────────────────────────────── */
420
+ .slide-body table { font-size: calc(var(--fs-body) * 0.9); font-variant-numeric: tabular-nums; }
421
+ .slide-body th {
422
+ font-weight: 600;
423
+ color: var(--ink);
424
+ border-bottom: 2px solid var(--accent);
425
+ }
426
+ .slide-body td { border-bottom: 0; }
427
+ .slide-body tbody tr:nth-child(odd) td { background: var(--surface); }
428
+
429
+ /* ─────────────────────────────────────────────
430
+ CALLOUTS — a surface with a coloured bar
431
+ ───────────────────────────────────────────── */
432
+ .slide-body .callout {
433
+ --bar: var(--accent);
434
+ background: var(--surface);
435
+ border: 0;
436
+ border-left: 8px solid var(--bar);
437
+ border-radius: 0 4px 4px 0;
438
+ padding: 22px 32px 24px;
439
+ margin: 14px 0 0;
440
+ max-width: 1500px;
441
+ }
442
+ .slide-body .callout-title {
443
+ font-family: var(--font-body);
444
+ font-size: var(--fs-eyebrow);
445
+ font-weight: 600;
446
+ letter-spacing: 0.08em;
447
+ text-transform: uppercase;
448
+ margin: 0 0 8px 0;
449
+ }
450
+ .slide-body .callout p { padding-left: 0; margin: 0; color: var(--ink); }
451
+ .slide-body .callout-note { --bar: var(--callout-note); }
452
+ .slide-body .callout-tip { --bar: var(--callout-tip); }
453
+ .slide-body .callout-important { --bar: var(--callout-important); }
454
+ .slide-body .callout-warning { --bar: var(--callout-warning); }
455
+ .slide-body .callout-caution { --bar: var(--callout-caution); }
456
+ .slide-body .callout-definition { --bar: var(--accent-2); }
457
+
458
+ /* ─────────────────────────────────────────────
459
+ CODE
460
+ ───────────────────────────────────────────── */
461
+ .code-block {
462
+ --code-bg: var(--surface);
463
+ --code-radius: 4px;
464
+ --code-size: 25px;
465
+ background: var(--code-bg);
466
+ border-radius: var(--code-radius);
467
+ border: 1px solid var(--rule);
468
+ padding: 28px 36px;
469
+ margin: 0;
470
+ overflow: hidden;
471
+ font-family: var(--font-mono);
472
+ font-size: var(--code-size);
473
+ line-height: 1.55;
474
+ }
475
+ .code-block code { font-family: inherit; font-size: inherit; background: none; padding: 0; }
476
+ .slide-body .code-block-wrapper { margin: 24px 0; }
477
+
478
+ /* ─────────────────────────────────────────────
479
+ QUOTATIONS — a large quotation mark in the accent, hanging beside
480
+ the quote
481
+ ───────────────────────────────────────────── */
482
+ .slide-body blockquote {
483
+ position: relative;
484
+ margin: 0 0 var(--gap-item);
485
+ padding: 0 0 0 64px;
486
+ border: 0;
487
+ max-width: 1300px;
488
+ font-size: calc(var(--fs-body) * 1.1);
489
+ font-weight: 500;
490
+ line-height: 1.4;
491
+ color: var(--ink);
492
+ }
493
+ .slide-body blockquote::before {
494
+ content: '\201C';
495
+ position: absolute;
496
+ left: 0;
497
+ top: -0.12em;
498
+ font-family: var(--font-display);
499
+ font-size: 104px;
500
+ font-weight: 600;
501
+ line-height: 1;
502
+ color: var(--accent);
503
+ }
504
+
505
+ /* ─────────────────────────────────────────────
506
+ FOOTNOTES, MATH, AUDIENCE QUESTIONS
507
+ ───────────────────────────────────────────── */
508
+ .slide-footnotes, .slide-citations { font-family: var(--font-body); }
509
+ .slide .katex-display { font-size: var(--fs-sub); margin: 32px 0; overflow-x: auto; overflow-y: hidden; text-align: left; }
510
+ .slide .poll-track, .slide .scale-track { border-radius: 2px; background: var(--surface); }
511
+ .slide .poll-fill, .slide .scale-fill { border-radius: 2px; background: var(--accent); }
512
+ .slide .question-cards li { border-radius: 4px; border-left: 6px solid var(--accent); background: var(--surface); }
@@ -41,7 +41,7 @@ Each `---` line starts a new slide. Frontmatter is only needed when you want a s
41
41
  | Field | Default | Description |
42
42
  |---|---|---|
43
43
  | `theme` | `neue` | Theme name |
44
- | `palette` | _(theme default)_ | Colour palette: `swiss`, `nordic`, `neon`, `lagoon`, `paper`, one installed from the theme repository, or one of your own |
44
+ | `palette` | _(theme default)_ | Colour palette: `swiss`, `nordic`, `cobalt`, `greyscale`, `lagoon`, `paper`, one installed from the theme repository, or one of your own |
45
45
  | `appearance` | _(theme default)_ | `light` or `dark`: which variant of the palette the slides use |
46
46
  | `meta.title` | — | Deck title (shown in footer) |
47
47
  | `meta.author` | — | Author name (shown in footer) |
@@ -108,11 +108,13 @@ view is reachable in any build through `?view=reader`.
108
108
  | Key | Description |
109
109
  |---|---|
110
110
  | `neue` | Swiss style: Inter Tight and Inter, large flush-left type, a rule across the top, square accent markers, red on white |
111
- | `aurora` | Northern lights: Plus Jakarta Sans, curtains of light in the palette's accents, night-sky chapter slides, frosted glass |
112
111
  | `minimal` | Nothing but the content: the system's own fonts (no web fonts, works offline), medium weights, space instead of rules and boxes |
113
112
  | `academic` | A lecture: Source Sans and Source Serif, compact type with the heading fixed at the top and the content centred below, theorem and definition blocks, booktabs tables, a footnote rule |
113
+ | `plain` | Black on white and lots of room: Inter, the heading in a column of its own beside the content, the accent only in small places |
114
+ | `work` | An everyday company template: IBM Plex Sans, an accent band along the top, the logo top left, headings in a fixed place, numbered section dividers, a footer with the page number |
115
+ | `glass` | Liquid glass, dark by default: Geist, soft pools of light behind every slide, titles on a frosted pane, glass beads for list markers |
114
116
 
115
- More themes (duet, editorial, fhnw, terminal, sketch) are in the theme
117
+ More themes (aurora, duet, editorial, fhnw, terminal, sketch and others) are in the theme
116
118
  repository: `mdeck themes search` lists them, and
117
119
  `mdeck themes install <theme> <deck>.md` puts one beside the deck.
118
120
 
@@ -128,12 +130,13 @@ Each palette has a light and a dark variant; `appearance:` picks one.
128
130
  | Key | Light | Dark |
129
131
  |---|---|---|
130
132
  | `swiss` | White, black, signal red (neue's default) | Black, white, red |
131
- | `nordic` | Ice grey, navy, steel blue (academic's default) | Polar night, ice blue |
132
- | `neon` | White, violet, magenta (aurora's default) | Black, neon violet and pink |
133
+ | `nordic` | Ice grey, navy, steel blue (academic's and glass's default) | Polar night, ice blue |
134
+ | `cobalt` | Ultramarine on white, vivid orange (work's default) | Midnight blue, bright blue and orange |
135
+ | `greyscale` | Black, white and greys only (plain's default) | The same, inverted |
133
136
  | `lagoon` | Teal on warm stone | Bright teal on teal-black |
134
137
  | `paper` | Off-white, near-black, orange (minimal's default) | Charcoal, soft orange |
135
138
 
136
- More palettes (cobalt, terra, phosphor, pastel, forest, among others)
139
+ More palettes (neon, terra, phosphor, pastel, forest, among others)
137
140
  are in the theme repository; install them with `mdeck palettes install <palette> <deck>.md`.
138
141
 
139
142
  ---
@@ -756,7 +759,7 @@ For `play="auto"` the video pauses and resets to the beginning when you navigate
756
759
  | Attribute | Default | Description |
757
760
  |---|---|---|
758
761
  | `room` | `poll` | Name of the room that collects the answers; unique per poll in a deck. Letters, digits, `.`, `-`, `_` |
759
- | `options` | — | Answers separated by `\|`. Markdown and `$…$` maths, as on a slide (see below) |
762
+ | `options` | — | Answers separated by `\|`. Markdown and `$…$` maths, as on a slide (see below). Or a list inside the tag |
760
763
  | `question` | — | Question text, Markdown and maths like `options`; phones fall back to the slide heading |
761
764
  | `qr` | `true` | `false` leaves out the QR code (shown earlier with `<qrcode join />`) |
762
765
  | `answer` | — | The right answer (several separated by `\|`): a button with a tick outlines its label, bar and count in green, also in the audience window and on paired devices, and each phone says whether its vote was right. `--poll-correct` sets the colour |
@@ -775,7 +778,21 @@ Four more activities take the same `room`, `question` and `qr`:
775
778
 
776
779
  `<qrcode follow />` shows the link for following the slides on phones and laptops (`?view=follow`), with `mdeck run --network` or a hosted deck with a `server` setting; the phones' answer page links to it as well. `<qrcode join />` shows the deck's join code large with its link (`size`, default 420), for a slide that invites everyone once; activities after it can use `qr="false"`. QR codes (`<qrcode>`, activities) are SVG in the slide's `--ink` on a transparent background; `--qr-ink` and `--qr-bg` override the colours.
777
780
 
778
- Options and the question may use Markdown and maths, e.g. `options="$2x$|$x^2$|$\frac{x^3}{3}$"`. A `|` inside a formula belongs to it (`$|x|$` is one option), and `\|` is a bar in plain text. The slide draws maths with KaTeX, the phones as MathML; votes and `answer` use the text as written. The other activities' `question`, and the scale's `low` and `high`, take Markdown and maths too.
781
+ Options and the question may use Markdown and maths, e.g. `options="$2x$|$x^2$|$\frac{x^3}{3}$"`. A `|` inside a formula, `code`, a link or a picture belongs to it (`$|x|$` is one option), and `\|` is a bar in plain text.
782
+
783
+ For options that are more than a word, write them as a list inside the tag instead of `options`, one item each; `[x]` marks a right answer, in place of `answer`:
784
+
785
+ ```markdown
786
+ <poll room="derivative" question="What is $\frac{d}{dx}\, x^2$?">
787
+
788
+ - [x] $2x$
789
+ - [ ] $x^2$
790
+ - [ ] $\frac{x^3}{3}$
791
+
792
+ </poll>
793
+ ```
794
+
795
+ Each item is an option as written, with no `|` to split and nothing to escape; an item over several lines is one option. Plain `-` or `1.` items work too, with `answer` or without a right answer. The tag must hold nothing but the list; otherwise it is left as it is. The slide draws maths with KaTeX, the phones as MathML; votes and `answer` use the text as written. The other activities' `question`, and the scale's `low` and `high`, take Markdown and maths too.
779
796
 
780
797
  The slide shows live bars, the number of answers, a QR code and a short link. Phones never load the deck: they open the server's own answer page at `<server>/<code>`, where the six-digit session code is the same for every poll in the deck. The presenter's screen (the presenter view or a full deck window, never an embedded preview) announces the poll on the current slide with what the phones should show and the deck's look; the server only accepts that from the presenter. Between polls the phones wait. Each device's latest vote counts. The presenter can reset the room (hover over the results).
781
798
 
@@ -22,15 +22,16 @@ The presenter view and the reader view switch palette and light or dark without
22
22
  |---|---|---|
23
23
  | `swiss` | white, black and signal red | black, white and red |
24
24
  | `nordic` | ice grey, deep navy and a cool steel blue | polar night with ice blue |
25
- | `neon` | white with violet and magenta | black with neon violet and pink |
25
+ | `cobalt` | strong ultramarine on white, vivid orange | midnight blue, bright blue and orange |
26
+ | `greyscale` | black, white and greys only, code and callouts too | the same, inverted |
26
27
  | `lagoon` | teal on warm stone, orange second accent | deep teal-black, bright teal |
27
28
  | `paper` | off-white paper and near-black ink with one orange accent | charcoal with a softer orange |
28
29
 
29
30
  `mdeck list palettes` lists them, with any of your own.
30
31
 
31
- Each theme names a default: neue uses `swiss`, academic `nordic`, aurora `neon`.
32
+ Each theme names a default: neue uses `swiss`, academic and glass `nordic`, minimal `paper`, plain `greyscale`, work `cobalt`.
32
33
 
33
- More palettes are in the [theme repository](https://github.com/tilman-schieber/mdeck-themes). The palettes cobalt, terra, phosphor, pastel and forest, built in before mdeck 3.0, are there; installing the theme duet, editorial, terminal or sketch brings its palette along. Graphite and ember were removed because the built-in nordic and paper look almost the same; a deck that names them is told which to use. Install one with `mdeck palettes install <palette> my-talk.md`.
34
+ More palettes are in the [theme repository](https://github.com/tilman-schieber/mdeck-themes). The palettes that used to come with mdeck are there: terra, phosphor, pastel, forest and neon; installing the theme editorial, terminal, sketch or aurora brings its palette along. Graphite and ember were removed because the built-in nordic and paper look almost the same; a deck that names them is told which to use. Install one with `mdeck palettes install <palette> my-talk.md`.
34
35
 
35
36
  ## Colours
36
37
 
@@ -17,16 +17,18 @@ theme: neue
17
17
  | Theme | Look | Default palette |
18
18
  |---|---|---|
19
19
  | `neue` | Swiss style: large flush-left type, rules, red on white | `swiss` |
20
- | `aurora` | Northern lights: curtains of light, night-sky chapters, frosted glass | `neon` |
21
20
  | `minimal` | Nothing but the content: system fonts, calm type, no decoration; works offline | `paper` |
22
21
  | `academic` | A lecture: compact type, the heading fixed at the top and the content centred below, theorem and definition blocks, booktabs tables, a footnote rule | `nordic` |
22
+ | `plain` | Black on white and lots of room: the heading in a column beside the content, the accent only in small places | `greyscale` |
23
+ | `work` | An everyday company template: accent band, logo top left, headings in a fixed place, numbered section dividers, a footer | `cobalt` |
24
+ | `glass` | Liquid glass, dark by default: pools of light, frosted titles, glass list markers | `nordic` |
23
25
 
24
26
  `mdeck list my-talk.md` lists them with their descriptions.
25
27
 
26
28
  More themes are in the [theme repository](https://github.com/tilman-schieber/mdeck-themes):
27
29
  `mdeck themes search` lists them, and `mdeck themes install <theme> my-talk.md`
28
- puts one beside the deck, with its default palette. The themes duet, editorial,
29
- fhnw, terminal and sketch, built in before mdeck 3.0, are there.
30
+ puts one beside the deck, with its default palette. The themes that used to come
31
+ with mdeck are there: aurora, duet, editorial, fhnw, terminal and sketch.
30
32
 
31
33
  ## Theme structure
32
34