mdeck 2.3.0

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

@@ -0,0 +1,574 @@
+/* Editorial — a magazine spread.
+   Newsreader for headlines, Lora for reading, and the conventions of
+   print: a masthead rule, a drop cap that opens the text, pull quotes,
+   margin notes and figures set between hairlines. Chapters open like a new
+   section of the magazine, with a Roman numeral.
+   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) 22%, var(--bg));
+  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--bg));
+}
+
+/* ─────────────────────────────────────────────
+   MASTHEAD AND FOLIO: a double rule under the header, the page number
+   in italic numerals like a magazine's folio
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--ink);
+  border-bottom: 7px double var(--ink);
+  padding-bottom: 14px;
+}
+.slide-header .brand { color: var(--ink); }
+
+.slide-logo {
+  position: absolute;
+  top: var(--pad-y);
+  right: var(--pad-x);
+  height: 96px;
+  width: auto;
+  max-width: 360px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+  transform: translateY(calc(var(--fs-eyebrow) * 0.5 - 50%));
+  /* The rule stops before the logo instead of crossing it. */
+  background: var(--bg);
+  padding-left: 28px;
+}
+
+.slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--muted);
+  border-top: 1px solid var(--hairline);
+  padding-top: 18px;
+}
+.slide-footer > span:last-child:not(:first-child) {
+  font-family: var(--font-display);
+  font-size: var(--fs-sub);
+  font-style: italic;
+  font-weight: 400;
+  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.22em;
+  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;
+  font-optical-sizing: auto;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.title {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  font-optical-sizing: auto;
+  line-height: 1.08;
+  letter-spacing: -0.015em;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.subtitle {
+  font-family: var(--font-body);
+  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);
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+
+.meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  color: var(--muted);
+}
+
+/* Emphasis is a drawn italic in the accent; in headlines it is the
+   display face's italic, the editorial signature. */
+em {
+  font-style: italic;
+  color: var(--accent);
+}
+strong { color: var(--ink); font-weight: 600; }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — a cover: centred headline between an ornament and an
+   italic standfirst
+   ───────────────────────────────────────────── */
+.slide--title .slide-body {
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.slide--title .display {
+  font-size: var(--fs-display);
+  font-weight: 700;
+  line-height: 0.98;
+  letter-spacing: -0.02em;
+  margin: 0;
+  max-width: 1560px;
+}
+.slide--title .display em { font-weight: 400; }
+.slide--title .title-text::before {
+  content: '';
+  display: block;
+  width: 120px;
+  height: 0;
+  border-top: 4px double var(--accent);
+  margin: 0 auto 64px;
+}
+.slide--title .subtitle {
+  margin: 56px auto 0;
+  max-width: 1100px;
+}
+/* TITLE + image: the picture as a band across the top, the cover below */
+.slide--title.has-image .slide-body {
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: 48px;
+}
+.slide--title.has-image .title-image {
+  width: 100%;
+  height: 360px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.slide--title.has-image .title-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.slide--title.has-image .title-text::before { display: none; }
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.72); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — a new section: the Roman numeral in the accent, a
+   hairline, the label in capitals and the title large below
+   ───────────────────────────────────────────── */
+.slide--chapter .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+.chapter-num {
+  font-family: var(--font-display);
+  font-size: 220px;
+  font-weight: 400;
+  font-style: italic;
+  font-optical-sizing: auto;
+  line-height: 1;
+  letter-spacing: 0;
+  color: var(--accent);
+  margin: 0 0 8px -6px;
+  user-select: none;
+}
+/* A whole number shows as a Roman numeral (the layout passes it as
+   --chapter-number); anything else as written. */
+.chapter-num[style*="--chapter-number"] {
+  counter-reset: chapter var(--chapter-number);
+  font-size: 0;
+}
+.chapter-num[style*="--chapter-number"]::before {
+  content: counter(chapter, upper-roman);
+  font-size: 220px;
+}
+.chapter-meta {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--ink);
+  margin: 0 0 36px 0;
+  padding-top: 28px;
+  border-top: 1px solid var(--hairline);
+}
+.slide--chapter .chapter-content { align-self: stretch; }
+.slide--chapter .chapter-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 700;
+  font-style: normal;
+  font-optical-sizing: auto;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
+  margin: 0 0 40px 0;
+  color: var(--ink);
+  max-width: 1400px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-title em { font-weight: 400; font-style: italic; }
+.slide--chapter .chapter-desc {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.4;
+  color: var(--ink-soft);
+  max-width: 1100px;
+  margin: 0;
+}
+.slide--chapter.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 96px;
+  align-items: stretch;
+}
+.slide--chapter.has-image .chapter-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+.slide--chapter.has-image .chapter-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — a pull quote: a large hanging quotation mark in the
+   accent, the statement in the display italic
+   ───────────────────────────────────────────── */
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+  text-align: left;
+  padding-left: 140px;
+}
+.focus-eyebrow {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 40px 0;
+}
+.focus-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  text-align: left;
+}
+.focus-content::before {
+  content: '\201C';
+  position: absolute;
+  left: -168px;
+  top: 0;
+  font-family: var(--font-display);
+  font-size: 300px;
+  font-weight: 400;
+  line-height: 0.8;
+  color: var(--accent);
+  pointer-events: none;
+}
+.focus-statement,
+.slide--focus .focus-content h1,
+.slide--focus .focus-content p {
+  font-family: var(--font-display);
+  font-size: var(--fs-focus);
+  font-weight: 400;
+  font-style: italic;
+  font-optical-sizing: auto;
+  line-height: 1.16;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  max-width: 1480px;
+  margin: 0;
+  text-wrap: balance;
+  text-align: left;
+}
+/* Emphasis inside the quote stays in its italic, a touch heavier, in the accent. */
+.slide--focus .focus-content em { font-style: italic; font-weight: 500; }
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-small);
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin: 56px 0 0 0;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT — square photographs, a caption-like text column
+   ───────────────────────────────────────────── */
+.slide--image-text .slide-body { gap: 96px; }
+
+.image-pane {
+  flex: 1.1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  overflow: hidden;
+  position: relative;
+  border-radius: 0;
+}
+.image-placeholder {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(135deg, var(--surface) 0 24px, var(--bg) 24px 48px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.image-placeholder span {
+  font-family: var(--font-body);
+  font-size: 22px;
+  font-style: italic;
+  color: var(--muted);
+  background: var(--bg);
+  padding: 14px 24px;
+  border: 1px solid var(--rule);
+}
+.text-pane .title { font-size: var(--fs-h); }
+.text-pane .body-text + .body-text { margin-top: 8px; }
+.text-pane .eyebrow { margin-bottom: 16px; }
+
+/* The split layout's shared heading keeps clear of the masthead. */
+.split-heading { margin-top: 40px; }
+
+/* ─────────────────────────────────────────────
+   LISTS — an em dash in the accent hangs in the margin; numbers are the
+   display face's italic figures
+   ───────────────────────────────────────────── */
+.slide-body ul { max-width: 1500px; }
+.slide-body ul li {
+  font-weight: 400;
+  line-height: 1.5;
+  padding-left: 64px;
+  position: relative;
+}
+.slide-body ul li::before {
+  content: '\2014';
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: var(--font-display);
+  font-weight: 700;
+  color: var(--accent);
+}
+.slide-body ol { max-width: 1500px; }
+.slide-body ol li {
+  counter-increment: slide-ol;
+  padding-left: 64px;
+  line-height: 1.5;
+  position: relative;
+}
+.slide-body ol li::before {
+  content: counter(slide-ol) '.';
+  position: absolute;
+  left: 0;
+  top: -0.08em;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 700;
+  font-size: 1.2em;
+  color: var(--accent);
+  line-height: 1.5;
+}
+
+/* ─────────────────────────────────────────────
+   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.65) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
+}
+.slide--full-bleed-image .overlay-title {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-h) * 1.15);
+  font-weight: 700;
+  font-optical-sizing: auto;
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+  color: #fff;
+  margin: 0;
+  max-width: 1300px;
+  text-wrap: balance;
+}
+.slide--full-bleed-image .overlay-title em { color: inherit; font-weight: 400; }
+
+/* ─────────────────────────────────────────────
+   CONTENT SLIDES — a headline, and the text that follows it opens with a
+   drop cap
+   ───────────────────────────────────────────── */
+.slide-body h1 {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 600;
+  font-optical-sizing: auto;
+  line-height: 1.08;
+  letter-spacing: -0.015em;
+  color: var(--ink);
+  margin: 0 0 var(--gap-title) 0;
+  max-width: 1500px;
+  text-wrap: balance;
+}
+.slide-body h1 em { font-weight: 400; }
+.slide-body h2 {
+  font-family: var(--font-display);
+  font-size: var(--fs-sub);
+  font-weight: 700;
+  font-style: italic;
+  line-height: 1.15;
+  color: var(--ink);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: balance;
+}
+.slide-body p {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--ink-soft);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: pretty;
+}
+.slide-body > p { max-width: 1500px; }
+.slide-body > h1 + p::first-letter {
+  float: left;
+  font-family: var(--font-display);
+  font-size: 3.4em;
+  font-weight: 700;
+  line-height: 0.82;
+  margin: 0.08em 0.1em 0 0;
+  color: var(--accent);
+}
+
+/* ─────────────────────────────────────────────
+   FOOTNOTES
+   ───────────────────────────────────────────── */
+.slide-footnotes {
+  font-style: italic;
+  padding-top: 18px;
+}
+.slide-footnotes li { line-height: 1.45; }
+
+/* ─────────────────────────────────────────────
+   CALLOUTS — margin notes: a rule in the margin, the title in capitals,
+   the note in italics
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  background: none;
+  border: 0;
+  border-left: 3px solid var(--rule);
+  border-radius: 0;
+  padding: 4px 0 4px 32px;
+  margin: 40px 0 0;
+  max-width: 1200px;
+}
+.slide-body .callout-tip { border-left-color: var(--accent); }
+.slide-body .callout-tip .callout-title { color: var(--accent); }
+.slide-body .callout-note { border-left-color: var(--callout-note); }
+.slide-body .callout-important { border-left-color: var(--callout-important); }
+.slide-body .callout-warning { border-left-color: var(--callout-warning); }
+.slide-body .callout-caution { border-left-color: var(--callout-caution); }
+/* Lecture blocks: theorems in the accent's margin, definitions in the second accent */
+.slide-body :is(.callout-theorem, .callout-lemma, .callout-corollary) { border-left-color: var(--accent); }
+.slide-body .callout-definition { border-left-color: var(--accent-2); }
+.slide-body .callout-title {
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+.slide-body .callout p {
+  padding-left: 0;
+  font-style: italic;
+  color: var(--ink);
+  font-size: var(--fs-body);
+  margin-bottom: 0;
+}
+
+/* ─────────────────────────────────────────────
+   CODE — a figure between hairlines on the paper's surface
+   ───────────────────────────────────────────── */
+.code-block {
+  --code-bg: var(--surface);
+  --code-radius: 0;
+  --code-size: 26px;
+  background: var(--code-bg);
+  border-radius: 0;
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--ink);
+  padding: 36px 44px;
+  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 — thin square bars
+   ───────────────────────────────────────────── */
+.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); font-style: italic; }
+.slide .poll-join { border-radius: 0; }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX)
+   ───────────────────────────────────────────── */
+.slide .katex-display {
+  font-size: var(--fs-sub);
+  margin: 40px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

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

@@ -0,0 +1,61 @@
+schema = 1
+kind = "theme"
+id = "fhnw"
+title = "FHNW"
+description = "The FHNW corporate design: Inter, black on white, yellow accent areas."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "brand"
+palettes = ["brand"]  # the corporate design: no other palettes
+fonts = [
+  "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Spectral:ital,wght@0,400;1,400&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]
+
+# Theme-specific structural tokens
+"--grey-100" = "#F1F1EE"
+"--grey-200" = "#DEDED9"
+"--grey-300" = "#BEBDB9"
+"--grey-800" = "#4C4C4C"
+
+# Type scale (px) — projection-appropriate at 1920×1080.
+"--fs-display" = "152px"
+"--fs-title" = "96px"
+"--fs-focus" = "80px"
+"--fs-h" = "64px"
+"--fs-sub" = "40px"
+"--fs-body" = "32px"
+"--fs-small" = "24px"
+"--fs-eyebrow" = "24px"
+
+# Spacing
+"--pad-x" = "112px"
+"--pad-y" = "72px"
+"--gap-title" = "48px"
+"--gap-item" = "20px"
+
+# Akzentfläche interior padding
+"--akzent-pad-x" = "56px"
+"--akzent-pad-y" = "40px"
+
+# Akzentlinie band height — CD-Manual §2.4 (≈ ½ logo height).
+"--akzentlinie-h" = "12px"
+
+# Type families — Inter only, per CD-Manual §2.2
+"--font-display" = "\"Inter\", system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif"
+"--font-body" = "\"Inter\", system-ui, -apple-system, \"Helvetica Neue\", Arial, sans-serif"
+"--font-serif" = "\"Spectral\", 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"