1. 8. 2026

Sedm klíčů

2 min

Díl 11 ze 15 — ./blog.sh v1.0

Ve stylesheetu tohoto webu není jediná hodnota barvy.

Každá barva, na kterou se právě díváš – pozadí, text, odkazy, navigace, malé pilulky štítků – pochází ze sedmi klíčů v config/site.yml. Sestavení je zkompiluje do souboru colors.css a site.css jen používá proměnné. Změň sedm řádků, sestav znovu, a web je někdo úplně jiný.

Tady je úplná paleta světlého režimu:

colors:
  light:
    bg: "#f5f8fa"
    text: "#444a5a"
    meta_text: "#657784"
    accent: "#1da1f2"
    nav_bg: "#eaf5fd"
    border: "#e1e8ed"
    pill_bg: "#d6ecfc"

A tady je táž titulní strana v pěti paletách – mezi těmito snímky se nezměnilo nic než sedm řádků YAML a nové sestavení:

Titulní strana ve výchozí modré paletě
Výchozí modrá – paleta, se kterou tento web přichází
Titulní strana v teplé krémové a terakotové paletě
Teplá – krémová, hnědá, terakotový akcent
Titulní strana v monochromatické paletě
Monochromatická – akcent je jen tmavší šedá
Titulní strana ve vysoce kontrastní paletě
Vysoký kontrast – černá na bílé, hypertextová modrá
Titulní strana v záměrně ohavné paletě
Záměrně ohavná – limetková, fialová, purpurová, oranžová

Ta ohavná je mimochodem důkaz: když konfigurace dokáže udělat web takhle ošklivý, konfigurace opravdu velí.

Co nenastavuješ

Všechno ostatní je odvozené: pozadí karet, stavy odkazů při najetí, pole hledání, pozadí bloků kódu. Nejsou to další konfigurační klíče, protože v praxi se nikdy neměnily nezávisle – pokaždé, když jsem zkoušel paletu, odvozené hodnoty stejně následovaly ty základní. Sedm klíčů na režim je poctivý počet rozhodnutí, o která jde.

Tmavý režim je týchž sedm klíčů znovu, takže světlý a tmavý jsou dvě palety, ne jedna paleta a filtr.

Dvě výjimky, záměrně

Banner může volitelně přebít barvy svého titulku a claimu – banner_title a banner_claim – protože banner je obrázek a text ležící na obrázku hraje podle jiných pravidel než text na plochém pozadí.

A jedna drobnost, kterou mám příliš rád, než abych ji nezmínil: ztmavení, které drží text banneru čitelný, ztmaví jen roh, ve kterém text skutečně sedí. Vypni překryvy a tvůj banner zůstane přesně tak, jak jsi ho nakreslil, od rohu k rohu.

appearance

Komentáře