mdeck 2.3.0

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

@@ -0,0 +1,631 @@
+/* Academic — a lecture.
+   Source Sans for reading from the back of the room, Source Serif for
+   theorem statements and quotations, Source Code Pro for code. Slides start
+   at the top and hold more than in the other themes: a definition, a
+   formula, a few points. The conventions come from papers and lecture
+   notes: numbered sections, theorem and definition blocks, proofs that end
+   with a square, booktabs tables and a short rule above the footnotes.
+   Everything takes its colours from the palette's roles (--bg, --ink,
+   --accent …), so every palette works on it. */
+
+.slide {
+  --hairline: color-mix(in oklab, var(--ink) 18%, var(--bg));
+  --accent-soft: color-mix(in oklab, var(--accent) 10%, var(--bg));
+  --gap-col: 72px;
+}
+
+/* ─────────────────────────────────────────────
+   RUNNING HEAD AND FOOT: a hairline under the organisation and the
+   section; the slide number at the foot
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--hairline);
+  padding-bottom: 14px;
+  min-height: 1.4em;
+}
+.slide-header .brand { color: var(--ink); }
+/* The section, as a running head: § Foundations */
+.slide-header > span:last-child:not(.brand):not(:empty) { color: var(--accent); }
+.slide-header > span:last-child:not(.brand):not(:empty)::before {
+  content: '\00A7\00A0';
+  font-family: var(--font-serif);
+  font-weight: 400;
+}
+
+.slide-logo {
+  position: absolute;
+  top: calc(var(--pad-y) - 20px);
+  right: var(--pad-x);
+  height: 72px;
+  width: auto;
+  max-width: 320px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+}
+
+.slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+  padding-top: 16px;
+  font-variant-numeric: tabular-nums;
+}
+.slide-footer > span:last-child:not(:first-child) {
+  font-weight: 600;
+  color: var(--ink-soft);
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY HELPERS
+   ───────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0;
+}
+
+.display {
+  font-family: var(--font-display);
+  font-size: var(--fs-display);
+  font-weight: 700;
+  line-height: 1.04;
+  letter-spacing: -0.015em;
+  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.1;
+  letter-spacing: -0.01em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.subtitle {
+  font-family: var(--font-serif);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.35;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+
+.body-text {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  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);
+}
+
+em { font-style: italic; color: var(--accent); }
+strong { color: var(--ink); font-weight: 700; }
+
+/* ─────────────────────────────────────────────
+   CONTENT SLIDES — the heading keeps its place at the top, like a frame
+   title, and what follows is centred in the room below it. Content that
+   does not fit starts right under the heading (the auto margins give way).
+   ───────────────────────────────────────────── */
+.slide:not(.slide--title, .slide--chapter, .slide--focus, .slide--image-text, .slide--full-bleed-image) .slide-body {
+  justify-content: flex-start;
+  padding-top: 36px;
+}
+.slide:not(.slide--title, .slide--chapter, .slide--focus, .slide--image-text, .slide--full-bleed-image) .slide-body > :first-child:not(h1),
+.slide:not(.slide--title, .slide--chapter, .slide--focus, .slide--image-text, .slide--full-bleed-image) .slide-body > h1:first-child + * {
+  margin-top: auto;
+}
+.slide:not(.slide--title, .slide--chapter, .slide--focus, .slide--image-text, .slide--full-bleed-image) .slide-body > :last-child:not(h1) {
+  margin-bottom: auto;
+}
+.slide-body h1 {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin: 0 0 var(--gap-title) 0;
+  max-width: 1600px;
+  text-wrap: balance;
+}
+.slide-body h2 {
+  font-family: var(--font-display);
+  font-size: var(--fs-sub);
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--accent);
+  margin: var(--gap-item) 0 var(--gap-item) 0;
+  text-wrap: balance;
+}
+.slide-body h1 + h2 { margin-top: calc(var(--gap-title) * -0.5); }
+.slide-body p {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: 1.5;
+  color: var(--ink-soft);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: pretty;
+}
+.slide-body > p { max-width: 1560px; }
+.slide-body > :is(ul, ol, p, table, .callout, .code-block, .katex-display, .columns) + :is(ul, ol, table, .callout, .code-block, .columns) {
+  margin-top: calc(var(--gap-item) * 1.5);
+}
+
+/* ─────────────────────────────────────────────
+   LISTS — a small triangle in the accent; numbers in the accent, set in
+   the text size, so long lists stay compact
+   ───────────────────────────────────────────── */
+.slide-body ul, .slide-body ol { max-width: 1560px; }
+.slide-body ul li,
+.slide-body ol li {
+  line-height: 1.45;
+  padding-left: 44px;
+}
+.slide-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 0.5em;
+  width: 0.42em;
+  height: 0.5em;
+  background: var(--accent);
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+.slide-body ol li::before {
+  content: counter(slide-ol) '.';
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: 700;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+}
+/* Second level: an en dash, a little smaller */
+.slide-body li :is(ul, ol) { margin-top: 8px; gap: 6px; font-size: 0.88em; }
+.slide-body li ul li::before {
+  width: 0.5em;
+  height: 2px;
+  top: 0.72em;
+  background: var(--muted);
+  clip-path: none;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — a title page: the title, a short rule, the subtitle in
+   the serif italic, and the author and date beneath them
+   ───────────────────────────────────────────── */
+.slide--title .slide-body {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.slide--title .title-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.slide--title .display {
+  font-size: var(--fs-display);
+  line-height: 1.04;
+  margin: 0;
+  max-width: 1500px;
+}
+.slide--title .display::after {
+  content: '';
+  display: block;
+  width: 160px;
+  height: 4px;
+  margin: 48px auto 0;
+  background: var(--accent);
+}
+.slide--title .subtitle {
+  margin-top: 44px;
+  max-width: 1240px;
+}
+/* The author line moves up under the title, like a paper's byline. */
+.slide--title .slide-footer {
+  justify-content: center;
+  font-size: calc(var(--fs-body) * 0.9);
+  color: var(--ink-soft);
+  padding-bottom: 72px;
+}
+/* TITLE + image: the title page on the left, the picture on the right */
+.slide--title.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  column-gap: 96px;
+  align-items: center;
+  text-align: left;
+}
+.slide--title.has-image .title-text { align-items: flex-start; }
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.82); }
+.slide--title.has-image .display::after { margin-left: 0; }
+.slide--title.has-image .title-image { width: 100%; height: 100%; max-height: 720px; object-fit: contain; }
+.slide--title.has-image .slide-footer { justify-content: flex-start; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — a section opening: the number beside a rule in the
+   accent, the label, the title and a sentence about what follows
+   ───────────────────────────────────────────── */
+.slide--chapter .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+.slide--chapter .chapter-content {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 56px;
+  align-items: start;
+  align-self: stretch;
+}
+.chapter-num {
+  grid-row: 1 / span 4;
+  align-self: stretch;
+  font-family: var(--font-display);
+  font-size: 200px;
+  font-weight: 300;
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+  color: var(--accent);
+  padding-right: 56px;
+  border-right: 4px solid var(--accent);
+  font-variant-numeric: lining-nums;
+  user-select: none;
+}
+.chapter-meta {
+  grid-column: 2;
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 6px 0 20px 0;
+}
+.slide--chapter .chapter-title {
+  grid-column: 2;
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 700;
+  line-height: 1.04;
+  letter-spacing: -0.015em;
+  margin: 0 0 28px 0;
+  color: var(--ink);
+  max-width: 1300px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-desc {
+  grid-column: 2;
+  font-family: var(--font-serif);
+  font-size: var(--fs-sub);
+  font-style: italic;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  max-width: 1100px;
+  margin: 0;
+}
+.slide--chapter .chapter-content > :not(.chapter-num, .chapter-meta, .chapter-title, .chapter-desc) { grid-column: 2; }
+.slide--chapter.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1.3fr 1fr;
+  column-gap: 96px;
+  align-items: center;
+}
+.slide--chapter.has-image .chapter-num { font-size: 150px; }
+.slide--chapter.has-image .chapter-title { font-size: calc(var(--fs-title) * 0.8); }
+.slide--chapter.has-image .chapter-image { width: 100%; height: 100%; max-height: 760px; object-fit: cover; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — a key result, set like a theorem: the label as the
+   block's heading, the statement in the serif italic
+   ───────────────────────────────────────────── */
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: stretch;
+}
+.slide--focus .slide-body > * {
+  background: var(--accent-soft);
+  border-left: 8px solid var(--accent);
+  padding-left: 64px;
+  padding-right: 80px;
+}
+.slide--focus .slide-body > :first-child { padding-top: 48px; }
+.slide--focus .slide-body > :last-child { padding-bottom: 48px; }
+.focus-eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  padding-bottom: 24px;
+}
+.focus-content { display: flex; flex-direction: column; gap: var(--gap-item); }
+.focus-statement,
+.slide--focus .focus-content h1,
+.slide--focus .focus-content p {
+  font-family: var(--font-serif);
+  font-size: var(--fs-focus);
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.3;
+  color: var(--ink);
+  max-width: 1500px;
+  margin: 0;
+  text-wrap: balance;
+}
+.slide--focus .focus-content em { font-style: normal; }
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 600;
+  color: var(--muted);
+  text-align: right;
+  padding-top: 28px;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT — a figure in a hairline frame
+   ───────────────────────────────────────────── */
+.slide--image-text .slide-body { gap: 80px; padding-top: 36px; }
+.image-pane {
+  flex: 1.1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  overflow: hidden;
+  position: relative;
+}
+.image-placeholder {
+  background: repeating-linear-gradient(135deg, var(--surface) 0 20px, var(--bg) 20px 40px);
+}
+.image-placeholder span {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+  background: var(--bg);
+  padding: 12px 20px;
+  border: 1px solid var(--rule);
+}
+.text-pane .eyebrow { margin-bottom: -4px; }
+.text-pane .title { font-size: var(--fs-h); color: var(--ink); margin: 0 0 8px 0; }
+
+/* The split layout's shared heading stays at the top. */
+.split-heading { margin-bottom: var(--gap-title); }
+.split-columns { gap: var(--gap-col); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FULL-BLEED IMAGE
+   ───────────────────────────────────────────── */
+.slide--full-bleed-image.has-overlay .slide-bg::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
+}
+.slide--full-bleed-image .overlay-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  line-height: 1.1;
+  color: #fff;
+  margin: 0;
+  max-width: 1300px;
+  text-wrap: balance;
+}
+.slide--full-bleed-image .overlay-title em { color: inherit; }
+
+/* ─────────────────────────────────────────────
+   BLOCKS — callouts as the blocks of lecture notes. Theorems, lemmas
+   and corollaries in the accent with the statement in the serif italic;
+   definitions in the second accent; examples and remarks quieter. A
+   proof has no box: it opens with "Proof." and ends with a square.
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  --block: var(--muted);
+  background: color-mix(in oklab, var(--block) 7%, var(--bg));
+  border: 0;
+  border-left: 6px solid var(--block);
+  border-radius: 0 4px 4px 0;
+  padding: 0;
+  margin: var(--gap-item) 0;
+  max-width: 1560px;
+  overflow: hidden;
+}
+.slide-body .callout-title {
+  font-family: var(--font-body);
+  font-size: calc(var(--fs-body) * 0.9);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--ink);
+  background: color-mix(in oklab, var(--block) 16%, var(--bg));
+  padding: 10px 28px;
+  margin: 0;
+}
+.slide-body .callout > :not(.callout-title) { padding: 0 28px; }
+.slide-body .callout > .callout-title + * { margin-top: 16px; }
+.slide-body .callout > :last-child { margin-bottom: 18px; }
+.slide-body .callout p { color: var(--ink); }
+.slide-body .callout :is(ul, ol) { gap: 8px; }
+
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition, .callout-tip, .callout-important) { --block: var(--accent); }
+.slide-body :is(.callout-definition) { --block: var(--accent-2); }
+.slide-body .callout-note { --block: var(--callout-note); }
+.slide-body .callout-warning { --block: var(--callout-warning); }
+.slide-body .callout-caution { --block: var(--callout-caution); }
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition) > :not(.callout-title) {
+  font-family: var(--font-serif);
+  font-style: italic;
+}
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary, .callout-proposition) p { font-family: var(--font-serif); font-size: calc(var(--fs-body) * 0.96); }
+
+/* Examples and remarks: no fill, the label in small capitals */
+.slide-body :is(.callout-example, .callout-remark) {
+  background: none;
+  border-left-width: 3px;
+}
+.slide-body :is(.callout-example, .callout-remark) .callout-title {
+  background: none;
+  padding-bottom: 0;
+  font-size: var(--fs-eyebrow);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.slide-body :is(.callout-example, .callout-remark) > .callout-title + * { margin-top: 6px; }
+
+/* Proof. … ∎ */
+.slide-body .callout.callout-proof {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+}
+.slide-body .callout.callout-proof > * { padding: 0; }
+.slide-body .callout.callout-proof .callout-title {
+  float: left;
+  background: none;
+  padding: 0;
+  margin-right: 0.35em;
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-style: italic;
+  line-height: 1.5;
+  font-weight: 700;
+  color: var(--ink);
+}
+.slide-body .callout.callout-proof .callout-title::after { content: '.'; }
+.slide-body .callout.callout-proof > .callout-title + * { margin-top: 0; }
+.slide-body .callout.callout-proof p { padding-left: 0; color: var(--ink-soft); }
+.slide-body .callout.callout-proof > :last-child { margin-bottom: 0; }
+.slide-body .callout.callout-proof > :last-child::after {
+  content: '\220E';
+  margin-left: 0.6em;
+  color: var(--ink);
+}
+
+/* ─────────────────────────────────────────────
+   TABLES — booktabs: heavy rules at top and bottom, a lighter one under
+   the head, no vertical lines
+   ───────────────────────────────────────────── */
+.slide-body table {
+  width: auto;
+  align-self: flex-start;
+  min-width: 60%;
+  font-size: calc(var(--fs-body) * 0.92);
+  font-variant-numeric: tabular-nums;
+  border-top: 3px solid var(--ink);
+  border-bottom: 3px solid var(--ink);
+}
+.slide-body th,
+.slide-body td {
+  padding: 10px 28px 10px 0;
+  border: 0;
+}
+.slide-body th {
+  font-weight: 700;
+  color: var(--ink);
+  border-bottom: 1.5px solid var(--ink);
+  padding-top: 14px;
+}
+.slide-body tbody tr:first-child td { padding-top: 14px; }
+.slide-body tbody tr:last-child td { padding-bottom: 14px; }
+
+/* ─────────────────────────────────────────────
+   FOOTNOTES — a short rule above them, as on a printed page
+   ───────────────────────────────────────────── */
+.slide-footnotes {
+  font-family: var(--font-body);
+  border-top: 0;
+  position: relative;
+  padding-top: 14px;
+}
+.slide-footnotes::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 280px;
+  height: 1px;
+  background: var(--ink-soft);
+}
+.slide-footnotes li { line-height: 1.4; }
+.slide-body sup { color: var(--accent); font-weight: 600; }
+
+/* ─────────────────────────────────────────────
+   CODE — a listing on the surface, a rule at its side
+   ───────────────────────────────────────────── */
+.code-block {
+  --code-bg: var(--surface);
+  --code-radius: 4px;
+  --code-size: 24px;
+  background: var(--code-bg);
+  border-radius: 4px;
+  border-left: 4px solid var(--hairline);
+  padding: 24px 32px;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--code-size);
+  font-family: var(--font-mono);
+  line-height: 1.55;
+}
+.code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+.slide-body :not(pre) > code {
+  font-family: var(--font-mono);
+  font-size: 0.88em;
+  background: var(--surface);
+  padding: 0.05em 0.3em;
+  border-radius: 3px;
+}
+
+/* ─────────────────────────────────────────────
+   AUDIENCE QUESTIONS
+   ───────────────────────────────────────────── */
+.slide .poll-track, .slide .poll-fill, .slide .scale-track, .slide .scale-fill { border-radius: 2px; }
+.slide .poll-track, .slide .scale-track { background: var(--accent-soft); }
+.slide .question-cards li { border-radius: 4px; background: var(--accent-soft); }
+.slide .poll-join { border-radius: 4px; }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX) — displayed formulas at a little above the text size
+   ───────────────────────────────────────────── */
+.slide .katex { font-size: 1.08em; }
+.slide .katex-display {
+  margin: 20px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.slide .katex-display > .katex { font-size: 1.2em; }

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

@@ -0,0 +1,37 @@
+schema = 1
+kind = "theme"
+id = "aurora"
+title = "Aurora"
+description = "Northern lights: curtains of light in the accent colours, night-sky chapter and statement slides, frosted glass."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "neon"
+fonts = [
+  "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&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" = "168px"
+"--fs-title" = "112px"
+"--fs-focus" = "100px"
+"--fs-h" = "76px"
+"--fs-sub" = "44px"
+"--fs-body" = "34px"
+"--fs-small" = "26px"
+"--fs-eyebrow" = "20px"
+
+# Spacing
+"--pad-x" = "120px"
+"--pad-y" = "72px"
+"--gap-title" = "48px"
+"--gap-item" = "24px"
+
+# Type families
+"--font-display" = "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
+"--font-body" = "\"Plus Jakarta Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"