mdeck 2.3.0

package/assets/extensions/themes/duet/styles.css

@@ -0,0 +1,573 @@
+/* Duet — two voices.
+   Two accents for contrasting ideas, on every slide: the footer rule changes
+   colour halfway, list markers take turns, a split slide is a dialogue of two
+   colour fields, and a chapter slide is cut diagonally between the two.
+   Headings are heavy, tight slab serif; body text a quiet grotesque.
+   The second accent is only guaranteed 3:1 on the background, so it carries
+   headings, markers and surfaces, never body text, and nothing is written on
+   it except the background colour. Colours come only from the palette roles. */
+
+.slide {
+  --tint-1: color-mix(in oklab, var(--accent) 9%, var(--bg));
+  --tint-2: color-mix(in oklab, var(--accent-2) 12%, var(--bg));
+}
+
+/* ─────────────────────────────────────────────
+   HEADER / FOOTER — the footer rule is two-tone, split at the middle
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.slide-header .brand   { color: var(--muted); }
+.slide-header .section { color: var(--accent); font-weight: 700; }
+
+.slide-logo {
+  position: absolute;
+  top: var(--pad-y);
+  right: var(--pad-x);
+  height: 120px;
+  width: auto;
+  max-width: 480px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+  transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
+}
+
+.slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 400;
+  color: var(--muted);
+  border-top: 4px solid;
+  border-image: linear-gradient(to right, var(--accent) 50%, var(--accent-2) 50%) 1;
+  padding-top: 24px;
+}
+/* The page number in the slab face (a title slide's footer has only the author line). */
+.slide-footer > span:last-child:not(:first-child) {
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: var(--ink);
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY HELPERS
+   ───────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 var(--gap-title) 0;
+}
+.display {
+  font-family: var(--font-display);
+  font-size: var(--fs-display);
+  font-weight: 700;
+  line-height: 0.98;
+  letter-spacing: -0.03em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+.title {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: -0.025em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+.subtitle {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+.body-text {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+.meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+}
+
+/* Emphasis: the first voice in running text, the second in large type. */
+em {
+  font-style: normal;
+  font-weight: 500;
+  color: var(--accent);
+}
+:is(h1, h2, .display, .title, .chapter-title, .focus-content) em {
+  font-weight: inherit;
+  color: var(--accent-2);
+}
+strong { color: var(--ink); font-weight: 700; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — the boldest slide: all of it in the first accent, a band
+   of the second slanted like the chapter seam, the headline in the
+   accent's own text colour
+   ───────────────────────────────────────────── */
+.slide--title {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.slide--title::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--accent-2);
+  clip-path: polygon(85% 0, 91% 0, 81% 100%, 75% 100%);
+  pointer-events: none;
+}
+.slide--title > :not(.slide-logo, .slide-ink) { position: relative; z-index: 1; }
+.slide--title .slide-logo { z-index: 1; }
+.slide--title :is(.slide-header, .slide-header .brand, .slide-footer) { color: var(--on-accent); }
+.slide--title .slide-footer { border-image-source: none; border-top-color: transparent; }
+.slide--title .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+/* The duet mark: a bar in the slide's text colour, one in the second accent. */
+.slide--title .title-text::before {
+  content: '';
+  display: block;
+  width: 244px;
+  height: 52px;
+  background:
+    linear-gradient(var(--on-accent), var(--on-accent)) 0 0 / 180px 20px no-repeat,
+    linear-gradient(var(--accent-2), var(--accent-2)) 64px 32px / 180px 20px no-repeat;
+  margin-bottom: 64px;
+}
+.slide--title .display {
+  font-size: var(--fs-display);
+  color: var(--on-accent);
+  /* Clear of the band on the right. */
+  max-width: 1280px;
+}
+/* The second accent is not readable on the first: emphasis keeps the
+   slide's text colour and is underlined in the second accent. */
+.slide--title :is(.display, .subtitle) em {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--accent-2);
+  text-decoration-thickness: 0.09em;
+  text-underline-offset: 0.12em;
+  text-decoration-skip-ink: none;
+}
+.slide--title .subtitle {
+  margin-top: 48px;
+  max-width: 1100px;
+  color: var(--on-accent);
+}
+.slide--title.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 80px;
+  align-items: center;
+}
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.65); }
+.slide--title.has-image .title-image {
+  width: 100%;
+  height: 600px;
+  object-fit: cover;
+}
+.slide--title.has-image .display { max-width: none; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — cut diagonally: a field of the first accent with the
+   number, a seam of the second, and the title on the background
+   ───────────────────────────────────────────── */
+.slide--chapter:not(.has-image)::before,
+.slide--chapter:not(.has-image)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.slide--chapter:not(.has-image)::before {
+  background: var(--accent);
+  clip-path: polygon(0 0, 40% 0, 30% 100%, 0 100%);
+}
+.slide--chapter:not(.has-image)::after {
+  background: var(--accent-2);
+  clip-path: polygon(40% 0, 43% 0, 33% 100%, 30% 100%);
+}
+.slide--chapter > * { position: relative; z-index: 1; }
+.slide--chapter > .slide-ink { position: absolute; z-index: 50; }
+.slide--chapter:not(.has-image) .slide-header .brand,
+.slide--chapter:not(.has-image) .slide-footer > span:first-child { color: var(--on-accent); }
+.slide--chapter:not(.has-image) .slide-footer { border-image-source: none; border-top-color: transparent; }
+
+.slide--chapter .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+  position: static;
+}
+/* The title starts clear of the seam (the slide is 1920 px wide). */
+.slide--chapter:not(.has-image) .slide-body { padding-left: calc(880px - var(--pad-x)); }
+.chapter-num {
+  position: absolute;
+  left: var(--pad-x);
+  bottom: calc(var(--pad-y) + 110px);
+  font-family: var(--font-display);
+  font-size: 360px;
+  font-weight: 700;
+  line-height: 0.75;
+  letter-spacing: -0.02em;
+  color: var(--on-accent);
+  margin: 0;
+  pointer-events: none;
+}
+.chapter-meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--accent-2);
+  margin: 0 0 28px 0;
+}
+.slide--chapter .chapter-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 700;
+  line-height: 1.0;
+  letter-spacing: -0.03em;
+  margin: 0 0 40px 0;
+  color: var(--ink);
+  max-width: 900px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-desc {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--ink-soft);
+  max-width: 860px;
+  margin: 0;
+}
+.slide--chapter.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 80px;
+  align-items: center;
+}
+.slide--chapter.has-image .chapter-num {
+  position: static;
+  font-size: 200px;
+  color: var(--accent);
+  margin-bottom: 24px;
+}
+.slide--chapter.has-image .chapter-image {
+  width: 100%;
+  height: 100%;
+  max-height: 760px;
+  object-fit: cover;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — a statement beside a thick bar in each accent
+   ───────────────────────────────────────────── */
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+.focus-eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 48px 96px;
+}
+.focus-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-left: 96px;
+  box-sizing: border-box;
+}
+/* The bars stand beside the statement only, not beside code or a list below it. */
+.focus-content > :is(h1, h2, h3, p, blockquote):first-child { position: relative; }
+.focus-content > :is(h1, h2, h3, p, blockquote):first-child::before {
+  content: '';
+  position: absolute;
+  left: -96px;
+  top: 0.08em;
+  bottom: 0.08em;
+  width: 50px;
+  background:
+    linear-gradient(var(--accent), var(--accent)) 0 0 / 18px 100% no-repeat,
+    linear-gradient(var(--accent-2), var(--accent-2)) 32px 0 / 18px 100% no-repeat;
+}
+.focus-statement,
+.slide--focus .focus-content h1,
+.slide--focus .focus-content p {
+  font-family: var(--font-display);
+  font-size: var(--fs-focus);
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: -0.025em;
+  color: var(--ink);
+  max-width: 1450px;
+  margin: 0;
+  text-wrap: balance;
+}
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 56px 0 0 96px;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT
+   ───────────────────────────────────────────── */
+.image-pane {
+  flex: 1.15;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--tint-1);
+  overflow: hidden;
+  position: relative;
+}
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(135deg, var(--tint-1) 0 22px, var(--tint-2) 22px 44px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-placeholder span {
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 22px;
+  color: var(--muted);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--bg);
+  padding: 14px 20px;
+  border: 1px solid var(--rule);
+}
+.text-pane .title { font-size: calc(var(--fs-h) * 1.05); }
+.text-pane .body-text + .body-text { margin-top: 8px; }
+.text-pane .eyebrow { margin-bottom: 12px; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: SPLIT — a dialogue: two colour fields side by side, the heading
+   above the seam, each column's first heading in its side's accent
+   ───────────────────────────────────────────── */
+.slide--split .split-columns { gap: 0; }
+.slide--split .split-left,
+.slide--split .split-right {
+  padding: 48px 56px;
+  justify-content: safe center;
+}
+.slide--split .split-left  { background: var(--tint-1); box-shadow: inset 0 6px 0 var(--accent); }
+.slide--split .split-right { background: var(--tint-2); box-shadow: inset 0 6px 0 var(--accent-2); }
+.slide--split .split-left  > :is(h1, h2, h3):first-child { color: var(--accent); }
+.slide--split .split-right > :is(h1, h2, h3):first-child { color: var(--accent-2); }
+.slide--split :is(.split-left, .split-right) > :last-child { margin-bottom: 0; }
+/* In a field, code needs no box of its own: the field is its surface. */
+.slide--split .code-block {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+/* ─────────────────────────────────────────────
+   LISTS — markers take turns between the two accents
+   ───────────────────────────────────────────── */
+.slide-body ul li {
+  font-weight: 400;
+  line-height: 1.32;
+  padding-left: 48px;
+  position: relative;
+}
+.slide-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 24px;
+  height: 7px;
+  background: var(--accent);
+}
+.slide-body ol li {
+  counter-increment: slide-ol;
+  padding-left: 56px;
+  position: relative;
+}
+.slide-body ol li::before {
+  content: counter(slide-ol);
+  position: absolute;
+  left: 0;
+  top: -0.04em;
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-body) * 1.15);
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1.3;
+}
+.slide-body ul > li:nth-child(even)::before { background: var(--accent-2); }
+.slide-body ol > li:nth-child(even)::before { color: var(--accent-2); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FULL-BLEED IMAGE
+   ───────────────────────────────────────────── */
+.slide--full-bleed-image.has-overlay .slide-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+}
+.slide--full-bleed-image .overlay-title {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-h) * 1.15);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: -0.025em;
+  color: #fff;
+  margin: 0;
+  max-width: 1300px;
+  text-wrap: balance;
+}
+
+/* ─────────────────────────────────────────────
+   GENERIC / CONTENT SLIDE
+   ───────────────────────────────────────────── */
+.slide-body h1 {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  line-height: 1.02;
+  letter-spacing: -0.025em;
+  color: var(--ink);
+  margin: 0 0 var(--gap-title) 0;
+  max-width: 1500px;
+  text-wrap: balance;
+}
+.slide-body h2 {
+  font-family: var(--font-display);
+  font-size: var(--fs-sub);
+  font-weight: 700;
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  color: var(--accent-2);
+  margin: 0 0 var(--gap-item) 0;
+}
+.slide-body p {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--ink-soft);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: pretty;
+}
+.slide-body > p { max-width: 1500px; }
+
+/* ─────────────────────────────────────────────
+   CALLOUTS — a tinted field with its title as a tab: tips (and notes) in
+   the first accent, warnings (and cautions) in the second
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  --tab: var(--accent);
+  --tab-ink: var(--on-accent);
+  background: var(--tint-1);
+  border-left: 0;
+  border-top: 6px solid var(--tab);
+  padding: 0 36px 28px;
+  margin: 44px 0 0;
+  max-width: 1300px;
+}
+.slide-body :is(.callout-warning, .callout-caution, .callout-definition) {
+  --tab: var(--accent-2);
+  --tab-ink: var(--bg);
+  background: var(--tint-2);
+}
+/* Lecture blocks: theorems in the first voice, definitions in the second (above) */
+.slide-body .callout:is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-definition) .callout-title { color: var(--tab-ink); }
+.slide-body .callout .callout-title {
+  display: inline-block;
+  background: var(--tab);
+  color: var(--tab-ink);
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  padding: 6px 18px 8px;
+  margin: 0 0 20px;
+}
+.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
+
+/* ─────────────────────────────────────────────
+   CODE BLOCK — a tinted surface with a rule of the first accent on top
+   ───────────────────────────────────────────── */
+.code-block {
+  --code-bg: var(--surface);
+  --code-radius: 0;
+  --code-size: 28px;
+  background: var(--code-bg);
+  border-radius: 0;
+  border-top: 6px solid var(--accent);
+  padding: 40px 48px;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--code-size);
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  line-height: 1.6;
+  color: var(--ink);
+}
+.code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+/* ─────────────────────────────────────────────
+   AUDIENCE QUESTIONS — bars take turns between the two accents
+   ───────────────────────────────────────────── */
+.slide .poll-track, .slide .poll-fill, .slide .scale-track, .slide .scale-fill { border-radius: 0; }
+.slide .poll-track, .slide .scale-track { background: var(--tint-1); }
+.slide .poll-row:nth-child(even) .poll-track { background: var(--tint-2); }
+.slide .poll-row:nth-child(even) .poll-fill,
+.slide .scale-column:nth-child(even) .scale-fill { background: var(--accent-2); }
+.slide .question-cards li { border-radius: 0; background: var(--tint-1); }
+.slide .question-cards li:nth-child(even) { background: var(--tint-2); border-left-color: var(--accent-2); }
+.slide .question-cards li:first-child { border-left-color: var(--accent); }
+.slide .poll-join { border-radius: 0; border: 3px solid var(--accent); }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX)
+   ───────────────────────────────────────────── */
+.slide .katex-display {
+  font-size: var(--fs-sub);
+  margin: 48px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

package/assets/extensions/themes/editorial/extension.toml

@@ -0,0 +1,46 @@
+schema = 1
+kind = "theme"
+id = "editorial"
+title = "Editorial"
+description = "A magazine spread: Newsreader headlines, Lora text, drop caps, pull quotes and Roman chapter numerals."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "terra"
+fonts = [
+  "https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..800;1,6..72,400..800&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap",
+]
+
+[files]
+styles = "styles.css"
+
+# Type, spacing and fonts used by styles.css; colours come from the palette.
+# Deck settings (params) override these.
+[tokens]
+
+# Type scale (px) — projection-appropriate at 1920×1080
+"--fs-display" = "148px"
+"--fs-title" = "112px"
+"--fs-focus" = "80px"
+"--fs-h" = "68px"
+"--fs-sub" = "40px"
+"--fs-body" = "32px"
+"--fs-small" = "24px"
+"--fs-eyebrow" = "22px"
+
+# Spacing
+"--pad-x" = "128px"
+"--pad-y" = "72px"
+"--gap-title" = "48px"
+"--gap-item" = "24px"
+
+# Type families
+"--font-display" = "\"Newsreader\", Georgia, \"Times New Roman\", serif"
+"--font-body" = "\"Lora\", Georgia, \"Times New Roman\", serif"
+
+# Settings authors can change under `params:` in the deck; each points at a token above.
+[params.fontDisplay]
+token = "--font-display"
+title = "Display font"
+
+[params.fontBody]
+token = "--font-body"
+title = "Body font"