mdeck 3.3.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.
- package/CHANGELOG.md +25 -0
- package/README.md +1 -1
- package/assets/base.css +23 -2
- package/assets/extensions/palettes/cobalt/extension.toml +30 -0
- package/assets/extensions/palettes/greyscale/extension.toml +57 -0
- package/assets/extensions/themes/academic/styles.css +18 -5
- package/assets/extensions/themes/glass/extension.toml +59 -0
- package/assets/extensions/themes/glass/styles.css +754 -0
- package/assets/extensions/themes/minimal/styles.css +16 -4
- package/assets/extensions/themes/neue/styles.css +17 -4
- package/assets/extensions/themes/plain/extension.toml +58 -0
- package/assets/extensions/themes/plain/styles.css +471 -0
- package/assets/extensions/themes/work/extension.toml +57 -0
- package/assets/extensions/themes/work/styles.css +512 -0
- package/docs/reference/authoring.md +50 -10
- package/docs/reference/palettes.md +4 -3
- package/docs/reference/themes.md +5 -3
- package/docs/site/content/appearance.md +24 -10
- package/docs/site/content/audience.md +49 -4
- package/docs/site/content/commands.md +2 -0
- package/docs/site/content/theme-repository.md +7 -7
- package/docs/site/images/themes/academic-dark.webp +0 -0
- package/docs/site/images/themes/academic-light.webp +0 -0
- package/docs/site/images/themes/academic.webp +0 -0
- package/docs/site/images/themes/glass-dark.webp +0 -0
- package/docs/site/images/themes/glass-light.webp +0 -0
- package/docs/site/images/themes/glass.webp +0 -0
- package/docs/site/images/themes/minimal-dark.webp +0 -0
- package/docs/site/images/themes/minimal-light.webp +0 -0
- package/docs/site/images/themes/minimal.webp +0 -0
- package/docs/site/images/themes/neue-dark.webp +0 -0
- package/docs/site/images/themes/neue-light.webp +0 -0
- package/docs/site/images/themes/neue.webp +0 -0
- package/docs/site/images/themes/plain-dark.webp +0 -0
- package/docs/site/images/themes/plain-light.webp +0 -0
- package/docs/site/images/themes/plain.webp +0 -0
- package/docs/site/images/themes/work-dark.webp +0 -0
- package/docs/site/images/themes/work-light.webp +0 -0
- package/docs/site/images/themes/work.webp +0 -0
- package/examples/showcase/slides.md +2 -2
- package/package.json +4 -1
- package/skills/write-slides/SKILL.md +2 -2
- package/src/build/bibliography.js +29 -11
- package/src/build/resultsPlugin.js +77 -0
- package/src/build/slidesPlugin.js +42 -18
- package/src/build/themeCheck.js +2 -1
- package/src/cli/args.js +2 -1
- package/src/cli/index.js +17 -4
- package/src/components/Numeric.jsx +59 -0
- package/src/components/Poll.jsx +72 -57
- package/src/components/Question.jsx +10 -6
- package/src/components/Scale.jsx +13 -8
- package/src/components/WordCloud.jsx +10 -6
- package/src/components/activity.jsx +88 -7
- package/src/components/inlineText.js +63 -0
- package/src/components/numbers.js +39 -0
- package/src/components/poll.css +26 -13
- package/src/core/editDeck.js +5 -6
- package/src/core/icons.js +2 -0
- package/src/core/labels.js +32 -0
- package/src/core/pollList.js +66 -0
- package/src/core/results.js +64 -0
- package/src/core/tags.js +195 -0
- package/src/editor/sampleDeck.js +34 -8
- package/src/extensions/discover.js +2 -2
- package/src/extensions/moved.js +4 -4
- package/src/layouts/layoutApi.jsx +24 -13
- package/src/live/answer/answer.css +19 -0
- package/src/live/answer/answer.js +147 -24
- package/src/live/client.js +51 -6
- package/src/live/roomTag.js +11 -15
- package/src/live/rooms.js +6 -1
- package/src/runtime/citations.js +15 -5
- package/src/runtime/ink/bus.js +7 -13
- package/src/runtime/main.jsx +5 -2
- package/src/runtime/markedSetup.js +3 -0
- package/src/runtime/registry.jsx +2 -0
- package/assets/extensions/palettes/neon/extension.toml +0 -30
- package/assets/extensions/themes/aurora/extension.toml +0 -40
- package/assets/extensions/themes/aurora/styles.css +0 -644
- package/docs/site/images/themes/aurora-dark.webp +0 -0
- package/docs/site/images/themes/aurora-light.webp +0 -0
- 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`, `
|
|
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
|
-
| `
|
|
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 (
|
|
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
|
---
|
|
@@ -592,6 +595,20 @@ labels:
|
|
|
592
595
|
| `follow.tryHere` | Try following here | Mitverfolgen hier ausprobieren |
|
|
593
596
|
| `question.empty` | Answers appear here. | Hier erscheinen die Antworten. |
|
|
594
597
|
| `scale.average` | Average {n} | Durchschnitt {n} |
|
|
598
|
+
| `poll.answeredOf` | {n} of {of} answered | {n} von {of} haben geantwortet |
|
|
599
|
+
| `poll.closed` | Closed | Geschlossen |
|
|
600
|
+
| `poll.several` | Several answers possible. | Mehrere Antworten möglich. |
|
|
601
|
+
| `poll.pickSeveral` | Tap all that apply. | Alle zutreffenden antippen. |
|
|
602
|
+
| `poll.thanksSeveral` | Thanks! You chose {choice}. Tap to change. | Danke! Gewählt: {choice}. Zum Ändern antippen. |
|
|
603
|
+
| `respond.closed` | Closed: no more answers. | Geschlossen: keine weiteren Antworten. |
|
|
604
|
+
| `respond.right` | Right! | Richtig! |
|
|
605
|
+
| `respond.wrong` | Not quite. The right answer: {answer} | Leider nicht. Richtig ist: {answer} |
|
|
606
|
+
| `respond.solution` | The right answer: {answer} | Richtig ist: {answer} |
|
|
607
|
+
| `numeric.placeholder` | A number | Eine Zahl |
|
|
608
|
+
| `numeric.invalid` | Enter a number, such as 0.5 or 1/2. | Eine Zahl eingeben, z. B. 0,5 oder 1/2. |
|
|
609
|
+
| `numeric.sent` | Sent: {value}. Send another to change. | Gesendet: {value}. Zum Ändern eine andere senden. |
|
|
610
|
+
| `numeric.other` | Other | Andere |
|
|
611
|
+
| `numeric.right` | {n} right | {n} richtig |
|
|
595
612
|
|
|
596
613
|
---
|
|
597
614
|
|
|
@@ -742,24 +759,47 @@ For `play="auto"` the video pauses and resets to the beginning when you navigate
|
|
|
742
759
|
| Attribute | Default | Description |
|
|
743
760
|
|---|---|---|
|
|
744
761
|
| `room` | `poll` | Name of the room that collects the answers; unique per poll in a deck. Letters, digits, `.`, `-`, `_` |
|
|
745
|
-
| `options` | — | Answers separated by
|
|
746
|
-
| `question` | — | Question text
|
|
762
|
+
| `options` | — | Answers separated by `\|`. Markdown and `$…$` maths, as on a slide (see below). Or a list inside the tag |
|
|
763
|
+
| `question` | — | Question text, Markdown and maths like `options`; phones fall back to the slide heading |
|
|
747
764
|
| `qr` | `true` | `false` leaves out the QR code (shown earlier with `<qrcode join />`) |
|
|
748
|
-
| `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. `--poll-correct` sets the colour |
|
|
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 |
|
|
766
|
+
| `multiple` | — | Each phone may pick several options; the slide and the phones say so. A vote is then the list of options picked, and is right when it is exactly the `answer` options |
|
|
767
|
+
| `buttons` | — | `letters` puts A, B, C … before the options, and the phones show only those; `numbers` does the same with 1, 2, 3 …. For options better read on the slide, such as pictures (`options="\|"`) |
|
|
749
768
|
| `results` | — | `hidden` starts with the results hidden, e.g. for peer instruction. A button with an eye shows or hides them (bars and counts) at any time, also in the audience window and on paired devices. Hidden, the audience window shows no bars; the presenter's own screens show them faint |
|
|
750
769
|
|
|
751
|
-
|
|
770
|
+
Four more activities take the same `room`, `question` and `qr`:
|
|
752
771
|
|
|
753
772
|
| Tag | Attributes | Phones | Slide |
|
|
754
773
|
|---|---|---|---|
|
|
755
774
|
| `<scale>` | `min` (1), `max` (5), `low`, `high` | One button per number, `low`/`high` as labels | Count per number and the average; latest answer per device |
|
|
775
|
+
| `<numeric>` | `answer`, `tolerance` (0), `limit` (6), `placeholder`, `results` | A number field: `0.5`, `0,5`, `1/2`, `1e-3`; latest answer per device | The most frequent answers as bars, the rest as Other; with `answer`, the tick marks the right ones, counts them and tells each phone |
|
|
756
776
|
| `<wordcloud>` | `placeholder`, `limit` (60), `height` (520) | Text field, up to 40 characters, repeatable | A packed word cloud (d3-cloud): size by frequency, some words upright, case-insensitive |
|
|
757
777
|
| `<question>` | `placeholder`, `limit` (8) | Text field, up to 200 characters, repeatable | The newest answers as cards |
|
|
758
778
|
|
|
759
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.
|
|
760
780
|
|
|
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.
|
|
796
|
+
|
|
761
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).
|
|
762
798
|
|
|
799
|
+
Every activity has a lock button that closes it: answers after that do not count, and the phones say it is closed until it opens again. Polls and `<numeric>` also have the eye that hides or shows the results. Below the results, polls, scales and `<numeric>` count “12 of 31 answered” while phones are connected (people following the slides count as phones). The lock, the eye and the tick reach every screen of the talk, also after a reload: they are kept in the activity room's state on the server, which only the presenter may set, and phones read it there. Reset clears the answers and opens the activity again.
|
|
800
|
+
|
|
801
|
+
While `mdeck run` runs, the answers are kept beside the deck in `<slides>.results.json`: per activity room, each answer with its time, the phones numbered per room (their ids are not kept), and, once an activity was closed, only the answers that counted. Reset takes a room out of the file; a new, empty server leaves the file alone. Builds, `mdeck send` and `mdeck pdf` show the kept answers where no room server answers (`--no-results` leaves them out), and `mdeck results [slides.md] [-o file.csv]` prints them as CSV: `room,phone,at,answer`, several picks joined by `|`.
|
|
802
|
+
|
|
763
803
|
`--no-polls` leaves slides with an activity or a join code (`<qrcode join />`) out of `mdeck send`, `mdeck build --reader` and `mdeck pdf`; without it they show as a record of the talk. Saved drawings follow the remaining slides.
|
|
764
804
|
|
|
765
805
|
Rooms run inside `mdeck run` (add `--network` so phones can reach it) or on a server started with `mdeck server`, set in the deck:
|
|
@@ -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
|
-
| `
|
|
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`,
|
|
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
|
|
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
|
|
package/docs/reference/themes.md
CHANGED
|
@@ -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
|
|
29
|
-
|
|
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
|
|