@miragon/slidev-toolkit 1.0.0

package/layouts/closing.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * closing — animierte Abschlussseite (Gegenstück zu `cover`).
+ *
+ * Schließt das Deck mit demselben Brand-Moment, mit dem `cover` es öffnet:
+ * Mesh-Shader als Vollbild-Hintergrund (z0), Content darüber (z2). Trägt die
+ * Schlussaussage („Thank you", Call-to-Action) und Kontaktangaben.
+ *
+ * Slots: default = Schlussaussage (h1) + optionaler Satz (p) aus Markdown.
+ * Frontmatter-Props:
+ *   eyebrow  — kleine Überzeile (z. B. "Let's talk")
+ *   contact  — Kontaktzeile rechts im Footer (z. B. "name@miragon.io")
+ *   footer   — Footer-Text links neben dem Logo (optional)
+ */
+defineProps<{
+  eyebrow?: string
+  contact?: string
+  footer?: string
+}>()
+
+// Brand-Asset reist mit dem Theme: statischer Import, von Vite gebundlet und
+// base-aware. Das Deck erbt das Logo aus dem Theme, ohne es selbst zu duplizieren.
+import logoSrc from '../assets/logo.svg'
+function onLogoError(e: Event) {
+  ;(e.target as HTMLImageElement).style.display = 'none'
+}
+</script>
+
+<template>
+  <div class="closing-layout">
+    <BrandMeshBackground />
+
+    <div class="closing-content">
+      <div v-if="eyebrow" class="closing-eyebrow">{{ eyebrow }}</div>
+      <div class="closing-body">
+        <slot />
+      </div>
+    </div>
+
+    <div class="closing-footer">
+      <img :src="logoSrc" alt="Miragon" class="closing-logo" @error="onLogoError" />
+      <span v-if="contact" class="closing-contact">{{ contact }}</span>
+      <span v-else-if="footer" class="closing-footer-text">{{ footer }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.closing-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: var(--miragon-white);
+  /* Brand-Gradient als unterste Ebene: greift, falls BrandMeshBackground (WebGL) gar nicht
+     mountet (PDF/headless ohne GPU) — so nie Weiß, immer der Miragon-Verlauf.
+     BrandMeshBackground liegt mit position:absolute darüber und verdeckt ihn live. */
+  background: linear-gradient(125deg, #335DE5 0%, #1a1a4e 35%, #0d0d2b 55%, #00C853 100%);
+}
+
+.closing-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 4rem;
+  max-width: 56rem;
+}
+
+.closing-eyebrow {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--miragon-green);
+  margin-bottom: 1.25rem;
+}
+
+/* Schlussaussage: weiß, kursiv, sehr fett — spiegelt cover. */
+.closing-body :deep(h1) {
+  font-size: 3.6rem;
+  line-height: 1.05;
+  font-weight: 900;
+  font-style: italic;
+  color: var(--miragon-white);
+  margin: 0;
+  text-shadow: 0 2px 24px rgba(13, 13, 43, 0.35);
+}
+
+.closing-body :deep(p) {
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.88);
+  margin-top: 1.25rem;
+  max-width: 42rem;
+}
+
+.closing-body :deep(a) {
+  color: var(--miragon-green);
+  text-decoration: none;
+}
+
+.closing-footer {
+  position: absolute;
+  z-index: 2;
+  bottom: 2rem;
+  left: 4rem;
+  right: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.closing-logo { height: 1.75rem; opacity: 0.95; }
+
+.closing-contact {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--miragon-green);
+}
+.closing-footer-text {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+</style>

package/layouts/compare.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+/**
+ * compare — Gegenüberstellung zweier Seiten (STATISCHE Welt, kein Mesh-Shader).
+ *
+ * Zwei gleichwertige Panels nebeneinander: vorher/nachher, manuell/automatisiert,
+ * Option A/B. Die Panels sind WEISS (white-card rule, siehe slides Skill) —
+ * die semantische Unterscheidung (links = Problem, rechts = Lösung) trägt die
+ * Panel-Titel-Farbe (blue-deep vs. green-deep) sowie der Bullet-Marker (blauer
+ * vs. grüner Gradient). Folgt der hero/person-Bildsprache: heller Grund, klarer
+ * Akzent-Balken, große Typografie.
+ *
+ * Named Slots (in Markdown mit `::left::` / `::right::` befüllen):
+ *   left   — Inhalt der linken Spalte (Bullets/Text)
+ *   right  — Inhalt der rechten Spalte
+ *   default — optionaler Einleitungssatz unter dem Titel
+ *
+ * Frontmatter-Props:
+ *   title       — Slide-Titel (optional)
+ *   eyebrow     — kleine Überzeile (optional)
+ *   leftTitle   — Kopf des linken Panels (default "Before")
+ *   rightTitle  — Kopf des rechten Panels (default "After")
+ *   accent      — "blue" | "green" | "mixed" — Balken-/Eyebrow-Akzent (default blue)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    leftTitle?: string
+    rightTitle?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    // Slidev reicht das volle Frontmatter-Objekt als `frontmatter`-Prop durch.
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue', leftTitle: 'Before', rightTitle: 'After' },
+)
+
+// `title` ist ein RESERVIERTES Slidev-Frontmatter-Feld (TOC/Nav) und wird NICHT
+// als eigener Prop durchgereicht (FRONTMATTER_FIELDS). Daher aus dem
+// mitgelieferten `frontmatter`-Objekt lesen, damit `title:` in slides.md wie
+// dokumentiert funktioniert.
+const title = computed(() => props.frontmatter?.title as string | undefined)
+
+// Token reaktiv (siehe hero.vue) — alle Werte aus theme.css, keine Hex.
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+// Panel-Töne folgen dem accent: "mixed" trägt die Problem/Lösung-Semantik
+// (links blau, rechts grün); "blue"/"green" macht beide Seiten einfarbig.
+// Default bleibt mixed-artig (blau/grün), damit bestehende Decks unverändert sind.
+const twoTone = computed(() => props.accent !== 'blue' && props.accent !== 'green')
+const mono = computed(() => (props.accent === 'green' ? 'green-deep' : 'blue-deep'))
+const leftTone = computed(() => (twoTone.value ? 'var(--miragon-blue-deep)' : `var(--miragon-${mono.value})`))
+const rightTone = computed(() => (twoTone.value ? 'var(--miragon-green-deep)' : `var(--miragon-${mono.value})`))
+const leftMark = computed(() => (twoTone.value || props.accent === 'blue' ? 'var(--miragon-gradient-blue)' : 'var(--miragon-gradient-green)'))
+const rightMark = computed(() => (twoTone.value || props.accent === 'green' ? 'var(--miragon-gradient-green)' : 'var(--miragon-gradient-blue)'))
+</script>
+
+<template>
+  <div
+    class="compare-layout"
+    :style="{ '--cmp-grad': gradientVar, '--cmp-accent': accentVar, '--cmp-left': leftTone, '--cmp-right': rightTone, '--cmp-left-mark': leftMark, '--cmp-right-mark': rightMark }"
+  >
+    <div class="compare-inner">
+      <header v-if="title || eyebrow" class="compare-head">
+        <span class="compare-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="compare-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="compare-title">{{ title }}</h2>
+        <div class="compare-lead"><slot /></div>
+      </header>
+
+      <div class="compare-grid">
+        <section class="compare-panel panel-left">
+          <h3 class="panel-title">{{ leftTitle }}</h3>
+          <div class="panel-body"><slot name="left" /></div>
+        </section>
+
+        <section class="compare-panel panel-right">
+          <h3 class="panel-title">{{ rightTitle }}</h3>
+          <div class="panel-body"><slot name="right" /></div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.compare-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.compare-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 70rem;
+  margin: 0 auto;
+  padding: 3.5rem 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Kopf ----------------------------------------------------------------- */
+.compare-head {
+  flex: 0 0 auto;
+  margin-bottom: 2rem;
+}
+.compare-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--cmp-grad);
+  margin-bottom: 1.25rem;
+}
+.compare-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--cmp-accent);
+  margin-bottom: 0.75rem;
+}
+.compare-title {
+  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.compare-lead :deep(p) {
+  font-size: 1.15rem;
+  line-height: 1.55;
+  color: var(--miragon-text-secondary);
+  margin: 1rem 0 0;
+  max-width: 46rem;
+}
+
+/* --- Zwei-Panel-Raster ---------------------------------------------------- */
+.compare-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+/* Weisse Panels (white-card rule §6) — die Semantik trägt der Titel + Marker. */
+.compare-panel {
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1.1rem;
+  padding: 2rem 2rem 1.5rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+}
+.panel-title {
+  font-size: 1.35rem;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  margin: 0 0 1.25rem;
+}
+/* Titel-Farbe trägt die semantische Unterscheidung links=Problem / rechts=Lösung
+   (bei accent "mixed"); bei accent "blue"/"green" sind beide Seiten einfarbig. */
+.panel-left  .panel-title { color: var(--cmp-left); }
+.panel-right .panel-title { color: var(--cmp-right); }
+
+/* Panel-Body: Bullets mit Akzent-Marker passend zur Panel-Seite. */
+.panel-body :deep(ul) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.panel-body :deep(li) {
+  position: relative;
+  font-size: 1.1rem;
+  line-height: 1.45;
+  color: var(--miragon-text-secondary);
+  padding-left: 1.7rem;
+  margin: 0 0 0.95rem;
+}
+.panel-body :deep(li)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 0.18rem;
+}
+.panel-left .panel-body :deep(li)::before {
+  background: var(--cmp-left-mark);
+}
+.panel-right .panel-body :deep(li)::before {
+  background: var(--cmp-right-mark);
+}
+.panel-body :deep(p) {
+  font-size: 1.1rem;
+  line-height: 1.5;
+  color: var(--miragon-text-secondary);
+  margin: 0 0 0.9rem;
+}
+.panel-body :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+</style>

