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

未關閉
  • 哪裡不對？
#105 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
5/5
預估耗時
一週以上
新手友好度
22/100
Issue 類型
功能
描述清晰度
基本清楚
活躍度
活躍
技術堆疊
nextjs, react, typescript
領域
design, frontend

研究方向

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.

由索引模型根據 Issue 內容生成。

描述

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.

主要語言
TypeScript
星號
1
分支
1
平均合併
8 小時 58 分鐘
30 天內合併 PR
37

環境準備

從這裡開始

  1. 先讀完整個 Issue，再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫，在一個分支上完成修改。
  4. 送出 Pull Request，並在描述裡引用這個 Issue 編號。

procoderji-com/procoderji 的其他 Issue

查看 procoderji-com/procoderji 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。