{"id":50266984,"url":"https://github.com/patrickedqvist/modern-css-presentation","last_synced_at":"2026-05-27T14:13:30.329Z","repository":{"id":351961252,"uuid":"1213244110","full_name":"patrickedqvist/modern-css-presentation","owner":"patrickedqvist","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-17T08:14:21.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-17T09:34:55.760Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patrickedqvist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-17T07:22:06.000Z","updated_at":"2026-04-17T08:14:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/patrickedqvist/modern-css-presentation","commit_stats":null,"previous_names":["patrickedqvist/modern-css-presentation"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/patrickedqvist/modern-css-presentation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickedqvist%2Fmodern-css-presentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickedqvist%2Fmodern-css-presentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickedqvist%2Fmodern-css-presentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickedqvist%2Fmodern-css-presentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patrickedqvist","download_url":"https://codeload.github.com/patrickedqvist/modern-css-presentation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patrickedqvist%2Fmodern-css-presentation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33569369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-27T02:00:06.184Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-27T14:13:29.013Z","updated_at":"2026-05-27T14:13:30.321Z","avatar_url":"https://github.com/patrickedqvist.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Presentation Deck\n\nA slide deck built with native CSS scroll snapping. Use arrow down/up moves between sections, arrow left/right moves deeper within a section. Fullscreen is available too.\n\n## Quick start\n\n```bash\nnpm install\nnpm run dev\n```\n\nOpen the local URL Vite prints (usually `http://localhost:5173`).\n\n## How the deck works\n\nThe deck is a single `index.html` file. Slides are grouped into **rows** (major sections). Each row can contain one or more **slides**.\n\n```\n\u003cmain class=\"deck js-deck\"\u003e\n  \u003cdiv class=\"deck-row js-deck-row\"\u003e        ← vertical snap unit\n    \u003csection class=\"slide js-slide\"\u003e        ← horizontal snap unit\n    \u003csection class=\"slide js-slide\"\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"deck-row js-deck-row\"\u003e\n    \u003csection class=\"slide js-slide\"\u003e\n  \u003c/div\u003e\n\u003c/main\u003e\n```\n\n- **↓ / ↑** moves between rows (sections)\n- **← / →** moves between slides within a row\n- **Home / End** jumps to first / last section\n- The nav bar at the bottom links to section intros\n\nThe scroll snapping is CSS-native (`scroll-snap-type: y mandatory` on the deck, `x mandatory` on each row). The JS just coordinates keyboard events, active-slide tracking, and URL hash updates.\n\n## Adding or editing slides\n\n### 1. Pick a template\n\nCopy one of the HTML snippets from `templates/`:\n\n| Template | Use for |\n|----------|---------|\n| `row.html` | Wrapper for a new section. Add `deck-row--multi` class if it contains more than one slide. |\n| `slide-title.html` | Opening / cover slide with a large title and aside panel. |\n| `slide-section.html` | Section divider — typically the first slide in each row. |\n| `slide-two-col.html` | Prose on the left, bullet panel on the right. |\n| `slide-code.html` | Code block on the left, annotation panel on the right. |\n| `slide-compare.html` | Two side-by-side cards for contrasting concepts. |\n| `slide-takeaway.html` | A single bold statement with supporting text. |\n| `slide-qa.html` | Closing / Q\u0026A slide. |\n\n### 2. Paste into `index.html`\n\nPlace the slide inside a `deck-row` wrapper in `\u003cmain\u003e`. Each template has `SLIDE_ID` placeholders — replace them with a unique id (used for hash navigation).\n\n### 3. Set the accent colour\n\nEach slide has a `data-accent` attribute. Options: `blue`, `green`, `purple`, `warning`, `danger`.\n\n### 4. Update the nav bar (if adding a new section)\n\nAdd a link inside `\u003cnav class=\"deck-nav\"\u003e`:\n\n```html\n\u003ca href=\"#your-section-intro-id\" data-row=\"N\"\u003eLabel\u003c/a\u003e\n```\n\n`data-row` is the zero-based row index — it controls which nav link highlights as active.\n\n## File structure\n\n```\nindex.html              ← the deck\nassets/\n  css/theme.css         ← all styles (deck mechanics + visual theme)\n  js/main.js            ← keyboard nav, active tracking, hash updates\n  js/code-block.js      ← \u003ccode-block\u003e web component (Shiki syntax highlighting)\ntemplates/              ← copy-paste slide blueprints\npresentation.md         ← talk manuscript / speaker notes\n```\n\n## Code blocks\n\nCode slides use a `\u003ccode-block\u003e` web component powered by [Shiki](https://shiki.style/) with the `github-dark` theme. Wrap your code in a `\u003cscript type=\"text/plain\"\u003e` to avoid HTML escaping:\n\n```html\n\u003ccode-block lang=\"css\"\u003e\u003cscript type=\"text/plain\"\u003e\n.card:has(.badge--urgent) {\n  border-color: var(--color-danger);\n}\n\u003c/script\u003e\u003c/code-block\u003e\n```\n\nThe `\u003cscript type=\"text/plain\"\u003e` tag tells the browser to treat the content as raw text — no HTML parsing, so angle brackets and ampersands work without escaping. Supported languages: `css`, `html`, `javascript`, `typescript`, `json`, `text`.\n\n## Building for production\n\n```bash\nnpm run build\n```\n\nOutput goes to `dist/`. It's static HTML/CSS/JS — host anywhere.\n\n## GitHub Pages deployment\n\nThis repository includes a GitHub Actions workflow at `.github/workflows/deploy-pages.yml` that:\n\n1. Installs dependencies\n2. Runs `npm run build`\n3. Publishes `dist/` to GitHub Pages\n\nTo enable it:\n\n1. Go to **Settings → Pages**\n2. Set **Source** to **GitHub Actions**\n3. Push to `main` (or run the workflow manually from **Actions**)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickedqvist%2Fmodern-css-presentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickedqvist%2Fmodern-css-presentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickedqvist%2Fmodern-css-presentation/lists"}