Playground: pal-e-app CSS baseline as static HTML #45

Closed
opened 2026-03-23 14:16:01 +00:00 by forgejo_admin · 1 comment

Type

Feature

Lineage

Standalone — board-pal-e-docs kanban MVP

Repo

forgejo_admin/pal-e-playground

User Story

As the superuser
I want to see pal-e-app's current design in the playground as static HTML
So that I can iterate on it visually on my phone without touching SvelteKit

Context

pal-e-app has a clean CSS design system (Atkinson Hyperlegible, light theme, dark nav, CSS custom properties). Extracting it to a playground page lets us see the baseline, iterate with Lucas, and prototype kanban improvements in pure HTML/CSS before touching production.

File Targets

Files to create:

  • ~/pal-e-playground/pal-e-app/app.css — extracted CSS vars + explicit styles (no Tailwind)
  • ~/pal-e-playground/pal-e-app/index.html — layout shell (nav, content area)
  • ~/pal-e-playground/pal-e-app/board.html — current board view with mock data

Files to modify:

  • ~/pal-e-playground/index.html — add card linking to /pal-e-app/
  • ~/pal-e-deployments/overlays/playground/prod/configmap.yaml — add nginx location for /pal-e-app/

Files NOT to touch:

  • ~/pal-e-app/ — don't change production code in this ticket

Acceptance Criteria

  • Playground page at /pal-e-app/ renders the current pal-e-app layout
  • Board page shows mock kanban with columns and cards
  • Looks identical to production pal-e-app on mobile and desktop
  • Pure CSS, no JavaScript required for the baseline

Test Expectations

  • Visual comparison: playground page vs live pal-e-app URL
  • Mobile check on phone

Constraints

  • No Tailwind — pure CSS from extracted custom properties
  • Mock data only — no API calls in this ticket
  • pal-e-playground serves from hostPath, so changes are live instantly

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes
  • project-pal-e-docs — pal-e-app is the frontend
### Type Feature ### Lineage Standalone — board-pal-e-docs kanban MVP ### Repo `forgejo_admin/pal-e-playground` ### User Story As the superuser I want to see pal-e-app's current design in the playground as static HTML So that I can iterate on it visually on my phone without touching SvelteKit ### Context pal-e-app has a clean CSS design system (Atkinson Hyperlegible, light theme, dark nav, CSS custom properties). Extracting it to a playground page lets us see the baseline, iterate with Lucas, and prototype kanban improvements in pure HTML/CSS before touching production. ### File Targets Files to create: - `~/pal-e-playground/pal-e-app/app.css` — extracted CSS vars + explicit styles (no Tailwind) - `~/pal-e-playground/pal-e-app/index.html` — layout shell (nav, content area) - `~/pal-e-playground/pal-e-app/board.html` — current board view with mock data Files to modify: - `~/pal-e-playground/index.html` — add card linking to `/pal-e-app/` - `~/pal-e-deployments/overlays/playground/prod/configmap.yaml` — add nginx location for `/pal-e-app/` Files NOT to touch: - `~/pal-e-app/` — don't change production code in this ticket ### Acceptance Criteria - [ ] Playground page at `/pal-e-app/` renders the current pal-e-app layout - [ ] Board page shows mock kanban with columns and cards - [ ] Looks identical to production pal-e-app on mobile and desktop - [ ] Pure CSS, no JavaScript required for the baseline ### Test Expectations - [ ] Visual comparison: playground page vs live pal-e-app URL - [ ] Mobile check on phone ### Constraints - No Tailwind — pure CSS from extracted custom properties - Mock data only — no API calls in this ticket - pal-e-playground serves from hostPath, so changes are live instantly ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `project-pal-e-docs` — pal-e-app is the frontend
Author
Owner

Superseded. The CSS baseline extraction was completed as part of the svelte-playground scaffold (forgejo_admin/svelte-playground#1). The shared.css in svelte-playground contains all pal-e-app design tokens extracted into pure CSS. This ticket's scope was absorbed by that work.

Closing as superseded — not abandoned, just delivered differently.

**Superseded.** The CSS baseline extraction was completed as part of the svelte-playground scaffold (forgejo_admin/svelte-playground#1). The `shared.css` in svelte-playground contains all pal-e-app design tokens extracted into pure CSS. This ticket's scope was absorbed by that work. Closing as superseded — not abandoned, just delivered differently.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo_admin/pal-e-app#45
No description provided.