package/layouts/content-image.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+/**
+ * content-image — content slide with a side image (STATIC world, no shader).
+ *
+ * Two-column layout: an image on one side, the content (heading + body) on
+ * the other. The same pattern as a typical "We are X, but who are you?"
+ * slide: a visual anchor + a short narrative or list. Use whenever you want
+ * a visual to accompany prose.
+ *
+ * Frontmatter props:
+ *   title      — slide title (h2-level)
+ *   eyebrow    — uppercase kicker
+ *   accent     — "blue" | "green" | "mixed" (default blue)
+ *   image      — served URL path to the image (e.g. /resources/02-content/team.jpg)
+ *   imageAlt   — alt text for accessibility (default "")
+ *   side       — "left" | "right" (default "left") — which side the image is on
+ * Slot:
+ *   default    — free Markdown body (lead, bullets, numbered steps, …)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    image?: string
+    imageAlt?: string
+    side?: 'left' | 'right'
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue', side: 'left', imageAlt: '' },
+)
+
+const title = computed(() => props.frontmatter?.title as string | undefined)
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+// Base-Pfad respektieren (GitHub Pages baut unter /<repo>/). Runtime-Strings
+// werden von Vite NICHT umgeschrieben — daher manuell mit BASE_URL auflösen.
+// Gleiche Logik wie in person.vue.
+function withBase(path?: string) {
+  if (!path) return path
+  if (/^https?:\/\//.test(path)) return path
+  return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
+}
+const imageSrc = computed(() => withBase(props.image))
+</script>
+
+<template>
+  <div
+    class="ci-layout"
+    :class="[`image-${side}`]"
+    :style="{ '--ci-grad': gradientVar, '--ci-accent': accentVar }"
+  >
+    <div class="ci-inner">
+      <div class="ci-image">
+        <img v-if="image" :src="imageSrc" :alt="imageAlt" />
+      </div>
+
+      <div class="ci-content">
+        <span class="ci-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="ci-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="ci-title">{{ title }}</h2>
+        <div class="ci-body"><slot /></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ci-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.ci-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 74rem;
+  margin: 0 auto;
+  padding: 3rem 4rem;
+  display: grid;
+  grid-template-columns: 1fr 1.1fr;
+  gap: 3rem;
+  align-items: center;
+}
+.image-right .ci-inner {
+  grid-template-columns: 1.1fr 1fr;
+}
+.image-right .ci-image {
+  order: 2;
+}
+.image-right .ci-content {
+  order: 1;
+}
+
+.ci-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ci-image img {
+  width: 100%;
+  max-height: 26rem;
+  object-fit: cover;
+  border-radius: 1.1rem;
+  box-shadow: 0 12px 30px rgba(51, 93, 229, 0.18);
+  background: var(--miragon-white);
+}
+
+.ci-content {
+  display: flex;
+  flex-direction: column;
+}
+.ci-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--ci-grad);
+  margin-bottom: 1rem;
+}
+.ci-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ci-accent);
+  margin-bottom: 0.6rem;
+}
+.ci-title {
+  font-size: clamp(1.75rem, 2.6vw, 2rem);
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0 0 1.25rem;
+}
+.ci-body :deep(p) {
+  font-size: 1.05rem;
+  line-height: 1.55;
+  color: var(--miragon-text-secondary);
+  margin: 0 0 0.85rem;
+}
+.ci-body :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+
+/* Bullets with accent marker (same pattern as the `content` layout). */
+.ci-body :deep(ul) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.ci-body :deep(li) {
+  position: relative;
+  font-size: 1.05rem;
+  line-height: 1.5;
+  color: var(--miragon-text-secondary);
+  padding-left: 1.6rem;
+  margin: 0 0 0.6rem;
+}
+.ci-body :deep(li)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 0.18rem;
+  background: var(--ci-grad);
+}
+</style>

