forrtproject / forrtproject/forrtproject.github.io

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

Offen
#813 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
HTML
Sterne
42
Forks
33
Ø Merge
2 T. 6 Std.
Gemergte PRs (30 T.)
19

Beschreibung

## 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)._

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start with the palette in data/themes/forrt.toml, then inspect assets/scss/custom.scss and the named layouts/partials/chatbot.html, shortcodes, and widgets for hard-coded colours. Audit the relevant styles and partials, confirm the canonical palette and tints, and verify that the newsletter, chatbot, buttons, links, hovers, and category pills meet the stated acceptance criteria.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
html, hugo, scss
Bereich
design, frontend, web-dev
Issue-Typ
Refactoring
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

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