Fundamenty

Z czego zbudowana jest ta strona.

Każdy kolor, rozmiar i cień na tej stronie pochodzi z jednego, małego zestawu ustawień. Ta podstrona odczytuje je na żywo z kodu strony, więc zawsze pokazuje to, co widzisz. Przełącz motyw jasny lub ciemny w prawym górnym rogu i zobacz, jak zmieniają się wartości.

Kolory

Jeden akcent, dwa tła.

--canvas Tło strony

--panel Panele i nieparzyste wiersze tabel

--panel-alt Parzyste wiersze, najechanie kursorem

--border Wszystkie cienkie linie

--text Tekst; obok kontrast z tłem

--text-dim Tekst pomocniczy; obok kontrast z tłem

--accent Aktywna pozycja menu, punktory, obramowanie fokusu

--accent-text Akcent, na którym stoi tekst: klucze, linki

--accent-strong Tło pod białym tekstem: zaznaczenie, link „przejdź do treści”

Typografia

Trzy kroje, każdy do swojej roboty.

display Cześć, jestem Jakub Pelczar.

headline Na czym się znam.

body Buduję strony i aplikacje dopięte na ostatni piksel.

value Systemy komponentów, czyli spójny wygląd

label section#foundations

Odstępy i kształty

Krótka skala, wszędzie ta sama.

space-xs2px

space-sm10px

space-md16px

space-lg24px

space-xl48px

radius-sm3px

radius-md6px

radius-lg7px

radius-xl8px

Głębia

Delikatne cienie i jeden blask.

--shadow-panelKażdy panel w spoczynku: miękki cień i jasna krawędź u góry

--shadow-panel-hoverTen sam panel pod kursorem

--shadow-ctaJedyny kolorowy blask, zarezerwowany dla głównego przycisku

Wartości kolorów, parametry krojów i kontrast liczy Twoja przeglądarka z aktualnego kodu strony.