mdeck 2.3.0

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

@@ -0,0 +1,633 @@
+/* Sketch — a sketchbook.
+   Caveat for headings, Patrick Hand for text, on dotted paper that becomes
+   a chalkboard in the dark. The drawn marks (the scribble under a heading,
+   the circle round a number, the arrows of a list) are SVG masks filled
+   with palette colours, so they follow every palette. Callouts are sticky
+   notes, pictures are photos taped in, and a focus slide is a speech
+   bubble. 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));
+  --marker: color-mix(in oklab, var(--accent-2) 34%, transparent);
+  --paper-dot: color-mix(in oklab, var(--ink) 13%, transparent);
+  /* A hand-drawn outline: corners of different radii on every side */
+  --wobble: 18px 225px 14px 255px / 255px 16px 225px 20px;
+  --scribble: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'><path d='M5 17 C 60 7 120 21 180 13 S 270 8 295 12 M 22 25 C 90 17 170 26 282 18' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/></svg>");
+  --circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M150 28 C 108 6 38 20 20 82 C 4 142 62 190 122 178 C 180 166 198 108 178 64 C 164 34 126 16 84 26' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/></svg>");
+  --arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'><path d='M3 13 C 12 11 22 12 34 12 M25 4 C 29 8 32 10 36 12 C 31 15 28 18 25 21' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'><path d='M3 12 C 10 6 16 15 22 9 S 32 6 37 10' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/></svg>");
+
+  background-color: var(--bg);
+  background-image: radial-gradient(var(--paper-dot) 1.6px, transparent 1.9px);
+  background-size: 44px 44px;
+  background-position: 22px 22px;
+}
+
+/* ─────────────────────────────────────────────
+   HEADER AND FOOTER: written in the margin; the slide number circled
+   ───────────────────────────────────────────── */
+.slide-header {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-eyebrow) * 1.25);
+  font-weight: 600;
+  color: var(--muted);
+}
+.slide-header .brand { color: var(--ink); font-weight: 700; }
+
+.slide-logo {
+  position: absolute;
+  top: var(--pad-y);
+  right: var(--pad-x);
+  height: 88px;
+  width: auto;
+  max-width: 340px;
+  object-fit: contain;
+  filter: var(--logo-filter, none);
+  transform: rotate(-2deg);
+}
+
+.slide-footer {
+  font-family: var(--font-display);
+  font-size: var(--fs-eyebrow);
+  font-weight: 600;
+  color: var(--muted);
+}
+.slide-footer > span:last-child:not(:first-child) {
+  position: relative;
+  min-width: 1.9em;
+  text-align: center;
+  color: var(--ink);
+  padding: 0.15em 0.3em;
+}
+.slide-footer > span:last-child:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  inset: -0.12em -0.2em;
+  background: var(--accent);
+  mask: var(--circle) center / 100% 100% no-repeat;
+}
+
+/* ─────────────────────────────────────────────
+   TYPOGRAPHY HELPERS
+   ───────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-display);
+  font-size: var(--fs-eyebrow);
+  font-weight: 700;
+  color: var(--accent);
+  margin: 0;
+}
+
+.display {
+  font-family: var(--font-display);
+  font-size: var(--fs-display);
+  font-weight: 700;
+  line-height: 0.95;
+  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;
+  margin: 0;
+  color: var(--ink);
+  text-wrap: balance;
+}
+
+.subtitle {
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  line-height: 1.3;
+  color: var(--ink-soft);
+  margin: 0;
+  text-wrap: pretty;
+}
+
+.body-text {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: 1.4;
+  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 written in the accent pen; bold is gone over with a
+   highlighter. */
+em { font-style: normal; color: var(--accent); }
+strong {
+  font-weight: inherit;
+  color: var(--ink);
+  background: linear-gradient(176deg, transparent 0 42%, var(--marker) 42% 88%, transparent 88%);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  padding: 0 0.12em;
+  margin: 0 -0.06em;
+}
+
+/* ─────────────────────────────────────────────
+   CONTENT SLIDES — a heading with a scribble under it
+   ───────────────────────────────────────────── */
+.slide-body h1 {
+  font-family: var(--font-display);
+  font-size: var(--fs-h);
+  font-weight: 700;
+  line-height: 1;
+  color: var(--ink);
+  margin: 0 0 var(--gap-title) 0;
+  max-width: 1500px;
+  text-wrap: balance;
+}
+.slide-body h1::after {
+  content: '';
+  display: block;
+  width: min(340px, 60%);
+  height: 22px;
+  margin-top: 6px;
+  background: var(--accent);
+  mask: var(--scribble) center / 100% 100% no-repeat;
+}
+.slide-body h2 {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-sub) * 1.25);
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--accent);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: balance;
+}
+.slide-body p {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: 1.4;
+  color: var(--ink-soft);
+  margin: 0 0 var(--gap-item) 0;
+  text-wrap: pretty;
+}
+.slide-body > p { max-width: 1500px; }
+
+/* ─────────────────────────────────────────────
+   LISTS — drawn arrows; numbers written and circled
+   ───────────────────────────────────────────── */
+.slide-body ul, .slide-body ol { max-width: 1500px; }
+.slide-body ul li {
+  line-height: 1.35;
+  padding-left: 72px;
+}
+.slide-body ul li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.3em;
+  width: 48px;
+  height: 0.75em;
+  background: var(--accent);
+  mask: var(--arrow) center / contain no-repeat;
+}
+.slide-body ol li {
+  line-height: 1.35;
+  padding-left: 80px;
+}
+.slide-body ol li::before {
+  content: counter(slide-ol);
+  position: absolute;
+  left: 0;
+  top: -0.12em;
+  width: 1.5em;
+  height: 1.5em;
+  display: grid;
+  place-items: center;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.15em;
+  color: var(--accent);
+  background: none;
+}
+.slide-body ol li::after {
+  content: '';
+  position: absolute;
+  left: -0.1em;
+  top: -0.2em;
+  width: 1.55em;
+  height: 1.55em;
+  background: var(--accent);
+  mask: var(--circle) center / 100% 100% no-repeat;
+  opacity: 0.8;
+}
+.slide-body li :is(ul, ol) { margin-top: 10px; gap: 8px; font-size: 0.9em; }
+.slide-body li ul li::before { mask-image: var(--tick); width: 36px; top: 0.45em; height: 0.5em; background: var(--muted); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: TITLE — big handwriting, a double scribble under it
+   ───────────────────────────────────────────── */
+.slide--title .slide-body { justify-content: center; }
+.slide--title .display {
+  font-size: var(--fs-display);
+  max-width: 1500px;
+}
+.slide--title .display::after {
+  content: '';
+  display: block;
+  width: min(720px, 70%);
+  height: 40px;
+  margin-top: 8px;
+  background: var(--accent);
+  mask: var(--scribble) center / 100% 100% no-repeat;
+}
+.slide--title .subtitle {
+  margin-top: 40px;
+  max-width: 1200px;
+}
+.slide--title .slide-footer {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  font-weight: 400;
+  color: var(--ink-soft);
+}
+/* TITLE + image: the title on the left, the picture taped in on the right */
+.slide--title.has-image .slide-body {
+  display: grid;
+  grid-template-columns: 1.15fr 1fr;
+  column-gap: 72px;
+  align-items: center;
+}
+.slide--title.has-image .display { font-size: calc(var(--fs-display) * 0.8); }
+.slide--title.has-image .title-image {
+  width: 100%;
+  height: 100%;
+  max-height: 760px;
+  object-fit: contain;
+  transform: rotate(2deg);
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: CHAPTER — the number circled in the accent, the title beside it
+   ───────────────────────────────────────────── */
+.slide--chapter .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+.slide--chapter .chapter-content {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 72px;
+  align-items: center;
+  align-self: stretch;
+}
+.chapter-num {
+  grid-row: 1 / span 3;
+  position: relative;
+  min-width: 320px;
+  height: 320px;
+  display: grid;
+  place-items: center;
+  padding: 0 40px;
+  box-sizing: border-box;
+  font-family: var(--font-display);
+  font-size: 220px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--accent);
+  user-select: none;
+}
+.chapter-num::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--accent);
+  mask: var(--circle) center / 100% 100% no-repeat;
+  transform: rotate(-6deg);
+}
+.chapter-meta {
+  grid-column: 2;
+  align-self: end;
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-eyebrow) * 1.4);
+  font-weight: 700;
+  color: var(--muted);
+  margin: 0;
+}
+.slide--chapter .chapter-title {
+  grid-column: 2;
+  font-family: var(--font-display);
+  font-size: var(--fs-title);
+  font-weight: 700;
+  line-height: 0.95;
+  margin: 4px 0 20px 0;
+  color: var(--ink);
+  max-width: 1200px;
+  text-wrap: balance;
+}
+.slide--chapter .chapter-desc {
+  grid-column: 2;
+  align-self: start;
+  font-family: var(--font-body);
+  font-size: var(--fs-sub);
+  line-height: 1.3;
+  color: var(--ink-soft);
+  max-width: 1050px;
+  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: 72px;
+  align-items: center;
+}
+.slide--chapter.has-image .chapter-num { min-width: 220px; height: 220px; font-size: 150px; }
+.slide--chapter.has-image .chapter-title { font-size: calc(var(--fs-title) * 0.75); }
+.slide--chapter.has-image .chapter-image { width: 100%; height: 100%; max-height: 760px; object-fit: contain; transform: rotate(-2deg); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FOCUS — a speech bubble with a hand-drawn outline; the
+   label written above it, the name below the tail
+   ───────────────────────────────────────────── */
+.slide--focus .slide-body {
+  justify-content: center;
+  align-items: flex-start;
+}
+.focus-eyebrow {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-eyebrow) * 1.3);
+  font-weight: 700;
+  color: var(--accent);
+  margin: 0 0 20px 40px;
+  transform: rotate(-3deg);
+}
+.focus-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-item);
+  max-width: 1500px;
+  padding: 64px 88px;
+  border: 5px solid var(--ink);
+  border-radius: var(--wobble);
+  background: var(--bg);
+}
+/* The tail */
+.focus-content::after {
+  content: '';
+  position: absolute;
+  left: 140px;
+  bottom: -44px;
+  width: 64px;
+  height: 64px;
+  background: var(--bg);
+  border-right: 5px solid var(--ink);
+  border-bottom: 5px solid var(--ink);
+  transform: skewX(-28deg) rotate(42deg);
+  border-bottom-right-radius: 12px;
+}
+.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.05;
+  color: var(--ink);
+  margin: 0;
+  text-wrap: balance;
+}
+.slide--focus .focus-content h1::after { display: none; }
+.focus-attribution {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  color: var(--muted);
+  margin: 64px 0 0 240px;
+}
+
+/* ─────────────────────────────────────────────
+   LAYOUT: IMAGE + TEXT — a photo taped into the book
+   ───────────────────────────────────────────── */
+.slide--image-text .slide-body { gap: 96px; }
+.image-pane {
+  flex: 1.05;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: color-mix(in oklab, var(--bg) 70%, white);
+  padding: 22px 22px 72px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
+  transform: rotate(-1.5deg);
+  margin: 12px 0 24px;
+}
+/* Tape across the top edge */
+.image-pane::before {
+  content: '';
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  width: 180px;
+  height: 46px;
+  transform: translateX(-50%) rotate(3deg);
+  background: color-mix(in oklab, var(--accent-2) 30%, transparent);
+  z-index: 1;
+}
+.image-pane img, .image-pane .themed-picture { width: 100%; height: 100%; }
+.image-placeholder {
+  background: repeating-linear-gradient(135deg, var(--surface) 0 24px, var(--bg) 24px 48px);
+}
+.image-placeholder span {
+  font-family: var(--font-display);
+  font-size: var(--fs-eyebrow);
+  color: var(--muted);
+}
+.text-pane .title { font-size: var(--fs-h); color: var(--ink); }
+.text-pane .title::after { display: none; }
+
+/* The split layout's shared heading */
+.split-heading { margin-bottom: var(--gap-item); }
+
+/* ─────────────────────────────────────────────
+   LAYOUT: FULL-BLEED IMAGE
+   ───────────────────────────────────────────── */
+.slide--full-bleed-image { background-image: none; }
+.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.15) 55%, transparent 100%);
+}
+.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;
+  color: #fff;
+  margin: 0;
+  max-width: 1300px;
+  text-wrap: balance;
+}
+.slide--full-bleed-image .overlay-title em { color: inherit; }
+.slide--full-bleed-image .overlay-title::after { display: none; }
+
+/* ─────────────────────────────────────────────
+   CALLOUTS — sticky notes, slightly turned, with a strip of tape
+   ───────────────────────────────────────────── */
+.slide-body .callout {
+  --note: var(--accent-2);
+  position: relative;
+  /* Brighter on the chalkboard, so the note still reads as paper */
+  background: light-dark(color-mix(in oklab, var(--note) 24%, var(--bg)), color-mix(in oklab, var(--note) 40%, var(--bg)));
+  border: 0;
+  border-radius: 2px 2px 18px 2px;
+  padding: 26px 36px 22px;
+  margin: 22px 0 var(--gap-item);
+  max-width: 1100px;
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08);
+  transform: rotate(-1deg);
+  align-self: flex-start;
+}
+.slide-body .callout:nth-of-type(even) { transform: rotate(0.8deg); }
+.slide-body .callout::before {
+  content: '';
+  position: absolute;
+  top: -18px;
+  left: 50%;
+  width: 150px;
+  height: 36px;
+  transform: translateX(-50%) rotate(-2deg);
+  background: color-mix(in oklab, var(--surface) 60%, transparent);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.slide-body .callout-title {
+  font-family: var(--font-display);
+  font-size: calc(var(--fs-eyebrow) * 1.35);
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--ink);
+  margin: 0 0 6px 0;
+}
+.slide-body .callout p { padding-left: 0; color: var(--ink); margin-bottom: 0; }
+.slide-body .callout > * + * { margin-top: 10px; }
+.slide-body :is(.callout-tip, .callout-theorem, .callout-lemma, .callout-corollary) { --note: var(--accent); }
+.slide-body .callout-note { --note: var(--callout-note); }
+.slide-body .callout-important { --note: var(--callout-important); }
+.slide-body .callout-warning { --note: var(--callout-warning); }
+.slide-body .callout-caution { --note: var(--callout-caution); }
+
+/* A proof is written on the page, not stuck on it: "Proof." and a
+   square at the end. */
+.slide-body .callout.callout-proof {
+  background: none;
+  box-shadow: none;
+  transform: none;
+  padding: 0;
+  max-width: 1500px;
+}
+.slide-body .callout.callout-proof::before { display: none; }
+.slide-body .callout.callout-proof .callout-title {
+  float: left;
+  margin: 0 0.3em 0 0;
+  font-size: calc(var(--fs-body) * 1.2);
+  line-height: 1.15;
+  color: var(--accent);
+}
+.slide-body .callout.callout-proof .callout-title::after { content: '.'; }
+.slide-body .callout.callout-proof p { color: var(--ink-soft); }
+.slide-body .callout.callout-proof > :last-child::after { content: '\25A1'; margin-left: 0.5em; color: var(--accent); }
+
+/* ─────────────────────────────────────────────
+   CODE — a box drawn round the listing
+   ───────────────────────────────────────────── */
+.code-block {
+  --code-bg: color-mix(in oklab, var(--surface) 80%, transparent);
+  --code-radius: 0;
+  --code-size: 28px;
+  background: var(--code-bg);
+  border: 3px solid var(--ink);
+  border-radius: var(--wobble);
+  padding: 32px 44px;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--code-size);
+  font-family: var(--font-mono);
+  line-height: 1.5;
+}
+.code-block code {
+  font-family: inherit;
+  font-size: inherit;
+  background: none;
+  padding: 0;
+}
+/* Inline code: a word boxed in pencil on a scrap of paper */
+.slide-body :not(pre) > code {
+  font-family: var(--font-mono);
+  font-size: 0.8em;
+  background: color-mix(in oklab, var(--surface) 75%, transparent);
+  border: 2px solid color-mix(in oklab, var(--ink) 40%, transparent);
+  border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px;
+  padding: 0.02em 0.28em;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+/* ─────────────────────────────────────────────
+   TABLES — ruled by hand: a heavy stroke under the head, dashed rows
+   ───────────────────────────────────────────── */
+.slide-body table { font-size: var(--fs-body); }
+.slide-body th,
+.slide-body td {
+  padding: 10px 28px 10px 0;
+  border-bottom: 2px dashed var(--hairline);
+}
+.slide-body th {
+  font-family: var(--font-display);
+  font-size: 1.2em;
+  font-weight: 700;
+  color: var(--accent);
+  border-bottom: 4px solid var(--ink);
+  border-radius: 0 0 40px 4px / 0 0 6px 2px;
+}
+
+/* ─────────────────────────────────────────────
+   FOOTNOTES
+   ───────────────────────────────────────────── */
+.slide-footnotes {
+  font-family: var(--font-body);
+  border-top: 2px dashed var(--hairline);
+}
+
+/* ─────────────────────────────────────────────
+   AUDIENCE QUESTIONS — bars with drawn outlines
+   ───────────────────────────────────────────── */
+.slide .poll-track, .slide .scale-track {
+  background: transparent;
+  border: 3px solid var(--ink);
+  border-radius: var(--wobble);
+}
+.slide .poll-fill, .slide .scale-fill { border-radius: var(--wobble); }
+.slide .question-cards li {
+  border-radius: 2px 2px 14px 2px;
+  background: color-mix(in oklab, var(--accent-2) 22%, var(--bg));
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+}
+.slide .question-cards li:nth-child(odd) { transform: rotate(-1deg); }
+.slide .question-cards li:nth-child(even) { transform: rotate(1deg); }
+.slide .poll-join { border-radius: var(--wobble); border: 3px solid var(--ink); }
+
+/* ─────────────────────────────────────────────
+   MATH (KaTeX)
+   ───────────────────────────────────────────── */
+.slide .katex-display {
+  margin: 24px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}

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

@@ -0,0 +1,38 @@
+schema = 1
+kind = "theme"
+id = "terminal"
+title = "Terminal"
+description = "A terminal session: JetBrains Mono, headings at a prompt, a blinking cursor, log-line callouts and a tmux status bar; dark by default."
+# The palette this theme uses unless the deck sets one; colours come only from palettes.
+palette = "phosphor"
+appearance = "dark"
+fonts = [
+  "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;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 families — monospace throughout
+"--font-display" = "'JetBrains Mono', ui-monospace, monospace"
+"--font-body" = "'JetBrains Mono', ui-monospace, monospace"
+
+# Type scale (px) — projection-appropriate at 1920×1080
+"--fs-display" = "112px"
+"--fs-h" = "60px"
+"--fs-sub" = "36px"
+"--fs-body" = "29px"
+"--fs-eyebrow" = "24px"
+"--fs-small" = "24px"
+"--fs-focus" = "72px"
+"--fs-title" = "96px"
+
+# Spacing
+"--pad-x" = "120px"
+"--pad-y" = "72px"
+"--gap-title" = "44px"
+"--gap-item" = "24px"