/* py.gthst.net — nadpisania na wierzchu Unify (theme.min.css).
Motywu nie ruszamy: przy aktualizacji szablonu podmieniasz theme.min.css,
a wszystkie zmiany projektu zostają tutaj.
Zmienne Bootstrapa 5 / Unify, które warto nadpisać w pierwszej kolejności:
--bs-primary, --bs-body-color, --bs-body-font-family, --bs-border-radius.
Pełna lista tokenów: dist/documentation/customization.html w katalogu motywu. */
:root {
/* --bs-primary: #0f62fe; */
}
/* Stabilność układu przy podmianie fontu.
Motyw ustawia `font-family: Inter, sans-serif`, a nasze @font-face mają
`font-display: swap` — czyli pierwsze malowanie idzie fontem systemowym
i dopiero potem podmienia się na Inter. Fonty mają różną wysokość liter
x, więc ta podmiana przesuwa tekst (CLS).
Zmierzone w przeglądarce na tej maszynie: Inter 0,5469, systemowy
`sans-serif` 0,5313 — ~2,9% różnicy. Niedużo, ale to jedyny moment,
w którym cała strona drgnie, i kosztuje jedną linijkę.
Dwie deklaracje, nie jedna: `from-font` każe przeglądarce odczytać
proporcję wprost z pliku fontu (samo się poprawi, gdy kiedyś zmienimy
krój), a liczba wyżej zostaje dla przeglądarek, które tego słowa
kluczowego nie znają — wtedy druga deklaracja jest nieprawidłowa
i po prostu wypada. Bez wsparcia dla obu nie ma regresji, jest stan
sprzed poprawki. */
body {
font-size-adjust: 0.5469;
font-size-adjust: from-font;
}
/* Font o stałej szerokości ma własne proporcje — normalizowanie go do
x-height Intera zrobiłoby dokładnie ten błąd, któremu zapobiegamy wyżej. */
code, kbd, pre, samp {
font-size-adjust: none;
}
/* Ikona zastępująca zdjęcie w kadrze karty (oferta, blog).
Rozmiaru NIE bierzemy z `display-*` ani `fs-*`: motyw ma włączone
`$enable-rfs`, więc te klasy skalują się z szerokością okna. Nagłówkom to
służy, ikonie w kadrze nie — `display-1` dawało 128 px na desktopie
i 62 px na telefonie, choć kadr w obu przypadkach ma około 270 px.
Ikona gubiła się dokładnie tam, gdzie karta jest największa.
Stała wartość pasuje do obu, bo kadr 4:3 ma podobną wysokość niezależnie
od tego, czy zajmuje trzecią część rzędu, czy całą szerokość telefonu. */
.kadr-ikona {
font-size: 5rem;
line-height: 1;
}
/* Łamanie nagłówków. Tytuły w kaflach i nadtytuły sekcji zostawiały na
ostatniej linii pojedyncze słowo („Dla klientów / indywidualnych”),
bo domyślny algorytm łamie zachłannie. `balance` rozkłada wiersze równo.
Tylko nagłówki, świadomie: algorytm jest kosztowny (wyszukiwanie binarne)
i przeglądarki i tak poddają się powyżej 6 wierszy, więc na akapitach
nie miałby ani sensu, ani skutku. Nieobsługiwane = zwykłe łamanie. */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/* Treść redakcyjna to jedyne miejsce we wzorcu z naprawdę długimi akapitami
— tam `pretty` ma co poprawiać (nie zostawia sieroty na końcu akapitu).
Poza nią akapity mają po dwa–trzy wiersze i różnicy nie widać, a koszt
liczenia jest realny. Firefox tego nie zna i po prostu zignoruje. */
.tresc-redakcyjna p,
.tresc-redakcyjna li,
.tresc-redakcyjna blockquote {
text-wrap: pretty;
}
/* Długość wiersza w treści redakcyjnej.
Kolumna artykułu ma osiem jednostek siatki, czyli około 700 px — przy
16 px daje to ~95 znaków w wierszu. Oko gubi początek następnego wiersza
już powyżej osiemdziesięciu; to jest najczęstsza przyczyna tego, że długi
tekst „źle się czyta”, choć wszystko inne jest poprawne.
Ograniczamy sam TEKST, nie kolumnę: zdjęcia, tabele i kod mają dalej całą
szerokość, bo tam szerzej znaczy czytelniej. `ch` to szerokość zera
w bieżącym foncie — litery są węższe, więc 68ch wychodzi w praktyce
około 75–80 znaków. */
.tresc-redakcyjna > p,
.tresc-redakcyjna > ul,
.tresc-redakcyjna > ol,
.tresc-redakcyjna > blockquote,
.tresc-redakcyjna > h2,
.tresc-redakcyjna > h3,
.tresc-redakcyjna > h4,
.wpis-lead {
max-width: 68ch;
}
.skip-link {
z-index: 1080;
}
/* Logo w nagłówku — Unify skaluje je klasą navbar-brand-logo. */
.navbar-brand-logo {
max-height: 2.5rem;
width: auto;
}
/* --- komponenty wspólne ze szkieletem ------------------------------------- */
/* Motyw ładuje tylko ten plik (nie css/style.css), więc baner cookie, mapa
i mapa strony potrzebują tu własnych reguł. Nazwy klas są te same, żeby
components/*.html działały niezależnie od motywu. */
/* Bootstrap zna btn-outline-primary, komponenty używają neutralnego
btn-outline — alias, zamiast rozgałęziać szablony na motywy. */
.btn-outline {
border: 1px solid var(--bs-primary);
color: var(--bs-primary);
background: transparent;
}
.btn-outline:hover { background: var(--bs-primary); color: #fff; }
.cookie-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 1050;
background: var(--bs-dark, #1a1a1a);
color: #fff;
padding: 1rem 0;
box-shadow: 0 -4px 20px rgb(0 0 0 / 0.2);
}
.cookie-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
/* Unify nadaje
, — bez klas
Bootstrapa. Bootstrap styluje dopiero `.blockquote` i `.table`, więc cytat
wstawiony przyciskiem w panelu wychodził na stronie zwykłym akapitem,
a tabela — tekstem bez linii. Redaktor nie ma jak tego naprawić, bo klas
z edytora nie wpisze; reguły muszą być tutaj.
Ta sama klasa jest na wpisie bloga, stronie redakcyjnej, opisie usługi
i opisie realizacji — cztery miejsca, jedna typografia. */
.tresc-redakcyjna > *:last-child { margin-bottom: 0; }
.tresc-redakcyjna h2 { margin-top: 2.5rem; }
.tresc-redakcyjna h3 { margin-top: 2rem; }
.tresc-redakcyjna h2:first-child,
.tresc-redakcyjna h3:first-child { margin-top: 0; }
.tresc-redakcyjna blockquote {
margin: 2rem 0;
padding: 0.25rem 0 0.25rem 1.25rem;
border-left: 3px solid var(--bs-primary);
font-size: 1.1rem;
color: var(--bs-emphasis-color, #1e2022);
}
.tresc-redakcyjna blockquote p:last-child { margin-bottom: 0; }
.tresc-redakcyjna blockquote cite {
display: block;
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--bs-secondary-color, #6b7280);
}
/* Obraz wstawiony z menedżera plików nie ma `img-fluid`, więc na wąskim
ekranie rozpychał stronę w poziomie. */
.tresc-redakcyjna img {
max-width: 100%;
height: auto;
border-radius: var(--bs-border-radius, 0.5rem);
}
.tresc-redakcyjna figure { margin: 2rem 0; }
.tresc-redakcyjna figcaption {
margin-top: 0.5rem;
font-size: 0.9rem;
color: var(--bs-secondary-color, #6b7280);
}
/* Szeroka tabela przewija się we własnym pudełku, a nie razem ze stroną. */
.tresc-redakcyjna .table-wrap,
.tresc-redakcyjna table { display: block; max-width: 100%; overflow-x: auto; }
.tresc-redakcyjna table {
border-collapse: collapse;
margin: 1.5rem 0;
}
.tresc-redakcyjna th,
.tresc-redakcyjna td {
padding: 0.6rem 0.9rem;
border: 1px solid var(--bs-border-color, #e5e7eb);
text-align: left;
vertical-align: top;
}
.tresc-redakcyjna th { background: var(--bs-light, #f4f5f7); font-weight: 600; }
.tresc-redakcyjna ul,
.tresc-redakcyjna ol { padding-left: 1.35rem; }
.tresc-redakcyjna li { margin-bottom: 0.35rem; }
.tresc-redakcyjna hr {
margin: 2.5rem 0;
border-top: 1px solid var(--bs-border-color, #e5e7eb);
opacity: 1;
}
/* --------------------------------------------------- spis treści strony --
Panel „Na tej stronie" na stronach redakcyjnych (regulamin, polityka).
`sticky-lg-top` z motywu ustawia `top: 0`, więc przy przewijaniu panel
dotyka górnej krawędzi okna. Odrobina luzu wystarczy, żeby wyglądał jak
element układu, a nie jak coś, co się zacięło.
*/
.spis-tresci { top: 1.5rem; }
/* Skok z odnośnika w spisie ma wylądować z zapasem NAD nagłówkiem —
inaczej pierwsza linia sekcji przykleja się do krawędzi okna i wygląda
jak ucięta. Działa też przy zwykłym `#kotwica` z zewnętrznego linku. */
.tresc-redakcyjna h2,
.tresc-redakcyjna h3 { scroll-margin-top: 1.5rem; }
/* Nazwa techniczna w tabeli nie ma się łamać w połowie: „cookies-consent"
rozbite na dwie linie przestaje być nazwą, którą da się wyszukać
w ustawieniach przeglądarki. Tabela przewija się we własnym pudełku,
więc jest dokąd rosnąć. */
.tresc-redakcyjna th code,
.tresc-redakcyjna td code { white-space: nowrap; }