hps-bauhaus

# Bauhaus Primary (hps-bauhaus)

Single-theme deck plugin ported from the `bauhaus` theme of the upstream
MIT-licensed [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill)
(36 themes × 31 layouts × 27 animations). This plugin locks one skin:
design-history geometric modernism — the 1919–1933 Dessau language of
square/triangle/circle, the three primaries on an aged paper ground, and
typography that behaves like a poster.

**Start from `example.html`. Replace content only. Never rewrite the design
system or the runtime script. Never introduce a color or font outside the
token sheet below.**

## Locked token sheet (`:root`, do not deviate)

```css
:root{
  --bg:#f4efe3;            /* aged canvas ground */
  --bg-soft:#e8e2d1;       /* darker canvas */
  --surface:#ffffff;       /* card paper */
  --surface-2:#f4efe3;
  --border:#111111;        /* ink — every stroke is this */
  --border-strong:#111111;
  --text-1:#111111; --text-2:#333333; --text-3:#666666;
  --accent:#e03c27;        /* Rot — red */
  --accent-2:#f4c430;      /* Gelb — yellow */
  --accent-3:#1d4eaf;      /* Blau — blue */
  --good:#1b8c3c; --warn:#f4c430; --bad:#e03c27;
  --grad:linear-gradient(135deg,#e03c27 0 33%,#f4c430 33% 66%,#1d4eaf 66% 100%);
  --grad-soft:linear-gradient(135deg,#f4efe3,#e8e2d1);
  --radius:0; --radius-sm:0; --radius-lg:0;          /* zero radius, always */
  --shadow:4px 4px 0 #111; --shadow-lg:8px 8px 0 #111; /* hard offset, never blurred */
  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --font-display:'Archivo Black','Space Grotesk','Noto Sans SC',sans-serif;
  --letter-tight:-.03em; --letter-normal:-.01em;
  --ease:cubic-bezier(.4,0,.2,1);
}
```

Hard rules derived from the sheet:

- The three-band gradient (`--grad`) has **hard stops** — it is a flag, not a
  blend. Use it only on `.gradient-text` hero words, `.tri-band`, and
  `.divider-accent`. Never use soft multi-stop gradients.
- All chrome is ink: `2px solid #111` borders on cards, pills, chart bars,
  checkboxes; `3px` strokes inside SVG.
- Shadows are hard offsets (`4px 4px 0 #111`, `8px 8px 0 #111`). Blurred
  `rgba` drop shadows are forbidden.
- `border-radius` is `0` on every element except the geometric circle device
  (`border-radius:50%`).

## Typography

- **Display** (`.h1 .h2 .stat-big .quote .section-num .kpi .num`):
  `Archivo Black`, weight 400 (the face is already black — never fake-bold),
  uppercase, letter-spacing `-.03em`.
- **Body** (`.lede`, card copy, lists): `Space Grotesk`, weights 300–700.
- **Mono** (step counters, theme chip, code): `JetBrains Mono`.
- No serif, no slab, no handwriting, no brush — those belong to sibling
  themes (`editorial-serif`, `peoples-platform`), not this one.
- Google Fonts via `@import` is the only allowed remote resource.

## Signature devices (keep these; they are the style)

- **Kandinsky mark**: inline SVG of red square + yellow triangle + blue
  circle, 3px ink strokes — on the cover and the closer.
- **Outlined section numerals**: `.section-num` rendered stroke-only via
  `-webkit-text-stroke:3px var(--text-1)` with transparent fill.
- **Primary top rules**: `.card-accent / .card-accent-2 / .card-accent-3`
  give cards an 8px red/yellow/blue top border; rotate the three primaries
  across a grid rather than repeating one.
- **Tri-band**: `.tri-band` and `.divider-accent` are ink-bordered strips of
  the hard three-band gradient.
- **Square checkboxes**: `.check li::before` is a yellow ink-bordered square
  with an ink check stroke.
- **Geo strip**: `.geo-square / .geo-triangle / .geo-circle` repeat the
  square/triangle/circle motif as a footer ornament.

## Layout system (shared upstream catalog, 31 layouts)

The slide scaffold and class vocabulary come from the upstream html-ppt
system. Master categories (compose `cover → toc → section-divider → content
pages → closer`):

| group | layouts |
|---|---|
| Openers & transitions | `cover` `toc` `section-divider` |
| Text-centric | `bullets` `two-column` `three-column` `big-quote` |
| Numbers & data | `stat-highlight` `kpi-grid` `table` `chart-bar` `chart-line` `chart-pie` `chart-radar` |
| Code & terminal | `code` `diff` `terminal` |
| Diagrams & flows | `flow-diagram` `arch-diagram` `process-steps` `mindmap` |
| Plans & comparisons | `timeline` `roadmap` `gantt` `comparison` `pros-cons` `todo-checklist` |
| Visuals | `image-hero` `image-grid` |
| Closers | `cta` `thanks` |

The seed demonstrates 10 of them: cover, toc, section-divider, two-column,
kpi-grid, stat-highlight, chart-bar, process-steps, big-quote, thanks.
Charts are always pure CSS blocks or inline SVG with primary fills and ink
strokes — never Chart.js or any external library. "Images" are geometric
SVG compositions; no photos, no external image hosts.

## Page structure & runtime contract

- One self-contained HTML file: inline `<style>` + inline `<script>`, zero
  build, zero external JS/CSS (Google Fonts `@import` excepted).
- Every page is `<section class="slide" data-title="...">` inside
  `<div class="deck" id="deck">` — a horizontal scroll-snap strip, each
  slide exactly `100vw × 100vh` (`flex:0 0 100vw`), 16:9 / 1280×720
  baseline with `clamp()` type scales, padding `72px 96px`. One screen per
  slide; no internal vertical scrolling.
- Fixed chrome: `.deck-header` (deck name + theme chip), `.deck-footer`
  (attribution + `N / total` counter), `.progress-bar` (ink-topped red fill).
- Keyboard: `←` `→` `Space` `PageUp` `PageDown` `Home` `End` navigate;
  `#/N` (1-based) hash deep-links via `history.replaceState` in try/catch
  (srcdoc-safe). The script dedupes dual window/document capture-phase key
  listeners by Event identity and auto-focuses `<body>` — these solve real
  iframe-host bugs; keep the script verbatim.
- Speaker notes: one hidden `<div class="notes">…</div>` per slide, 1–3
  sentences.
- Animations: restrained upstream subset — `anim-rise-in` on the hero,
  `anim-fade-up` on quotes, `anim-stagger-list` on grids. At most one hero
  animation plus one stagger per slide.

## Authoring checklist

1. Copy `example.html`; keep all `<style>` blocks and the `<script>`
   verbatim.
2. Replace the 10 demo slides with the planned layout sequence; the script
   recomputes the `N / total` counter automatically.
3. Real content, real numbers — no lorem ipsum, no placeholder images.
4. Rotate the three primaries deliberately (red = emphasis, yellow = warm
   support, blue = structure); large areas stay canvas + ink.
5. Verify: arrows + Space navigate, `#/5` deep-links, no slide overflows
   vertically, every stroke is #111, every radius is 0.

## Attribution

Token vocabulary, layout taxonomy, slide scaffold, and the bauhaus palette
come from the upstream MIT-licensed
[`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill)
(© lewis &lt;[email protected]&gt;). The LICENSE file ships alongside this
plugin — keep it in place when redistributing.