forgejo_admin/pal-e-playground
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat: scaffold repo — CSS guide, landing page, westside migration #1

New issue
Closed
opened 2026-03-16 03:02:50 +00:00 by forgejo_admin · 1 comment
forgejo_admin commented 2026-03-16 03:02:50 +00:00
Owner
Copy link

Lineage

plan-pal-e-agency → Phase 14 → Phase 14a

Repo

forgejo_admin/pal-e-playground

User Story

As a dev agent writing frontend CSS
I want a canonical CSS philosophy reference and proven project prototypes in one repo
So that I can follow the established layout systems, rules, and debugging playbook before writing any CSS

Context

The platform's frontend workflow requires vanilla HTML/CSS prototyping before production SvelteKit work. Previously, this was split across html-playground (shared, messy) and westside-playground (project-specific). The decision (2026-03-15) is to unify into pal-e-playground with a canonical CSS guide and per-project folders.

The CSS philosophy teaches 3 layout systems (Box Model, Flexbox, Grid), 5 core properties (display, position, size, spacing, overflow), 10 layout rules, and a 6-step debugging playbook. This is the entire mental model for frontend layout.

Convention: convention-frontend-css. SOP: sop-frontend-experiment.

File Targets

Files to create:

  • guide/index.html — CSS philosophy reference. Teaches Box Model, Flexbox, Grid, 5 core properties, 10 layout rules, debugging playbook. Style it using the philosophy it teaches (Atkinson Hyperlegible, #fafafa bg, #1a1a1a text, #0366d6 links, max-width: 48rem, mobile breakpoint 600px). Include interactive examples where possible (live box model visualization, flexbox demo).
  • index.html — Landing page linking to guide/ and westside/. Same styling.
  • westside/ — Copy ALL content from ~/westside-playground/: index.html, admin.html, coach.html, parent.html, player-profile.html, visitor.html, stories.html, shared/app.css, shared/style.css, shared/logo.jpeg. Verify relative paths work after migration.

Files NOT to touch:

  • No package.json or npm artifacts — vanilla only
  • No k8s manifests — infra is a separate concern
  • No pal-e-home/ folder — deferred

Acceptance Criteria

  • guide/index.html loads in browser and teaches CSS philosophy with working examples
  • Guide covers: 3 layout systems (Box Model, Flexbox, Grid), decision tree, 5 core properties table, 10 layout rules, 6-step debugging playbook, common gotchas
  • index.html landing page links to guide and westside
  • westside/ content fully migrated — all 7 HTML pages + shared/ assets render correctly
  • All pages mobile-responsive (no horizontal scroll at 390px width)
  • Zero package.json or build artifacts in repo
  • Atkinson Hyperlegible font loads correctly on all pages
  • Guide itself demonstrates the CSS patterns it teaches (uses flexbox, grid, box model in its own layout)

Test Expectations

  • Manual: open each page in browser, verify renders correctly
  • Manual: resize to 390px width, verify no horizontal scroll
  • Manual: verify all links between pages work
  • Manual: verify westside shared/app.css and shared/style.css load correctly with new paths

Constraints

  • Vanilla HTML/CSS/JS only — no npm, no SvelteKit, no build step
  • Follow convention-frontend-css exactly: CSS custom properties for colors, Atkinson Hyperlegible, max-width: 48rem, mobile breakpoint at 600px
  • The guide should be a teaching artifact — clear headings, code examples, visual demonstrations
  • Westside migration is a direct copy — do not refactor or restyle the westside content

Checklist

  • PR opened
  • All pages render in browser
  • No unrelated changes

Related

  • project-frontend-playground — parent project
  • convention-frontend-css — CSS rules this guide teaches
  • sop-frontend-experiment — workflow this repo supports
### Lineage `plan-pal-e-agency` → Phase 14 → Phase 14a ### Repo `forgejo_admin/pal-e-playground` ### User Story As a dev agent writing frontend CSS I want a canonical CSS philosophy reference and proven project prototypes in one repo So that I can follow the established layout systems, rules, and debugging playbook before writing any CSS ### Context The platform's frontend workflow requires vanilla HTML/CSS prototyping before production SvelteKit work. Previously, this was split across `html-playground` (shared, messy) and `westside-playground` (project-specific). The decision (2026-03-15) is to unify into `pal-e-playground` with a canonical CSS guide and per-project folders. The CSS philosophy teaches 3 layout systems (Box Model, Flexbox, Grid), 5 core properties (display, position, size, spacing, overflow), 10 layout rules, and a 6-step debugging playbook. This is the entire mental model for frontend layout. Convention: `convention-frontend-css`. SOP: `sop-frontend-experiment`. ### File Targets Files to create: - `guide/index.html` — CSS philosophy reference. Teaches Box Model, Flexbox, Grid, 5 core properties, 10 layout rules, debugging playbook. Style it using the philosophy it teaches (Atkinson Hyperlegible, `#fafafa` bg, `#1a1a1a` text, `#0366d6` links, `max-width: 48rem`, mobile breakpoint 600px). Include interactive examples where possible (live box model visualization, flexbox demo). - `index.html` — Landing page linking to `guide/` and `westside/`. Same styling. - `westside/` — Copy ALL content from `~/westside-playground/`: `index.html`, `admin.html`, `coach.html`, `parent.html`, `player-profile.html`, `visitor.html`, `stories.html`, `shared/app.css`, `shared/style.css`, `shared/logo.jpeg`. Verify relative paths work after migration. Files NOT to touch: - No `package.json` or npm artifacts — vanilla only - No k8s manifests — infra is a separate concern - No `pal-e-home/` folder — deferred ### Acceptance Criteria - [ ] `guide/index.html` loads in browser and teaches CSS philosophy with working examples - [ ] Guide covers: 3 layout systems (Box Model, Flexbox, Grid), decision tree, 5 core properties table, 10 layout rules, 6-step debugging playbook, common gotchas - [ ] `index.html` landing page links to guide and westside - [ ] `westside/` content fully migrated — all 7 HTML pages + shared/ assets render correctly - [ ] All pages mobile-responsive (no horizontal scroll at 390px width) - [ ] Zero `package.json` or build artifacts in repo - [ ] Atkinson Hyperlegible font loads correctly on all pages - [ ] Guide itself demonstrates the CSS patterns it teaches (uses flexbox, grid, box model in its own layout) ### Test Expectations - [ ] Manual: open each page in browser, verify renders correctly - [ ] Manual: resize to 390px width, verify no horizontal scroll - [ ] Manual: verify all links between pages work - [ ] Manual: verify westside shared/app.css and shared/style.css load correctly with new paths ### Constraints - Vanilla HTML/CSS/JS only — no npm, no SvelteKit, no build step - Follow `convention-frontend-css` exactly: CSS custom properties for colors, Atkinson Hyperlegible, `max-width: 48rem`, mobile breakpoint at 600px - The guide should be a teaching artifact — clear headings, code examples, visual demonstrations - Westside migration is a direct copy — do not refactor or restyle the westside content ### Checklist - [ ] PR opened - [ ] All pages render in browser - [ ] No unrelated changes ### Related - `project-frontend-playground` — parent project - `convention-frontend-css` — CSS rules this guide teaches - `sop-frontend-experiment` — workflow this repo supports
forgejo_admin commented 2026-03-16 03:23:48 +00:00
Author
Owner
Copy link

Architecture decision update (2026-03-15): Linked-repo model, not folder model.

pal-e-playground is the hub only — CSS guide + landing page. Project prototypes stay in their own [project]-playground repos (e.g. westside-playground stays separate).

PR #2 rework needed:

  • Remove westside/ directory entirely — westside-playground stays as its own repo
  • Keep guide/index.html and index.html (landing page)
  • Landing page should link to the guide only (no project prototype links needed)
**Architecture decision update (2026-03-15):** Linked-repo model, not folder model. `pal-e-playground` is the **hub only** — CSS guide + landing page. Project prototypes stay in their own `[project]-playground` repos (e.g. `westside-playground` stays separate). **PR #2 rework needed:** - Remove `westside/` directory entirely — westside-playground stays as its own repo - Keep `guide/index.html` and `index.html` (landing page) - Landing page should link to the guide only (no project prototype links needed)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
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-playground#1
No description provided.