forrtproject / forrtproject/forrtproject.github.io
Unify colours across the website (consolidate to the brand palette)
- Ngôn ngữ chính
- HTML
- Star
- 42
- Fork
- 33
- Merge trung bình
- 2 ngày 6 giờ
- Pull request đã merge (30 ngày)
- 19
Mô tả
## 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)._
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bảng màu trong data/themes/forrt.toml, sau đó kiểm tra assets/scss/custom.scss cùng với layouts/partials/chatbot.html, shortcodes và widgets được nêu để tìm các màu được hard-code. Kiểm tra các styles và partials liên quan, xác nhận bảng màu chuẩn và các sắc độ, đồng thời xác minh rằng newsletter, chatbot, các nút, liên kết, trạng thái hover và các pill danh mục đáp ứng các tiêu chí chấp nhận đã nêu.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- html, hugo, scss
- Lĩnh vực
- design, frontend, web-dev
- Loại issue
- Tái cấu trúc
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 48/100