mdeck 2.3.0

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

@@ -0,0 +1,489 @@
+/* Neue — Swiss typography.
+   One idea carries the theme: large, tight, flush-left type on a strict
+   grid, structured by rules rather than boxes, and colour used as a surface.
+   Content slides stay calm; chapter slides set their title in the accent,
+   and statement slides invert, so a talk has a rhythm instead of thirty
+   identical pages.
+   Everything takes its colours from the palette's roles (--bg, --ink,
+   --accent, --on-accent …), so every palette works on it. */
+
+.slide {
+  --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--bg));
+}
+
+/* ─────────────────────────────────────────────
+   HEADER / FOOTER: a rule across the top, labels on the grid
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--ink);
+  border-top: 4px solid var(--ink);
+  padding-top: 18px;
+}
+.slide-header .brand { color: var(--ink); }
+.slide-logo {
+  position: absolute;
+  top: var(--pad-y);
+  right: var(--pad-x);
+  height: 128px;
+  width: auto;
+  max-width: 480px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+  transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
+  /* The rule across the top stops before the logo instead of crossing it. */
+  background: var(--bg);
+  padding-left: 32px;
+}
+
+.slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 400;
+  color: var(--muted);
+  padding-top: 24px;
+}
+/* The page number in the display face, on the grid's right edge (the
+   footer's second entry; a title slide's footer only has the author line). */
+.slide-footer > span:last-child:not(:first-child) {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: var(--fs-sub);
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  line-height: 1;
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY HELPERS
+   ───────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  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.95;
+  letter-spacing: -0.045em;
+  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.0;
+  letter-spacing: -0.035em;
+  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.45;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+.meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+}
+em {
+  font-style: normal;
+  color: var(--accent);
+}
+strong { color: var(--ink); font-weight: 600; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — the title fills the lower grid, a bar of accent above it
+   ───────────────────────────────────────────── */
+.slide--title .slide-body {
+  justify-content: flex-end;
+  padding-bottom: 48px;
+}
+.slide--title .title-text::before {
+  content: '';
+  display: block;
+  width: 220px;
+  height: 28px;
+  background: var(--accent);
+  margin-bottom: 56px;
+}
+.slide--title .display {
+  font-size: var(--fs-display);
+  max-width: 1640px;
+}
+.slide--title .subtitle {
+  margin-top: 48px;
+  max-width: 1200px;
+}
+.slide--title.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 80px;
+  align-items: end;
+}
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.65); }
+.slide--title.has-image .title-image {
+  width: 100%;
+  height: 640px;
+  object-fit: cover;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — on the slide's own background, the title in the accent
+   at the bottom left; the number large and whole as a tint on the right,
+   inside the grid between the rule above and the page number below
+   ───────────────────────────────────────────── */
+.slide--chapter em { color: inherit; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
+.slide--chapter .slide-body {
+  justify-content: flex-end;
+  align-items: flex-start;
+  position: static;
+}
+.chapter-num {
+  position: absolute;
+  right: var(--pad-x);
+  bottom: calc(var(--pad-y) + 120px);
+  font-family: var(--font-display);
+  font-size: 600px;
+  font-weight: 700;
+  line-height: 0.74;
+  letter-spacing: -0.06em;
+  color: var(--accent);
+  opacity: 0.12;
+  margin: 0;
+  pointer-events: none;
+}
+.chapter-meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink);
+  margin: 0 0 28px 0;
+}
+.slide--chapter .chapter-title {
+  position: relative;
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 700;
+  line-height: 0.98;
+  letter-spacing: -0.045em;
+  margin: 0 0 48px 0;
+  color: var(--accent);
+  max-width: 1300px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-desc {
+  position: relative;
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--ink-soft);
+  max-width: 1100px;
+  margin: 0;
+}
+.slide--chapter.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 80px;
+  align-items: stretch;
+}
+.slide--chapter.has-image .chapter-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.slide--chapter.has-image .chapter-num { right: auto; left: calc(var(--pad-x) - 40px); }
+.slide--chapter.has-image .chapter-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — the palette's other variant, flush left, the key words in its accent
+   ───────────────────────────────────────────── */
+.slide--focus {
+  /* The palette's other variant (dark on a light deck, light on a dark one),
+     tuned as a whole: its accent stays readable on its own background. */
+  --bg: var(--inverse-bg);
+  --surface: var(--inverse-surface);
+  --ink: var(--inverse-ink);
+  --ink-soft: var(--inverse-ink-soft);
+  --muted: var(--inverse-muted);
+  --rule: var(--inverse-rule);
+  --accent: var(--inverse-accent);
+  --accent-2: var(--inverse-accent-2);
+  --on-accent: var(--inverse-on-accent);
+  --focus-bg: var(--bg);
+  --focus-ink: var(--ink);
+  background: var(--focus-bg);
+  color: var(--focus-ink);
+}
+.slide--focus .slide-header { color: var(--focus-ink); border-top-color: var(--focus-ink); }
+.slide--focus .slide-header .brand { color: var(--focus-ink); }
+.slide--focus .slide-footer { color: color-mix(in oklab, var(--focus-ink) 60%, var(--focus-bg)); }
+.slide--focus .slide-footer > span:last-child:not(:first-child) { color: var(--focus-ink); }
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+  text-align: left;
+}
+.focus-eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 48px 0;
+}
+.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.02;
+  letter-spacing: -0.04em;
+  color: var(--focus-ink);
+  max-width: 1560px;
+  margin: 0;
+  text-wrap: balance;
+  text-align: left;
+}
+.focus-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+.slide--focus em { color: var(--accent); }
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: color-mix(in oklab, var(--focus-ink) 60%, var(--focus-bg));
+  margin: 56px 0 0 0;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT
+   ───────────────────────────────────────────── */
+.image-pane {
+  flex: 1.15;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  overflow: hidden;
+  position: relative;
+}
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(135deg, var(--surface) 0 22px, var(--bg) 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) * 0.95); }
+.text-pane .body-text + .body-text { margin-top: 8px; }
+.text-pane .eyebrow { margin-bottom: 12px; }
+
+/* ─────────────────────────────────────────────
+   LISTS — square markers in the accent, numbers in the display face
+   ───────────────────────────────────────────── */
+.slide-body ul li {
+  font-weight: 400;
+  line-height: 1.32;
+  padding-left: 44px;
+  position: relative;
+}
+.slide-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.42em;
+  width: 14px;
+  height: 14px;
+  background: var(--accent);
+}
+.slide-body ol li {
+  counter-increment: slide-ol;
+  padding-left: 64px;
+  position: relative;
+}
+.slide-body ol li::before {
+  content: counter(slide-ol, decimal-leading-zero);
+  position: absolute;
+  left: 0;
+  top: 0.05em;
+  font-family: var(--font-display);
+  font-size: var(--fs-body);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--accent);
+  line-height: 1.3;
+}
+
+/* ─────────────────────────────────────────────
+   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.2);
+  font-weight: 700;
+  line-height: 1.0;
+  letter-spacing: -0.04em;
+  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.0;
+  letter-spacing: -0.04em;
+  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.1;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  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;
+}
+
+/* ─────────────────────────────────────────────
+   CALLOUTS — a coloured rule on top, no box
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  background: none;
+  border-left: 0;
+  border-top: 6px solid var(--rule);
+  padding: 20px 0 0;
+  margin: 40px 0 0;
+  max-width: 1200px;
+}
+.slide-body .callout-tip { border-top-color: var(--accent); }
+.slide-body .callout-tip .callout-title { color: var(--accent); }
+.slide-body .callout-note { border-top-color: var(--callout-note); }
+.slide-body .callout-important { border-top-color: var(--callout-important); }
+.slide-body .callout-warning { border-top-color: var(--callout-warning); }
+.slide-body .callout-caution { border-top-color: var(--callout-caution); }
+.slide-body .callout-title { letter-spacing: 0.12em; margin-bottom: 10px; }
+.slide-body .callout p { padding-left: 0; color: var(--ink); font-size: var(--fs-body); }
+/* Lecture blocks: theorems under a rule in the accent, definitions in the second */
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) { border-top-color: var(--accent); }
+.slide-body .callout-definition { border-top-color: var(--accent-2); }
+
+/* ─────────────────────────────────────────────
+   CODE BLOCK — square, a rule of accent on top
+   ───────────────────────────────────────────── */
+.code-block {
+  --code-bg: var(--surface, var(--rule));
+  --code-radius: 0;
+  --code-size: 30px;
+  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;
+}
+.code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+
+/* ─────────────────────────────────────────────
+   AUDIENCE QUESTIONS — square bars on the grid
+   ───────────────────────────────────────────── */
+.slide .poll-track, .slide .poll-fill, .slide .scale-track, .slide .scale-fill { border-radius: 0; }
+.slide .poll-track, .slide .scale-track { background: var(--accent-soft); }
+.slide .question-cards li { border-radius: 0; background: var(--accent-soft); }
+.slide .poll-join { border-radius: 0; border-color: var(--ink); border-width: 2px; }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX)
+   ───────────────────────────────────────────── */
+.slide .katex-display {
+  font-size: var(--fs-sub);
+  margin: 48px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

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

@@ -0,0 +1,48 @@
+schema = 1
+kind = "theme"
+id = "sketch"
+title = "Sketch"
+description = "A sketchbook: Caveat and Patrick Hand on dotted paper, marker scribbles, circled numbers, sticky-note callouts and taped photos; a chalkboard in the dark."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "pastel"
+fonts = [
+  "https://fonts.googleapis.com/css2?family=Caveat:wght@500..700&family=Patrick+Hand&family=Courier+Prime:wght@400;700&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) at 1920×1080: handwriting has a small x-height, so the
+# sizes are larger than in the other themes.
+"--fs-display" = "176px"
+"--fs-title" = "140px"
+"--fs-focus" = "84px"
+"--fs-h" = "96px"
+"--fs-sub" = "44px"
+"--fs-body" = "38px"
+"--fs-small" = "27px"
+"--fs-eyebrow" = "32px"
+
+# Spacing
+"--pad-x" = "128px"
+"--pad-y" = "64px"
+"--gap-title" = "40px"
+"--gap-item" = "20px"
+
+# Type families
+"--font-display" = "\"Caveat\", \"Segoe Print\", \"Bradley Hand\", cursive"
+"--font-body" = "\"Patrick Hand\", \"Segoe Print\", \"Comic Sans MS\", cursive"
+"--font-mono" = "\"Courier Prime\", \"Courier New\", monospace"
+
+# 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"