slidev-theme-tud-db 0.0.6 → 0.0.7

package/README.md

@@ -29,7 +29,7 @@ pnpm dev
 
 No `addons:` line needed — the theme enables `slidev-addon-gsap` via its
 defaults, so `import { useTl } from 'slidev-addon-gsap'` works in any slide. The
-theme also sets `canvasWidth: 960` (1px == 1pt), Noto Sans, light scheme, and
+theme also sets `canvasWidth: 960` (the 720pt PowerPoint slide, so 1pt == 4/3 px), Noto Sans, light scheme, and
 Comark on; override any in your own headmatter.
 
 ## Example
@@ -55,5 +55,7 @@ cp -r node_modules/slidev-theme-db/skills/slidev-theme-db .claude/skills/
 - `styles/db-theme.css` — tokens, typography, lists, tables (keyed on `.db-default`).
 - `setup/shiki.ts` (fenced) and the `THEME` in `vite.config.ts` (inline `{lang}`) —
   the **two** highlighters; keep them in sync (both `catppuccin-latte`).
+  `setup/shiki.ts` also holds the transformer behind `⟦name:text⟧` code marks
+  (spans a slide's timeline can recolour).
 - Link the theme with `link:` (not `file:`), and **restart** the dev server after
   editing theme files (Vite doesn't hot-reload `node_modules`).

package/components/DbFrame.vue

@@ -11,7 +11,8 @@ const props = defineProps({
     class="slidev-layout default db-default relative"
     :style="props.codeSize ? { '--slidev-code-font-size': props.codeSize } : undefined"
   >
-    <div class="db-default__body px-[30px] py-[33.5px]">
+    <!-- top padding puts the title's baseline at 41.9pt, as in the template -->
+    <div class="db-default__body px-[30px] pt-[26.5px] pb-[33.5px]">
       <slot />
     </div>
   </div>

package/global-bottom.vue

@@ -42,7 +42,7 @@ const logos = computed(() => slideLogos[$nav.value.currentPage] ?? {})
       class="db-footer absolute inset-x-0 bottom-0 h-[40px] px-[30px] flex items-center justify-between bg-[var(--db-footer-bg)] pointer-events-auto transition-opacity duration-500"
     >
       <img class="h-[25px]" :src="tudBlack" alt="TU Dresden" />
-      <span class="text-[12px] text-[var(--db-text)]">
+      <span class="db-footer__page">
         <span class="font-bold">{{ $nav.currentPage }}</span>
         <template v-if="$nav.clicksTotal > 0">
           <span class="text-[0.7em]">.{{ $nav.clicks + 1 }}</span>

package/layouts/cover.vue

@@ -21,12 +21,12 @@ useLogo({ ddrg: 'white', tud: true })
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700;
+  @apply font-700 leading-10;
+  font-size: var(--db-fs-cover-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
-  /* margin: 16px 0 0; */
-  /* font-size: 15px; */
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/layouts/section-num.vue

@@ -60,10 +60,12 @@ const num = computed(() => {
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+  @apply font-700 leading-10 text-[var(--db-heading-blue)];
+  font-size: var(--db-fs-cover-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/layouts/section.vue

@@ -21,12 +21,12 @@ useLogo({ ddrg: 'color', footer: true })
 
 <style scoped>
 .db-cover__title :deep(h1) {
-  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+  @apply font-700 leading-10 text-[var(--db-heading-blue)];
+  font-size: var(--db-fs-section-title) !important;
 }
 .db-cover__title :deep(p) {
-  @apply absolute top-[95px] m-0 text-md;
-  /* margin: 16px 0 0; */
-  /* font-size: 15px; */
+  @apply absolute top-[95px] m-0;
+  font-size: var(--db-fs-subtitle);
   color: var(--db-text-soft);
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud-db",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "description": "Slidev theme cloning the TU Dresden / Dresden Database Research Group PowerPoint template",
   "license": "GPL-3.0-or-later",

package/setup/shiki.ts

@@ -5,9 +5,51 @@
 // NB: no `import { defineShikiSetup } from '@slidev/types'` on purpose — it's
 // only a type helper, and Slidev calls this default export as `setup(ctx)`.
 // catppuccin-latte / -mocha are bundled with Shiki, so no extra deps needed.
+
+// Code marks: wrap exact character ranges of a fenced block so a slide can
+// recolour that text, e.g. at a click. Inside the code, write ⟦name:text⟧: the
+// markers are removed and `text` is wrapped in <span class="code-mark mark-name">.
+//
+//   WHERE salary > ⟦paren:(⟧
+//
+// A mark looks like the code around it until something recolours it, typically
+// a gsap timeline at a click. A mark can span several syntax-coloured tokens,
+// so recolour the tokens inside it too:
+//
+//   tl.to('.mark-paren, .mark-paren span', { color: '#f9c611' })
+//
+// A mark must stay within one line. Magic-move blocks don't run Shiki
+// transformers, so marks only work in plain fenced blocks.
+const MARK = /⟦([\w-]+):([^⟧\n]*)⟧/g
+
+interface Decoration { start: number, end: number, properties: Record<string, string> }
+
+const codeMarks = {
+  name: 'tud-db:code-marks',
+  preprocess(code: string, options: { decorations?: Decoration[] }) {
+    if (!code.includes('⟦'))
+      return
+    const marks: Decoration[] = []
+    let out = ''
+    let last = 0
+    for (const m of code.matchAll(MARK)) {
+      out += code.slice(last, m.index)
+      const start = out.length
+      out += m[2]
+      marks.push({ start, end: out.length, properties: { class: `code-mark mark-${m[1]}` } })
+      last = m.index! + m[0].length
+    }
+    out += code.slice(last)
+    // Shiki reads the decorations from these options when it renders
+    options.decorations = [...(options.decorations ?? []), ...marks]
+    return out
+  },
+}
+
 export default () => ({
   themes: {
     light: 'catppuccin-latte',
     dark: 'catppuccin-mocha',
   },
+  transformers: [codeMarks],
 })

package/styles/db-theme.css

@@ -20,6 +20,21 @@
   --db-table-stripe: #dbdbdb; /* zebra-striped table rows */
   --db-table-rule: #b9b9b9;   /* table header/footer rule lines */
 
+  /* Type scale, in PowerPoint points. The template slide is 720×405pt but the
+     theme renders it on Slidev's 960×540px canvas, so 1pt == 4/3 px — never
+     write a pt value as px. Sizes measured from resource/template.pdf. */
+  --db-pt: calc(4px / 3);
+  --db-fs-cover-title: calc(28 * var(--db-pt));   /* cover / section-num title */
+  --db-fs-section-title: calc(24 * var(--db-pt)); /* section title */
+  --db-fs-subtitle: calc(14 * var(--db-pt));      /* cover / section subtitle */
+  --db-fs-title: calc(22 * var(--db-pt));         /* content slide title (h1) */
+  --db-fs-heading: calc(15 * var(--db-pt));       /* blue sub-header (h2/h3) */
+  --db-fs-body: calc(13 * var(--db-pt));          /* body text, 1st-level bullets */
+  --db-fs-small: calc(12 * var(--db-pt));         /* 2nd-level bullets, page number */
+  --db-fs-code: calc(11 * var(--db-pt));          /* code blocks */
+  --db-fs-caption: calc(11 * var(--db-pt));       /* table / code captions */
+  --db-fs-table: calc(10 * var(--db-pt));         /* table cells */
+
   /* Slidev theme variables */
   --slidev-theme-primary: var(--db-accent3);
 }
@@ -59,27 +74,36 @@
   color: var(--db-accent3);
 }
 
-/* Content slides ("Titel und Inhalt").
- * Canvas is 720px wide (== 720pt real slide), so px values below equal PowerPoint pt. */
+/* Content slides ("Titel und Inhalt"). Font sizes come from the pt type scale
+ * on :root; spacing below is in canvas px, chosen so the baselines land where
+ * resource/template.pdf has them: title 41.9pt, first sub-header 92.5pt, then
+ * bullets every 18pt, and 27.9pt from a bullet to the next sub-header. (Noto
+ * Sans puts the baseline 0.388em below the middle of its line box.) */
 .slidev-layout.db-default {
-  @apply text-md p-0;
+  font-size: var(--db-fs-body);
+  padding: 0;
 }
 .slidev-layout.db-default h1 {
   color: var(--db-text-soft); /* black/gray page heading */
-  @apply text-3xl mb-[46px]; /* gap to first sub-header (~46pt in template) */
+  font-size: var(--db-fs-title);
+  line-height: 2.25rem;
+  margin-bottom: 39px;        /* gap to first sub-header (baseline at 92.5pt) */
 }
 .slidev-layout.db-default h2,
 .slidev-layout.db-default h3 {
   color: var(--db-heading-blue); /* blue sub-headers */
-  @apply text-xl mt-[45px]; /* space ABOVE a sub-header, whatever precedes it
-                              (bullet list, code block, paragraph, …) */
+  font-size: var(--db-fs-heading);
+  line-height: 1.75rem;
+  margin-top: 11px;              /* space ABOVE a sub-header, whatever precedes it
+                                    (bullet list, code block, paragraph, …);
+                                    27.9pt baseline-to-baseline after a bullet */
 }
 /* …except a sub-header that is the FIRST content of its area (right under the
    page title, or the top of a column / grid cell) — the title's margin-bottom
    or the grid gap already provides that separation.
    This is wrap-proof: a section wrapped in a <div> (e.g. a GSAP animation
    anchor) is still treated as "top" when its wrapper is the first child, but a
-   wrapped section that FOLLOWS other content keeps the 24px gap. So adding a
+   wrapped section that FOLLOWS other content keeps its top gap. So adding a
    wrapper div later does NOT collapse the spacing. (default layout: h1 is a
    sibling of the content; two-cols-header: .db-grid__col; two-cols-grid:
    .db-rowgrid cells.) */
@@ -105,7 +129,7 @@
 .slidev-layout.db-default ul ul,
 .slidev-layout.db-default ol ol {
   margin-left: 0;        /* 2nd-level marker aligns with 1st-level text (no extra indent) */
-  font-size: 12px;       /* 2nd-level text a touch smaller (12pt vs 13pt) */
+  font-size: var(--db-fs-small); /* 2nd-level text a touch smaller (12pt vs 13pt) */
 }
 .slidev-layout.db-default ul ul { list-style-type: square; }
 /* Tight vertical rhythm (theme defaults to ~1.8 line-height) */
@@ -192,24 +216,39 @@
 .slidev-layout.db-default .with-bg pre.slidev-code {
   background: rgba(0, 0, 0, 0.03) !important;
 }
-/* Code sizing (Slidev defaults: 12px / 18px / 8px). Slightly smaller font and
-   tighter vertical padding so the box hugs the code top and bottom. */
+/* Code sizing (Slidev defaults: 12px / 18px / 8px). 11pt like the template's
+   listings, with tighter vertical padding so the box hugs the code top and bottom.
+   No left padding: without a background box, the code text lines up with the
+   text, captions and tables around it, as in the template. A .with-bg box gets
+   its inset back. */
 .slidev-layout.db-default {
-  --slidev-code-font-size: 11px;
+  --slidev-code-font-size: var(--db-fs-code);
   --slidev-code-line-height: 1.3;
+  --slidev-code-padding: 4px 10px 4px 0;
+}
+.slidev-layout.db-default .with-bg {
   --slidev-code-padding: 4px 10px;
 }
+/* No programming ligatures: Fira Code would draw <> as a diamond and <=, >=,
+   != as ≤, ≥, ≠, which readers then can't type. Code shows the characters
+   as written. (The theme's --> arrows in prose are a text replacement, not a
+   ligature, so they are unaffected.) */
+.slidev-layout code,
+.slidev-layout pre {
+  font-variant-ligatures: none;
+}
 
 /* Line numbers (```lang {lines:true}```): tighten the gutter. Slidev's defaults
    are a wide 24px gap between the number and the code, plus the block's 10px
    left padding before the number. Both are scoped to line-numbered blocks so
    plain code blocks keep their normal padding. */
 .slidev-layout.db-default .slidev-code-line-numbers .slidev-code,
-.slidev-layout.db-default .shiki-magic-move-container.slidev-code {
+.slidev-layout.db-default .shiki-magic-move-container.slidev-code:has(.shiki-magic-move-line-number) {
   /* override the padding *variable* (Slidev applies padding via it, which beats
      a plain padding-left here). top right bottom left — only the left shrinks.
      The Magic Move container isn't wrapped in .slidev-code-line-numbers, so it
-     needs the same override to keep its gutter rule aligned with plain blocks. */
+     needs the same override to keep its gutter rule aligned with plain blocks;
+     one without line numbers keeps the plain blocks' zero inset. */
   --slidev-code-padding: 4px 10px 4px 6px;   /* less space left of the numbers (was 10px) */
 }
 .slidev-layout.db-default .slidev-code-line-numbers .slidev-code code .line::before {
@@ -251,13 +290,16 @@
 /* Optional caption above a code block.
    Authoring:  ```python [What this snippet does]  */
 .slidev-layout.db-default .slidev-code-block-title {
-  padding: 3px 10px;
+  padding: 3px 0;                 /* flush with the code text below (see above) */
   background: transparent;        /* drop Slidev's heavy gray title bar */
-  font-size: 11px;
+  font-size: var(--db-fs-caption);
   font-style: italic;
   color: var(--db-text);
   opacity: 0.85;
 }
+.slidev-layout.db-default .with-bg .slidev-code-block-title {
+  padding-inline: 10px;           /* match the boxed code's inset */
+}
 
 /* Optional table captions (need Comark, enabled by this theme).
    ABOVE the table:  [Title]{.table-caption}     -> black, non-italic
@@ -270,7 +312,7 @@
 .slidev-layout.db-default p:has(.table-caption),
 .slidev-layout.db-default .table-footer,
 .slidev-layout.db-default p:has(.table-footer) {
-  font-size: 11px;
+  font-size: var(--db-fs-caption);
   background: transparent !important;
 }
 .slidev-layout.db-default .table-caption,
@@ -310,7 +352,7 @@
 .slidev-layout.db-default table {
   border-collapse: collapse;
   width: auto;                    /* default: hug content */
-  font-size: 10px;                /* 10pt (canvas 720 => px == pt) */
+  font-size: var(--db-fs-table);  /* 10pt */
 }
 /* Width control: tables hug content by default. To pin a width, wrap in
    <div class="table-w" style="width: …"> — the table then fills that box, so
@@ -349,6 +391,7 @@
   border: none;                   /* no vertical/cell borders */
   padding: 2px 8px 4px;           /* tight padding; bottom>top optically centers
                                      single-line text (nudges it up) */
+  line-height: 1.4;               /* rows every 19.2pt (25.6px), as in the template */
   vertical-align: middle;         /* center cell text vertically */
   text-align: center;             /* center by default; :--/--: in markdown override */
 }
@@ -372,6 +415,12 @@
 .slidev-layout.db-default tbody tr:last-child td {
   border-bottom: 1px solid var(--db-table-rule);
 }
+/* Footer page number (global-bottom.vue): 12pt like the template. */
+.db-footer__page {
+  font-size: var(--db-fs-small);
+  color: var(--db-text);
+}
+
 /* Inline code inside tables AND headings: keep the syntax colors but drop the
    gray "pill" background/padding so it reads like plain text. */
 .slidev-layout.db-default th code,
@@ -382,3 +431,20 @@
   background: transparent;
   padding: 0;
 }
+/* In a heading, code takes the heading's size and weight (the template's
+   "1.1 DISTINCT" is bold mono), not the light, smaller inline-code style. */
+.slidev-layout.db-default :is(h1, h2, h3) code {
+  font-size: 1em;
+  font-weight: inherit;
+}
+
+/* Inline math: KaTeX's default 1.21em makes capitals 15% taller than Noto
+   Sans ones, and its 1.2 line height stretches the bullet it sits in. At 1.05em
+   the capitals match; line-height 1 keeps a formula's bullet within 0.5px of its
+   neighbours. (Not 0: that misplaces overlays such as the slash of \notin.) */
+.slidev-layout.db-default .katex {
+  font-size: 1.05em;
+}
+.slidev-layout.db-default :not(.katex-display) > .katex {
+  line-height: 1;
+}