forrtproject / forrtproject/forrtproject.github.io
Unify colours across the website (consolidate to the brand palette)
- 主要言語
- HTML
- スター
- 42
- フォーク
- 33
- 平均マージ
- 2日 6時間
- マージ済み PR(30日)
- 19
説明
## Problem
Colours are defined and hard-coded in many places across the site, and several are **off-brand** or inconsistent with the FORRT palette. This was surfaced during a design review of the homepage but applies site-wide.
**Brand palette** (`data/themes/forrt.toml`):
- Primary teal `#004055`
- Secondary / magenta `#b8336a`
- Accent green `#69b3a2`
- Link `#8e0000`, link-hover `#ff6bbc`
- Background `#fefdf6`
## Off-palette / inconsistent spots found
- **Newsletter “Subscribe” button** — the EmailOctopus embed ships a Bootstrap-purple button (`#6e54d7`). It now gets overridden to teal in `assets/scss/custom.scss`, but the override is a patch over an external default rather than a shared rule.
- **JUST-OS chatbot UI** (`layouts/partials/chatbot.html`) — uses a different navy `#0d3c74` (and `#0a2f5c`, `#c0392b`) throughout for buttons/links/headers instead of the brand teal `#004055` / magenta.
- **Announcement category pills** (`assets/scss/custom.scss`) — introduce lavender / tan / purple tints (e.g. milestone `#5c2e8e` on `#ece0f7`) that aren’t in the palette.
- **`link_hover` `#ff6bbc`** — a neon pink; worth confirming it’s intentional vs. the brand magenta `#b8336a` (e.g. `.ac-more:hover` and link hovers).
- Numerous one-off hex values scattered across `custom.scss` and partials.
## Proposal
1. Define the brand palette **once** as CSS custom properties in `:root` (and/or SCSS variables), e.g. `--forrt-teal`, `--forrt-magenta`, `--forrt-green`, `--forrt-link`, `--forrt-bg`.
2. Replace hard-coded hex across `assets/scss/custom.scss` and the partials (`chatbot.html`, shortcodes, widgets) with those variables.
3. Decide the canonical set of UI tints (button, pill, hover, focus) derived from the palette, and apply consistently.
4. Document the palette (a short comment block or `CONTRIBUTING` note) so new components reuse it.
## Acceptance
- No off-palette colours in custom CSS/partials (audited).
- Buttons, links, hovers, and category tints all derive from the documented palette.
- JUST-OS chat UI and the newsletter form visually match the brand.
_Raised from a homepage design review (rotating-quote hero + announcements work)._
コントリビューションガイド
調査の方向性
data/themes/forrt.toml のパレットから始め、次に assets/scss/custom.scss と、指定された layouts/partials/chatbot.html、shortcodes、widgets を調べて、ハードコードされた色を確認します。関連するスタイルと Partials を監査し、正規のパレットと色合いを確認したうえで、newsletter、chatbot、ボタン、リンク、ホバー状態、カテゴリーピルが提示された受け入れ基準を満たしていることを検証します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- html, hugo, scss
- 領域
- design, frontend, web-dev
- issue の種類
- リファクタリング
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 48/100