enhancement: add brand-yellow headers and readable layouts for legal pages

Offen
  • Stimmt etwas nicht?
#105 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
22/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
nextjs, react, typescript
Bereich
design, frontend

Rechercherichtung

This is a design brief, not an implementation request, so start by agreeing the direction with the maintainer. Read the shared shell in src/components/legal/legal-layout.tsx, then src/components/site-header.tsx, src/app/layout.tsx and src/lib/legal.ts to see how the legal pages are built. Done means the brief's acceptance criteria are met and checked at 360px, 768px and 1440px.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

area:frontend enhancement

Problem

The current legal pages place long policy text over the site's yellow grid/gradient background while the navbar is white. The owner wants a coherent, professional reading layout that still clearly matches the ProCoderJii YouTube channel and logo.

The earlier all-neutral mockup was exploratory. The design brief below is the requested direction for future implementation.

Design brief

Brand-yellow top band
  • Use a full-width brand-yellow page header band, matching the yellow in the YouTube banner and ProCoderJii logo. Verify the brand colour against those assets rather than introducing a new palette.
  • An optional subtle grid or faint math/code doodles may appear inside this band only.
  • Include the page title in the existing bold display font.
  • Include the requested date line: "Last updated: 13 November 2026".
  • Include an "In short" summary box: a white card with a dark border. Each summary must accurately reflect that page's existing content.
Comfortable policy reading area
  • Below the band, use plain white or a very light neutral background for long policy text.
  • Keep the decorative yellow grid/pattern out from behind long paragraphs.
  • Use a readable article width, clear heading hierarchy and comfortable paragraph/section spacing.
  • Include an "On this page" table of contents, with the active item highlighted in yellow.
  • Use yellow link underlines and a short yellow bar before each h2.
Palette and consistency
  • Palette: channel brand yellow, near-black (#111), and white. No beige and no green.
  • Preserve the existing logo, fonts and shared navigation. Make the shared navbar and page-header band visually coherent without adding separate per-page navbars.
  • Keep this scoped to the legal/informational page shell, rather than a broad application redesign.

Scope and code pointers

Start with Privacy Policy (/privacy), Terms of Use (/terms), Disclaimer (/disclaimer), and Copyright & Takedown (/copyright). About (/about) also uses LegalLayout and should retain a consistent visual treatment.

Relevant shared code: src/components/legal/legal-layout.tsx, src/components/site-header.tsx, src/app/layout.tsx and src/lib/legal.ts.

Acceptance criteria

  • Shared legal-page layout implements the yellow title/date/summary band and a plain reading area below it.
  • "In short" content is reviewed against each page's policy text; the visual change does not silently rewrite policy clauses.
  • The requested last-updated label is distinct from existing policy effective dates, which retain their meaning.
  • TOC anchors work, the active item is indicated, and anchored headings remain visible below the header.
  • Yellow TOC/link/h2 accents follow the brand palette and remain legible with keyboard focus states.
  • At 360px, 768px and 1440px, reading and navigation work without horizontal overflow; the TOC adapts to mobile.
  • Capture desktop/mobile screenshots and run relevant lint, build and browser checks when implemented.

Planning

Backlog/design issue only. No implementation or pull request is requested now. Start future work from this issue and link the resulting PR.

Related navbar reports: #101 (Home first-visit transparency), #102 (signed-in name), #104 (Notes header alignment). Those reports remain separate.

Vorherrschende Sprache
TypeScript
Sterne
1
Forks
1
Ø Merge
8 Std. 58 Min.
Gemergte PRs (30 T.)
37

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus procoderji-com/procoderji

Alle Issues in procoderji-com/procoderji

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.