forgejo_admin/pal-e-docs-app
1
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Port Jinja2 CSS foundation into pal-e-app — kill AI slop #34

New issue
Closed
opened 2026-03-15 05:00:41 +00:00 by forgejo_admin · 0 comments
forgejo_admin commented 2026-03-15 05:00:41 +00:00
Owner
Copy link

Lineage

plan-pal-e-docs → Phase F11 (Design System Overhaul) → F11a + F11b

Repo

forgejo_admin/pal-e-app

User Story

As Lucas reading my documentation on any device
I want the site to look as clean and readable as the old Jinja2 site
So that I can browse my 374 notes without my eyes bleeding

Context

The old pal-e-docs Jinja2 frontend (deleted in pal-e-docs PR #150) had excellent, proven CSS:

  • Atkinson Hyperlegible font
  • Light mode: background: #fafafa, color: #1a1a1a
  • max-width: 48rem centered content
  • Blue links (#0366d6), gray tags, subtle borders
  • Mobile breakpoint at 600px
  • Table scroll wrapper preventing horizontal overflow
  • Private notes badge (red PRIVATE label)

The current pal-e-app has AI slop CSS: cyan-on-dark, pink neon accents, system fonts, no mobile responsive design, horizontal scrolling on phones, white areas. Every color is hardcoded as Tailwind arbitrary values (bg-[#0e0e18]).

Reference file: reference-jinja2-base.html in the repo root contains the full old template with all CSS.

File Targets

Files to modify:

  • src/app.css — replace Tailwind-only import with CSS custom properties based on old Jinja2 palette. Add Atkinson Hyperlegible font import. Define design tokens for colors, spacing, typography, radii.
  • src/app.html — add Google Fonts preconnect + font link in <head>
  • src/routes/+layout.svelte — update nav to use new CSS classes instead of hardcoded Tailwind hex values. Ensure nav works on mobile (flex-wrap like old site).
  • src/routes/+page.svelte — update home page to use new design tokens
  • src/routes/notes/+page.svelte — update notes list
  • src/routes/notes/[slug]/+page.svelte — note detail page
  • src/lib/components/NoteLayout.svelte — update layout to use max-width: 48rem, new tokens
  • src/lib/components/blocks/*.svelte — update ALL block components to use new tokens instead of hardcoded hex
  • src/lib/colors.ts — simplify note type colors to work on light background
  • src/lib/columns.ts — update board column colors for light mode

Files NOT to touch:

  • src/auth.ts — auth logic unchanged
  • src/lib/api.ts — API client unchanged
  • src/hooks.server.ts — server hooks unchanged

Key Principles

  1. Light mode primary. background: #fafafa, color: #1a1a1a. Dark nav bar stays.
  2. Atkinson Hyperlegible font from Google Fonts. Fallback to system sans-serif.
  3. CSS custom properties in app.css for ALL colors. Zero hardcoded hex in components.
  4. max-width: 48rem on main content areas. Centered with auto margins.
  5. Mobile breakpoint at 600px — nav stacks, cards go single-column, padding shrinks.
  6. Table scroll wrapper — overflow-x: auto on tables to prevent horizontal page scroll.
  7. Blue links (#0366d6), not pink (#e94560).
  8. Tags: light gray background (#e8e8e8), not dark cards.
  9. Private badge: red PRIVATE label, visible and clear.
  10. Board pages: keep functional (columns, drag), but use new color tokens.
  11. Preserve all existing functionality — auth, editing, quick-jot, boards, search all must still work.

Acceptance Criteria

  • Site loads with light background (#fafafa) and Atkinson Hyperlegible font
  • Zero hardcoded hex values in any .svelte file — all colors via CSS custom properties
  • Nav bar: dark background, flex-wrap on mobile, brand + links + auth
  • Main content: max-width 48rem, centered, 1.5rem horizontal padding
  • Links are blue (#0366d6), tags are gray on light background
  • Tables have scroll wrapper — no horizontal page overflow on mobile
  • Mobile (< 600px): nav stacks vertically, card grids go single column
  • Note pages are readable — proper line-height (1.6+), font size hierarchy
  • Board pages still render with columns and are functional
  • Private notes show red PRIVATE badge (not tiny gray lock icon)
  • Quick-jot FAB still works
  • Edit button still works
  • Search still works
  • All existing E2E tests pass

Test Expectations

  • Run existing E2E tests: npx playwright test
  • Visual: screenshot home, notes list, note detail, board — all should look clean and professional on desktop
  • Visual: check at 375px width for mobile rendering — no horizontal scroll

Constraints

  • Use the reference-jinja2-base.html as the design spec
  • Tailwind can stay as a utility layer but ALL colors must come from CSS custom properties
  • Don't over-engineer — this is a CSS port, not a redesign. Match the old Jinja2 look.
  • ruff not applicable (JS repo) — run npm run check and npm run lint instead

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes

Related

  • phase-pal-e-docs-design-overhaul — parent phase (F11)
  • project-pal-e-docs — project
### Lineage `plan-pal-e-docs` → Phase F11 (Design System Overhaul) → F11a + F11b ### Repo `forgejo_admin/pal-e-app` ### User Story As Lucas reading my documentation on any device I want the site to look as clean and readable as the old Jinja2 site So that I can browse my 374 notes without my eyes bleeding ### Context The old pal-e-docs Jinja2 frontend (deleted in pal-e-docs PR #150) had excellent, proven CSS: - Atkinson Hyperlegible font - Light mode: `background: #fafafa`, `color: #1a1a1a` - `max-width: 48rem` centered content - Blue links (`#0366d6`), gray tags, subtle borders - Mobile breakpoint at 600px - Table scroll wrapper preventing horizontal overflow - Private notes badge (red `PRIVATE` label) The current pal-e-app has AI slop CSS: cyan-on-dark, pink neon accents, system fonts, no mobile responsive design, horizontal scrolling on phones, white areas. Every color is hardcoded as Tailwind arbitrary values (`bg-[#0e0e18]`). **Reference file:** `reference-jinja2-base.html` in the repo root contains the full old template with all CSS. ### File Targets Files to modify: - `src/app.css` — replace Tailwind-only import with CSS custom properties based on old Jinja2 palette. Add Atkinson Hyperlegible font import. Define design tokens for colors, spacing, typography, radii. - `src/app.html` — add Google Fonts preconnect + font link in `<head>` - `src/routes/+layout.svelte` — update nav to use new CSS classes instead of hardcoded Tailwind hex values. Ensure nav works on mobile (flex-wrap like old site). - `src/routes/+page.svelte` — update home page to use new design tokens - `src/routes/notes/+page.svelte` — update notes list - `src/routes/notes/[slug]/+page.svelte` — note detail page - `src/lib/components/NoteLayout.svelte` — update layout to use max-width: 48rem, new tokens - `src/lib/components/blocks/*.svelte` — update ALL block components to use new tokens instead of hardcoded hex - `src/lib/colors.ts` — simplify note type colors to work on light background - `src/lib/columns.ts` — update board column colors for light mode Files NOT to touch: - `src/auth.ts` — auth logic unchanged - `src/lib/api.ts` — API client unchanged - `src/hooks.server.ts` — server hooks unchanged ### Key Principles 1. **Light mode primary.** `background: #fafafa`, `color: #1a1a1a`. Dark nav bar stays. 2. **Atkinson Hyperlegible** font from Google Fonts. Fallback to system sans-serif. 3. **CSS custom properties** in `app.css` for ALL colors. Zero hardcoded hex in components. 4. **max-width: 48rem** on main content areas. Centered with auto margins. 5. **Mobile breakpoint at 600px** — nav stacks, cards go single-column, padding shrinks. 6. **Table scroll wrapper** — `overflow-x: auto` on tables to prevent horizontal page scroll. 7. **Blue links** (`#0366d6`), not pink (`#e94560`). 8. **Tags**: light gray background (`#e8e8e8`), not dark cards. 9. **Private badge**: red `PRIVATE` label, visible and clear. 10. **Board pages**: keep functional (columns, drag), but use new color tokens. 11. **Preserve all existing functionality** — auth, editing, quick-jot, boards, search all must still work. ### Acceptance Criteria - [ ] Site loads with light background (`#fafafa`) and Atkinson Hyperlegible font - [ ] Zero hardcoded hex values in any `.svelte` file — all colors via CSS custom properties - [ ] Nav bar: dark background, flex-wrap on mobile, brand + links + auth - [ ] Main content: max-width 48rem, centered, 1.5rem horizontal padding - [ ] Links are blue (`#0366d6`), tags are gray on light background - [ ] Tables have scroll wrapper — no horizontal page overflow on mobile - [ ] Mobile (< 600px): nav stacks vertically, card grids go single column - [ ] Note pages are readable — proper line-height (1.6+), font size hierarchy - [ ] Board pages still render with columns and are functional - [ ] Private notes show red PRIVATE badge (not tiny gray lock icon) - [ ] Quick-jot FAB still works - [ ] Edit button still works - [ ] Search still works - [ ] All existing E2E tests pass ### Test Expectations - [ ] Run existing E2E tests: `npx playwright test` - [ ] Visual: screenshot home, notes list, note detail, board — all should look clean and professional on desktop - [ ] Visual: check at 375px width for mobile rendering — no horizontal scroll ### Constraints - Use the `reference-jinja2-base.html` as the design spec - Tailwind can stay as a utility layer but ALL colors must come from CSS custom properties - Don't over-engineer — this is a CSS port, not a redesign. Match the old Jinja2 look. - `ruff` not applicable (JS repo) — run `npm run check` and `npm run lint` instead ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `phase-pal-e-docs-design-overhaul` — parent phase (F11) - `project-pal-e-docs` — project
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
226-fix-wget-auth
No results found.
Labels
Clear labels   
domain:backend

   
domain:devops

   
domain:frontend
No labels
domain:backend
domain:devops
domain:frontend
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-docs-app#34
No description provided.