forrtproject / forrtproject/forrtproject.github.io

Unify colours across the website (consolidate to the brand palette)

Đang mở
#813 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
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

Mở 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.