fb-slides 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/theme.base.css

@@ -309,6 +309,18 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
   height: 100%;
   /* Full-bleed: this one is the demo, not a slide about the demo. */
   margin: 0;
+  box-sizing: border-box;
+  /* The toolbar, arrows and signature live in fixed viewport space along the
+     bottom, where a full-height slide runs under them. Reserve that strip:
+     66px of viewport clears the toolbar (bottom 14px + 44px chip + air), minus
+     the letterbox gap the slide already has, converted to slide space through
+     reveal's own scale. On tall windows the gap alone is enough and this
+     resolves to zero. */
+  padding-bottom: max(0px, calc(
+    (66px
+      - (var(--viewport-height, 100vh) - var(--slide-height, 720px) * var(--slide-scale, 1)) / 2)
+    / var(--slide-scale, 1)
+  ));
 }
 .reveal .slides section.demo-slide header {
   display: flex;
@@ -350,11 +362,10 @@ html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--tex
 .reveal-viewport { --r-controls-spacing: 30px; }
 
 .reveal .slide-number {
-  background: color-mix(in srgb, var(--card) 80%, transparent);
-  color: var(--muted);
+  background: none;
+  color: color-mix(in srgb, var(--muted) 40%, transparent);
   font-family: var(--mono);
-  font-size: 15px;
-  border-radius: 6px;
+  font-size: 13px;
   padding: 3px 8px;
   /* Centred under the arrows: the pair spans 100px inwards from the spacing
      edge, so its middle is spacing + 50px in from the left. */

package/templates/starter/decks/02-demos.md

@@ -20,6 +20,16 @@ section: Demos
 
 ---
 
+<!-- demo: https://stage.mokup.dev/embed/95ff8eab-3c34-4eaf-9f53-e263ee1c6062 -->
+
+## A mokup embed
+
+<div class="mockup-frame">
+  <iframe src="https://stage.mokup.dev/embed/95ff8eab-3c34-4eaf-9f53-e263ee1c6062" width="800" height="500" style="border:0;" allowfullscreen></iframe>
+</div>
+
+---
+
 ## How those two slides work
 
 ```markdown

package/templates/starter/theme.css

@@ -2,6 +2,17 @@
    Redefining a token here reskins the whole deck. Delete this file if the
    default dark theme is fine as it is. */
 
+.mockup-frame {
+  display: flex;
+  justify-content: center;
+}
+
+.mockup-frame iframe {
+  max-width: 100%;
+  border-radius: 8px;
+  background: #fff;
+}
+
 /*
 :root {
   --bg: #0e1116;