package/layouts/content.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+/**
+ * content — Workhorse-Inhaltsslide (STATISCHE Welt, KEIN Mesh-Shader).
+ *
+ * Der Alltags-Archetyp: ein Titel oben, darunter freier Body (Bullets,
+ * <v-clicks>, kleine Karten). Folgt der hero/person-Bildsprache: heller Grund,
+ * großzügige Typografie, ein einziger sparsamer Gradient-Akzent (Balken +
+ * Bullet-Marker). Strukturelle Visualisierung statt dekoriertem Text —
+ * Aufzählungen bekommen einen klaren Akzent-Marker (kein Emoji).
+ *
+ * Frontmatter-Props:
+ *   title    — Slide-Titel (h2-Ebene; optional, sonst nur Body)
+ *   eyebrow  — kleine Überzeile (optional)
+ *   accent   — "blue" | "green" | "mixed" — Gradient-Akzent (default blue)
+ * Slot: default = Body aus Markdown (max. 5 Bullets · max. 1 Verschachtelung).
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    // Slidev reicht das volle Frontmatter-Objekt als `frontmatter`-Prop durch.
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue' },
+)
+
+// `title` ist ein RESERVIERTES Slidev-Frontmatter-Feld (TOC/Nav) und wird NICHT
+// als eigener Prop durchgereicht (FRONTMATTER_FIELDS). Daher aus dem
+// mitgelieferten `frontmatter`-Objekt lesen, damit `title:` in slides.md wie
+// dokumentiert funktioniert.
+const title = computed(() => props.frontmatter?.title as string | undefined)
+
+// Token reaktiv (siehe hero.vue) — alle Werte aus theme.css, keine Hex.
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+</script>
+
+<template>
+  <div
+    class="content-layout"
+    :style="{ '--c-grad': gradientVar, '--c-accent': accentVar }"
+  >
+    <div class="content-inner">
+      <header v-if="title || eyebrow" class="content-head">
+        <span class="content-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="content-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="content-title">{{ title }}</h2>
+      </header>
+
+      <div class="content-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.content-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 68rem;
+  margin: 0 auto;
+  padding: 1.75rem 5rem 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Kopf: Balken + Eyebrow + Titel (wie hero, kompakter) ----------------- */
+.content-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.5rem;
+}
+.content-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--c-grad);
+  margin-bottom: 0.75rem;
+}
+.content-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--c-accent);
+  margin-bottom: 0.75rem;
+}
+.content-title {
+  font-size: clamp(2rem, 3.4vw, 2.9rem);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+
+/* --- Body: freier Markdown-Inhalt ----------------------------------------- */
+.content-body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.content-body :deep(p) {
+  font-size: 1.2rem;
+  line-height: 1.6;
+  color: var(--miragon-text-secondary);
+  margin: 0 0 1rem;
+  max-width: 48rem;
+}
+
+/* Aufzählungen: klarer Akzent-Marker (CSS-Quadrat, kein Emoji). */
+.content-body :deep(ul) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.content-body :deep(li) {
+  position: relative;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  color: var(--miragon-text-secondary);
+  padding-left: 2rem;
+  margin: 0 0 1.1rem;
+  max-width: 50rem;
+}
+.content-body :deep(li)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.5em;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 0.2rem;
+  background: var(--c-grad);
+}
+/* Eine Verschachtelungsebene: dezenter, kleinerer Marker. */
+.content-body :deep(li ul) {
+  margin-top: 0.8rem;
+}
+.content-body :deep(li li) {
+  font-size: 1.05rem;
+  color: var(--miragon-text-muted);
+  margin-bottom: 0.6rem;
+}
+.content-body :deep(li li)::before {
+  top: 0.55em;
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: var(--c-accent);
+}
+
+.content-body :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+.content-body :deep(a) {
+  color: var(--c-accent);
+  text-decoration: none;
+  border-bottom: 1px solid currentColor;
+}
+.content-body :deep(code) {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.9em;
+  background: var(--miragon-blue-light);
+  color: var(--miragon-blue-darker);
+  padding: 0.1em 0.4em;
+  border-radius: 0.35rem;
+}
+</style>