Start fresh with minimal working Reveal.js template#169
Conversation
- Use Reveal.js 4.5.0 from CDN (simpler, more reliable) - Create minimal 4-slide test deck to verify rendering works - Strip down CSS to only essential GNAT styling - Once confirmed working, incrementally add all 33 slides Test slides: 1. Title slide 2. The Problem 3. The Solution 4. Confirmation slide (shows if rendering works) https://claude.ai/code/session_01FUJQyGdWpZSgYkW1Xb95gU
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR resets the Reveal.js deck to a minimal, known-working 4-slide template using Reveal.js 4.5.0 from a CDN to validate rendering before reintroducing the full slide set.
Changes:
- Switch Reveal.js assets from jsDelivr (v5.1.0) to cdnjs (v4.5.0) and simplify initialization.
- Replace the full 33-slide deck with a minimal 4-slide “rendering test” deck.
- Strip the custom CSS down to a smaller set of GNAT styling primitives.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>GNAT — 33-Slide Presentation</title> |
There was a problem hiding this comment.
The document title still says “33-Slide Presentation”, but this PR’s purpose/description is a minimal 4-slide test deck. Update the title to reflect the current deck (e.g., “GNAT — Test Deck” / “GNAT — Minimal Reveal.js Template”) to avoid confusing readers and browser tabs/history.
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>GNAT — 33-Slide Presentation</title> |
There was a problem hiding this comment.
Reveal.js 4’s recommended HTML includes the reset stylesheet (dist/reset.css). Without it, base element styles can vary across browsers and subtly affect layout/typography. Consider adding the matching reset.css from the same CDN/version to make rendering more consistent.
| <title>GNAT — 33-Slide Presentation</title> | |
| <title>GNAT — 33-Slide Presentation</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reset.min.css"> |
| .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; } | ||
| .card { background: var(--surface-2); border: 2px solid var(--line); padding: 1rem; border-radius: 8px; text-align: left; } | ||
| .card h3 { color: var(--brand); margin: 0 0 0.5rem 0; font-size: 1.1rem; } | ||
| .card p { font-size: 0.85rem; color: var(--muted); margin: 0; } |
There was a problem hiding this comment.
The fixed 2-column grid can become cramped or overflow on narrow screens (mobile, split view). Use a responsive grid (e.g., auto-fit/minmax) and/or a small-screen media query so cards stack to 1 column when space is limited.
| .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; } | |
| .card { background: var(--surface-2); border: 2px solid var(--line); padding: 1rem; border-radius: 8px; text-align: left; } | |
| .card h3 { color: var(--brand); margin: 0 0 0.5rem 0; font-size: 1.1rem; } | |
| .card p { font-size: 0.85rem; color: var(--muted); margin: 0; } | |
| .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; } | |
| .card { background: var(--surface-2); border: 2px solid var(--line); padding: 1rem; border-radius: 8px; text-align: left; } | |
| .card h3 { color: var(--brand); margin: 0 0 0.5rem 0; font-size: 1.1rem; } | |
| .card p { font-size: 0.85rem; color: var(--muted); margin: 0; } | |
| @media (max-width: 600px) { | |
| .card-grid { grid-template-columns: 1fr; } | |
| } |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/black.min.css"> |
There was a problem hiding this comment.
Loading JS/CSS from a third-party CDN without Subresource Integrity (SRI) means the page fully trusts the CDN response at runtime. If this deck is ever served outside of local-only contexts, consider adding integrity="..." and crossorigin attributes for these assets, or vendoring/hosting the Reveal.js files within the repo to reduce supply-chain risk.
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/plugin/notes/notes.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script> |
There was a problem hiding this comment.
Loading JS/CSS from a third-party CDN without Subresource Integrity (SRI) means the page fully trusts the CDN response at runtime. If this deck is ever served outside of local-only contexts, consider adding integrity="..." and crossorigin attributes for these assets, or vendoring/hosting the Reveal.js files within the repo to reduce supply-chain risk.
Test slides:
https://claude.ai/code/session_01FUJQyGdWpZSgYkW1Xb95gU