feat(slides): add persistent branding with per-slide visibility control

- Add branding overlays: logo, title, author, and footer text
- Use Reveal.js theme CSS variables for automatic color adaptation
- Inline SVGs for currentColor support on any theme
- Per-slide control via HTML comments:
  - <!-- no-branding -->: hide all elements
  - <!-- no-header -->: hide logo + title
  - <!-- no-footer -->: hide author + footer
- Fix body-level CSS selectors for proper visibility
- Add comprehensive documentation in example slides

templates/markdown-slides/assets/media/slides-logo.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Markdown</title><path fill="currentColor" d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>

templates/markdown-slides/content/slides/example/index.md

@@ -8,16 +8,36 @@ venue: "Hugo Blox Tutorial"
 featured: true
 type: slides
 slides:
-  theme: black
-  highlight_style: dracula
-  diagram: true
+  theme: black  # Options: black, white, league, beige, sky, night, serif, simple, solarized
+  highlight_style: dracula  # Code syntax highlighting theme
+  diagram: true  # Enable Mermaid diagrams for flowcharts, etc.
   reveal_options:
-    controls: true
-    progress: true
-    slideNumber: true
-    hash: true
+    controls: true      # Show navigation arrows
+    progress: true      # Show progress bar
+    slideNumber: true   # Show slide numbers
+    hash: true          # Update URL when navigating slides
+
+  # BRANDING: Add logo, title overlay, and footer to your presentation
+  # All settings are optional - remove any you don't need
+  branding:
+    # LOGO: Display your organization's logo
+    logo:
+      filename: "slides-logo.svg"   # File in assets/media/ folder (SVG recommended for any theme)
+      position: "top-right"         # Options: top-left, top-right, bottom-left, bottom-right
+      width: "50px"                 # Logo width (height scales automatically)
+    
+    # TITLE OVERLAY: Show presentation title on every slide
+    title:
+      show: true                    # Set to false to hide
+      position: "bottom-left"       # Options: top-left, top-right, bottom-left, bottom-right
+    
+    # FOOTER TEXT: Display copyright, conference name, etc.
+    footer:
+      text: "© 2026 HugoBlox"       # Supports Markdown (e.g., links)
+      position: "bottom-center"     # Options: top-left, top-right, bottom-left, bottom-right, bottom-center
 ---
 
+<!-- no-branding -->
 # Markdown Slides
 
 ### Write in Markdown. Present Anywhere.
@@ -164,3 +184,127 @@ Use `{{</* slide background-color="#hex" */>}}`
 - Docs: [docs.hugoblox.com](https://docs.hugoblox.com)
 
 *Built with Markdown Slides*
+
+---
+
+## 🎨 Branding Your Slides
+
+Add your identity to every slide with simple configuration!
+
+**What you can add:**
+
+| Element | Position Options |
+|---------|-----------------|
+| Logo | top-left, top-right, bottom-left, bottom-right |
+| Title | Same as above |
+| Author | Same as above |
+| Footer Text | Same + bottom-center |
+
+Edit the `branding:` section in your slide's front matter (top of file).
+
+---
+
+## 📁 Adding Your Logo
+
+1. Place your logo in `assets/media/` folder
+2. Use SVG format for best results (auto-adapts to any theme!)
+3. Add to front matter:
+
+```yaml
+branding:
+  logo:
+    filename: "your-logo.svg"  # Must be in assets/media/
+    position: "top-right"
+    width: "60px"
+```
+
+**Tip:** SVGs with `fill="currentColor"` automatically match theme colors!
+
+---
+
+## 📝 Title & Author Overlays
+
+Show presentation title and/or author on every slide:
+
+```yaml
+branding:
+  title:
+    show: true
+    position: "bottom-left"
+    text: "Short Title"  # Optional: override long page title
+  
+  author:
+    show: true
+    position: "bottom-right"
+```
+
+Author is auto-detected from page front matter (`author:` or `authors:`).
+
+---
+
+## 📄 Footer Text
+
+Add copyright, conference name, or any persistent text:
+
+```yaml
+branding:
+  footer:
+    text: "© 2024 Your Name · ICML 2024"
+    position: "bottom-center"
+```
+
+**Tip:** Supports Markdown! Use `[Link](url)` for clickable links.
+
+---
+
+<!-- no-branding -->
+
+## 🔇 Hiding Branding Per-Slide
+
+Sometimes you want a clean slide (title slides, full-screen images).
+
+Add this comment at the **start** of your slide content:
+
+```markdown
+<!-- no-branding -->
+## My Clean Slide
+
+Content here...
+```
+
+☝️ **This slide uses `<!-- no-branding -->`** — notice no logo or overlays!
+
+---
+
+<!-- no-header -->
+
+## 🔇 Selective Hiding
+
+Hide just the header (logo + title):
+
+```markdown
+<!-- no-header -->
+```
+
+Or just the footer (author + footer text):
+
+```markdown
+<!-- no-footer -->
+```
+
+☝️ **This slide uses `<!-- no-header -->`** — footer still visible below!
+
+---
+
+<!-- no-footer -->
+
+## ✅ Quick Reference
+
+| Comment | Hides |
+|---------|-------|
+| `<!-- no-branding -->` | Everything (logo, title, author, footer) |
+| `<!-- no-header -->` | Logo + Title overlay |
+| `<!-- no-footer -->` | Author + Footer text |
+
+☝️ **This slide uses `<!-- no-footer -->`** — logo still visible above!
+