/* ========================================================================= Lektury — arkusz stylów KIERUNEK Świat tego serwisu to polski zeszyt szkolny, nie ogólna „czytelnia”. Stąd chłodny papier zamiast kremu, atrament długopisu zamiast czerni, czerwona linia marginesu jako jedyny akcent, ołówek na drugim planie i przybrudzony zakreślacz na motywy. SYGNATURA Margines-kręgosłup: pionowa linia po lewej, która wypełnia się w miarę czytania i służy zarazem za nawigację. Jeden element zamiast trzech kontrolek — na telefonie każdy pasek to stracona jedna trzecia ekranu. ========================================================================= */ :root { /* Papier ciepły, jak w taniej edycji lektury — ale nie jednolity krem. Ciepło niosą trzy warstwy: papier, cieplejsza karta i piaskowy panel. */ --papier: #f8f4ec; --papier-cien: #efe7d9; --karta: #fffdf8; --piasek: #f2e9d8; --atrament: #2b2721; /* ciepła czerń, brązowawa — nie granat */ --olowek: #6f6558; /* drugi plan; ciemniejszy niż wcześniej — na papierze #f8f4ec dawał ok. 3,9:1, czyli poniżej progu czytelności */ --margines: #b23a48; /* karminowa linia marginesu */ --ochra: #c08a2e; /* drugi akcent: czasy, liczby, detale */ --zakreslacz: #f2e3a6; /* ciepły zakreślacz na zakresy motywów */ --cien-maly: 0 1px 2px rgb(60 45 25 / .06), 0 2px 6px rgb(60 45 25 / .05); --cien-duzy: 0 2px 4px rgb(60 45 25 / .07), 0 8px 24px rgb(60 45 25 / .09); --noc: #1d1a17; --noc-papier: #262220; --noc-atrament: #e2dbcd; /* Kolory epok literackich. To nie dekoracja — każda lektura dostaje barwę swojej epoki z metadanych Wolnych Lektur (dc:subject.period), więc kolor niesie informację, a półka przestaje być szara. */ --epoka: var(--margines); --e-starozytnosc: #a8763e; --e-sredniowiecze: #7a6a99; --e-renesans: #4e7a5e; --e-barok: #8a5a78; --e-oswiecenie: #a06f16; --e-romantyzm: #b23a48; --e-pozytywizm: #3e6b8a; --e-modernizm: #6e5a9e; --e-wspolczesnosc: #4a6a5a; --tresc: 34rem; /* ok. 62 znaki w wierszu */ --rytm: 1.7; --display: "Fraunces", Georgia, serif; --czytanie: "Source Serif 4", Georgia, serif; --uzytkowy: "IBM Plex Sans", system-ui, sans-serif; } [data-motyw="noc"] { --papier: var(--noc); --papier-cien: var(--noc-papier); --karta: #241f1c; --piasek: #2b2521; --atrament: var(--noc-atrament); --olowek: #9a8f80; --margines: #e07a86; --ochra: #d7a54a; --zakreslacz: #46402a; } /* Barwa epoki ustawiana na przez generator. UWAGA: nazwy muszą dosłownie odpowiadać wartościom dc:subject.period z Wolnych Lektur. Pierwsza wersja miała „Modernizm”, a WL zapisują „Młoda Polska” — przez to żadna lektura nie łapała koloru i cały serwis wyglądał na jednobarwny. */ [data-epoka="Starożytność"] { --epoka: var(--e-starozytnosc); } [data-epoka="Biblia"] { --epoka: var(--e-starozytnosc); } [data-epoka="Średniowiecze"] { --epoka: var(--e-sredniowiecze); } [data-epoka="Renesans"] { --epoka: var(--e-renesans); } [data-epoka="Barok"] { --epoka: var(--e-barok); } [data-epoka="Oświecenie"] { --epoka: var(--e-oswiecenie); } [data-epoka="Romantyzm"] { --epoka: var(--e-romantyzm); } [data-epoka="Pozytywizm"] { --epoka: var(--e-pozytywizm); } [data-epoka="Młoda Polska"] { --epoka: var(--e-modernizm); } [data-epoka="Modernizm"] { --epoka: var(--e-modernizm); } [data-epoka="Dwudziestolecie międzywojenne"] { --epoka: #8a6a3a; } [data-epoka="Współczesność"] { --epoka: var(--e-wspolczesnosc); } * { box-sizing: border-box; } /* Atrybut `hidden` MUSI wygrywać z regułami układu. Odtwarzacz nagrań miał `.sluchacz { display: flex }`, co przebijało wbudowane `[hidden] { display: none }` — pasek był więc widoczny od wejścia na stronę, bez wczytanego nagrania, a kliknięcie ▶ wywoływało odtwarzanie pustego elementu. Objaw: nic nie gra i nic nie widać w konsoli. Ten sam błąd czaił się w sześciu innych miejscach: wyborze tempa, wynikach wyszukiwania, celu dnia, legendzie motywów, sekcji powrotu i notatkach. Wszystkie deklarują `display`, wszystkie bywają chowane przez JavaScript. Jedna reguła zamyka całą klasę tych usterek. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papier); color: var(--atrament); font-family: var(--czytanie); font-size: 1.0625rem; line-height: var(--rytm); /* Polszczyzna ma dużo znaków diakrytycznych nad i pod linią pisma — ciaśniejsza interlinia zlepia „ą” z wierszem niżej. */ font-variant-numeric: oldstyle-nums; } /* --- pasek czytnika: chowa się przy przewijaniu w dół ------------------ */ .pasek { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--papier-cien); transition: transform .28s ease; } .pasek[data-ukryty="tak"] { transform: translateY(-100%); } .pasek__wstecz { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--atrament); font-size: 1.25rem; cursor: pointer; } .pasek__wstecz:hover { background: var(--papier-cien); } .pasek__tytul { flex: 1; min-width: 0; font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 500; letter-spacing: .01em; color: var(--olowek); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pasek__narzedzie { border: 0; background: transparent; color: var(--olowek); font-family: var(--uzytkowy); font-size: 0.875rem; padding: .35rem .5rem; border-radius: .35rem; cursor: pointer; } .pasek__narzedzie:hover { background: var(--papier-cien); color: var(--atrament); } /* --- margines-kręgosłup: sygnatura serwisu ----------------------------- */ /* Pierwsza wersja była kreską na 2 px w kolorze tła — nikt nie zgadł, że to przycisk. Teraz tor jest widoczny, pole kliknięcia ma pełne 44 px zgodnie z wytycznymi dotykowymi, a uchwyt na wysokości postępu mówi wprost, że element jest interaktywny. */ .kregoslup { position: fixed; left: max(0px, calc(50vw - var(--tresc) / 2 - 2.6rem)); top: 4.25rem; bottom: 3.5rem; width: 2.75rem; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 15; -webkit-tap-highlight-color: transparent; } /* tor */ .kregoslup::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--papier-cien); } /* wypełnienie — postęp czytania */ .kregoslup__postep { position: absolute; left: 50%; top: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; height: var(--postep, 0%); background: var(--epoka); transition: height .15s linear; pointer-events: none; } /* uchwyt — jedyny element, który wygląda na chwytliwy */ .kregoslup__uchwyt { position: absolute; left: 50%; top: var(--postep, 0%); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--papier); border: 3px solid var(--epoka); box-shadow: 0 1px 4px rgb(28 43 58 / .25); transition: transform .15s ease, top .15s linear; pointer-events: none; } .kregoslup:hover .kregoslup__uchwyt, .kregoslup:focus-visible .kregoslup__uchwyt { transform: scale(1.25); } /* podpowiedź przy pierwszym wejściu — znika po pierwszym użyciu */ .kregoslup__podpowiedz { position: absolute; left: 2.4rem; top: var(--postep, 0%); transform: translateY(-50%); white-space: nowrap; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .04em; color: var(--epoka); background: var(--papier); padding: .15rem .4rem; border-radius: .2rem; pointer-events: none; opacity: 1; transition: opacity .3s ease; } .kregoslup[data-uzyty="tak"] .kregoslup__podpowiedz { opacity: 0; } .kregoslup:focus-visible { outline: 2px solid var(--margines); outline-offset: -6px; border-radius: .5rem; } /* --- ile zostało: pasek u dołu ---------------------------------------- */ /* Świadomie BEZ odliczania do terminu. Termin zamienia czytanie w wyścig z zegarem, a my chcemy, żeby uczeń doczytał — więc mówimy tylko, ile materiału przed nim, w procentach i w godzinach. */ .zostalo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; display: flex; justify-content: center; gap: .5rem; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); background: linear-gradient(to top, var(--papier) 55%, transparent); pointer-events: none; transition: opacity .28s ease; } .zostalo[data-ukryty="tak"] { opacity: 0; } .zostalo__procent { color: var(--epoka); font-weight: 600; } /* --- tekst utworu ------------------------------------------------------ */ .czytnik { max-width: var(--tresc); margin: 0 auto; padding: 5rem 1.25rem 6rem; } .naglowek-rozdzialu { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40; font-weight: 500; font-size: 1.5rem; line-height: 1.25; margin: 3rem 0 .35rem; text-wrap: balance; } .naglowek-rozdzialu:first-child { margin-top: 0; } .rozdzial-czas { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .06em; color: var(--olowek); margin: 0 0 2rem; } /* Wyrównanie DO LEWEJ, nie justowanie. Justowanie jest tradycją składu książkowego, ale rozciąga odstępy między wyrazami — a nierówne odstępy to jedna z głównych przeszkód przy dysleksji. Standardy ETR (rozdz. 11.3) mówią o tym wprost. Bez automatycznego przenoszenia: polskie słowniki w przeglądarkach dzielą wyrazy błędnie („opuszcze-nie”), a w tekście literackim taki podział czyta się jak literówka. */ .akapit { margin: 0 0 1.15rem; text-align: left; hyphens: manual; } .akapit--dialog { text-align: left; } .wiersz { margin: 0 0 1.15rem; white-space: pre-line; text-align: left; hyphens: none; } .mowca { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; color: var(--olowek); margin-bottom: .2rem; } .didaskalia { /* Bez kursywy — ETR odradza. Rozróżnienie didaskaliów od kwestii niesie teraz pasek na marginesie i kolor, czytelne także dla kogoś, kto pochylonego pisma nie odczytuje płynnie. */ color: var(--olowek); border-left: 2px solid var(--papier-cien); padding-left: .8rem; margin: 0 0 1.15rem; padding-left: 1rem; border-left: 1px solid var(--papier-cien); } .separator { border: 0; margin: 2.25rem auto; width: 3rem; height: 1px; background: var(--olowek); opacity: .4; } /* --- warstwy: przypis i motyw ------------------------------------------ */ /* Ołówkowe podkreślenie zamiast kropkowanego — z tego samego świata co reszta: uczeń podkreśla w książce ołówkiem, nie kropkami. */ /* Objaśniane słowo, nie gwiazdka obok niego. W słowo łatwiej trafić palcem, a kropkowana linia to konwencja, którą czytelnicy znają ze słowników. */ /* Objaśniane słowo. Sama kropkowana linia ginęła w tekście, więc pod spodem leży też pasek zakreślacza — widoczny, ale niższy niż wiersz, żeby nie rozbijał kolumny tekstu na plamy. */ .przypis { border: 0; padding: 0 .06em; margin: 0 -.06em; font: inherit; color: inherit; cursor: pointer; background: linear-gradient(var(--zakreslacz), var(--zakreslacz)) no-repeat 0 92% / 100% .32em; text-decoration: underline dotted color-mix(in srgb, var(--epoka) 65%, transparent); text-underline-offset: .2em; text-decoration-thickness: 1.5px; border-radius: .12rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-tap-highlight-color: transparent; } .przypis:hover, .przypis:focus-visible { background: linear-gradient(var(--zakreslacz), var(--zakreslacz)) no-repeat 0 50% / 100% 1.15em; text-decoration-color: var(--epoka); } .przypis[aria-expanded="true"] { background: linear-gradient(color-mix(in srgb, var(--epoka) 22%, var(--zakreslacz)), color-mix(in srgb, var(--epoka) 22%, var(--zakreslacz))) no-repeat 0 50% / 100% 1.15em; } /* Dymek pojawia się przy klikniętym słowie. Na dole ekranu wymagał przeniesienia wzroku przez pół strony i z powrotem — przy czytaniu długiego akapitu to gubi miejsce. Pozycję ustawia czytnik.js. */ .dymek { position: fixed; left: 0; top: 0; width: min(26rem, calc(100vw - 1.5rem)); background: var(--karta); border-left: 3px solid var(--epoka); border-radius: .25rem; padding: .9rem 1rem; box-shadow: 0 6px 24px rgb(28 43 58 / .16); z-index: 30; } .dymek[hidden] { display: none; } .dymek__haslo { font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; margin: 0 0 .2rem; } .dymek__tresc { margin: 0; font-size: 0.9375rem; line-height: 1.55; } .dymek__zrodlo { display: block; margin-top: .6rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- plan czytania ----------------------------------------------------- */ .plan { max-width: var(--tresc); margin: 0 auto; padding: 1.25rem; border: 1px solid var(--papier-cien); border-left: 3px solid var(--margines); border-radius: .25rem; } .plan__liczba { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60; font-size: 2.0rem; line-height: 1; margin: 0; } .plan__opis { font-family: var(--uzytkowy); font-size: 0.875rem; color: var(--olowek); margin: .3rem 0 0; } /* --- zasłona ----------------------------------------------------------- */ .zaslona { position: fixed; inset: 0; background: rgb(28 43 58 / .35); z-index: 22; } .zaslona[hidden] { display: none; } /* --- dostępność i mobile ----------------------------------------------- */ @media (max-width: 30rem) { body { font-size: 1.0625rem; } .czytnik { padding: 4.5rem 1.5rem 5rem; } .kregoslup { left: .55rem; } .akapit { text-align: left; } /* justowanie na wąskim ekranie robi rzeki */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } :focus-visible { outline: 2px solid var(--margines); outline-offset: 2px; } @media print { .pasek, .kregoslup, .spis, .dymek, .zaslona { display: none; } .czytnik { padding: 0; max-width: none; } } /* ========================================================================= Strony poza czytnikiem ========================================================================= */ .szczyt { display: flex; align-items: center; gap: .6rem 1.5rem; flex-wrap: wrap; max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 0; } /* Marka: znak plus nazwa. Sama nazwa złożona tekstem gubiła się między siedmioma pozycjami menu — nic nie mówiło, gdzie kończy się logo, a zaczyna nawigacja. Znak daje punkt zaczepienia dla oka i wiąże serwis z ikoną na ekranie telefonu. */ .szczyt__marka { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--atrament); } .szczyt__marka .znak { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: .4rem; background: var(--e-romantyzm); color: var(--papier); box-shadow: var(--cien-maly); } .szczyt__marka:hover .znak { filter: brightness(1.08); } .szczyt__nazwa { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40; /* Bez ujemnego odstępu liter — nawet w nazwie serwisu. ETR odradza to wprost, a audyt dostępności złapał tę „drobną korektę optyczną” natychmiast. Zwężenie o setne części ema nie jest warte wyjątku w regule, która chroni czytających z trudem. */ font-size: 1.4rem; line-height: 1; } .szczyt__marka:hover .szczyt__nazwa { color: var(--e-romantyzm); } /* Pozycji w nawigacji urosło z czterech do ośmiu, więc muszą się zawijać — ale zawijać mają się CAŁE pozycje, nie słowa w ich środku. Bez `nowrap` „Dla rodziców” łamało się na dwa wiersze i odstępy między pozycjami przestawały cokolwiek znaczyć: menu wyglądało na rozsypane. */ .szczyt__nawigacja { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; } .szczyt__nawigacja a { font-family: var(--uzytkowy); font-size: 0.875rem; color: var(--olowek); text-decoration: none; white-space: nowrap; } .szczyt__nawigacja a:hover { color: var(--margines); } .strona { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .wstep { border-left: 3px solid var(--ochra); padding-left: 1.25rem; margin-bottom: 3.5rem; } .wstep__tytul { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100; font-weight: 400; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.08; margin: 0 0 .75rem; text-wrap: balance; } .wstep__lid { margin: 0; color: var(--olowek); max-width: 34rem; } .przycisk { display: inline-block; margin: .5rem 0 2rem; padding: .7rem 1.6rem; border-radius: .3rem; background: var(--epoka); color: #fff; text-decoration: none; font-family: var(--uzytkowy); font-size: 0.9375rem; font-weight: 500; } .przycisk:hover { filter: brightness(.92); } .lektura__podtytul, .tekstowa h2 { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .12em; color: var(--olowek); margin: 2.5rem 0 .75rem; font-weight: 600; } .lektura__prawa { font-size: 0.875rem; color: var(--olowek); line-height: 1.6; } .lektura__prawa a { color: inherit; } .tekstowa h1 { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 90; font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0 0 1.25rem; } .tekstowa p { margin: 0 0 1.1rem; } .stopka { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--papier-cien); font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .stopka a { color: inherit; } .stopka__uwaga { margin: 0 0 .6rem; max-width: 40rem; } .stopka__linki, .stopka__rodzina { margin: 0 0 .3rem; } /* powrót do zapisanego miejsca */ .wroty { position: fixed; left: 50%; bottom: 3.5rem; transform: translateX(-50%); background: var(--atrament); color: var(--papier); font-family: var(--uzytkowy); font-size: 0.8125rem; padding: .5rem .9rem; border-radius: 1.2rem; z-index: 28; opacity: 1; transition: opacity .5s ease; } .wroty[data-znika="tak"] { opacity: 0; } /* ========================================================================= Poprawki po pierwszych testach na żywym tekście ========================================================================= */ /* --- przycisk spisu w pasku ------------------------------------------- */ /* Kręgosłup ładnie niesie postęp, ale sam w sobie nie mówi „kliknij mnie”. Sygnatura zostaje, a obok stoi zwykły, rozpoznawalny przycisk — bo odkrywalność jest ważniejsza od czystości pomysłu. */ .pasek__spis { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--olowek); font-family: var(--uzytkowy); font-size: 0.75rem; padding: .3rem .6rem; border-radius: .3rem; cursor: pointer; } .pasek__spis:hover { color: var(--atrament); border-color: var(--olowek); } .pasek__spis::before { content: "☰"; font-size: 0.9rem; line-height: 1; } /* --- nagłówek wysuwanego spisu ---------------------------------------- */ .spis__gora { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.25rem; } .spis__wroc { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); text-decoration: none; } .spis__wroc:hover { color: var(--epoka); } .spis__ksiazka { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.0625rem; color: var(--atrament); text-decoration: none; } .spis__ksiazka:hover { color: var(--epoka); } .spis__pusty { font-size: 0.875rem; color: var(--olowek); margin: 0 0 1rem; } .spis__pozycja[aria-current="true"] .spis__link { color: var(--epoka); font-weight: 600; } /* --- koniec tekstu ----------------------------------------------------- */ /* Bez tego nowela po prostu się urywa i czytelnik nie wie, czy to koniec, czy błąd wczytywania. */ .koniec { margin: 3.5rem 0 1rem; padding: 1.75rem 1.5rem; background: var(--piasek); border-radius: .4rem; text-align: center; } .koniec__slowo { font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60; font-size: 1.6rem; margin: 0 0 .3rem; color: var(--epoka); } .koniec__opis { font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); margin: 0 0 1.2rem; } .koniec__wyjscia { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; } .koniec__wyjscie { font-family: var(--uzytkowy); font-size: 0.875rem; text-decoration: none; padding: .55rem 1.1rem; border-radius: .3rem; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--atrament); } .koniec__wyjscie--glowne { background: var(--epoka); color: #fff; border-color: transparent; } .koniec__wyjscie:hover { border-color: var(--olowek); } /* --- części cyklu wielotomowego ---------------------------------------- */ .czesci-cyklu { list-style: none; margin: 0 0 1rem; padding: 0; } .czesci-cyklu__pozycja { display: flex; align-items: baseline; gap: 1rem; padding: .55rem .8rem; border: 1px solid var(--papier-cien); border-radius: .3rem; background: var(--karta); margin-bottom: .35rem; } .czesci-cyklu__pozycja a { color: inherit; text-decoration: none; flex: 1; } .czesci-cyklu__pozycja a:hover { color: var(--epoka); } .czesci-cyklu__pozycja--biezaca { background: var(--piasek); border-color: var(--epoka); } .czesci-cyklu__pozycja--biezaca span:first-child { flex: 1; } .czesci-cyklu__tu, .czesci-cyklu__czas { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); letter-spacing: .06em; white-space: nowrap; } .czesci-cyklu__tu { color: var(--epoka); } a.spis-tresci__tytul { color: inherit; text-decoration: none; } a.spis-tresci__tytul:hover { color: var(--epoka); } .spis-tresci__pozycja:hover { background: var(--karta); } /* ========================================================================= Poprawki po testach na telefonie i na żywym tekście Chłopów ========================================================================= */ /* --- pasek postępu: widoczny zawsze -------------------------------------- */ /* Poprzednio znikał przy przewijaniu w dół, czyli dokładnie wtedy, gdy czytelnik czyta. Informacja o postępie jest po to, żeby była pod ręką. */ .zostalo { pointer-events: none; } .zostalo[data-ukryty="tak"] { opacity: 1; } .zostalo__slupek { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--papier-cien); } .zostalo__slupek::after { content: ""; display: block; height: 100%; width: var(--postep, 0%); background: var(--epoka); transition: width .15s linear; } .zostalo__zrobione { color: var(--epoka); font-weight: 600; } /* --- kręgosłup na telefonie --------------------------------------------- */ /* Przy wąskim ekranie pionowa linia nachodziła na tekst. Na telefonie nawigację przejmuje przycisk „Spis” w pasku, a postęp — słupek u dołu. */ /* Na telefonie kręgosłup zostaje, ale przy samej krawędzi, a tekst dostaje margines, żeby się nie nakładały. Ukrycie go było złym rozwiązaniem: przewijak i postęp są na małym ekranie potrzebniejsze niż na dużym. */ @media (max-width: 62rem) { .kregoslup { left: 0; width: 2.1rem; } .czytnik { padding-left: 2.3rem; padding-right: 2.3rem; } } /* touch-action MUSI być ustawione z góry, a nie dopiero po dotknięciu: przeglądarka rozstrzyga o przeznaczeniu gestu przy pierwszym kontakcie palca. Wcześniej reguła wchodziła po pointerdown i było za późno — uchwytu nie dało się złapać na telefonie. */ .kregoslup { touch-action: none; } .kregoslup[data-ciagniety="tak"] .kregoslup__uchwyt { transform: scale(1.45); } .kregoslup[data-ciagniety="tak"]::before { background: var(--olowek); } @media (pointer: coarse) { .kregoslup__uchwyt { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; } .kregoslup__postep, .kregoslup::before { width: 4px; margin-left: -2px; } } /* --- otwarcie rozdziału ------------------------------------------------- */ /* Monotonia brała się z tego, że każdy rozdział wyglądał jak poprzedni. Numer w barwie epoki i inicjał dają oko zaczepienia przy przewijaniu. */ /* Cienka kreska z drobnym numerem ginęła w tekście — przy zbiorze 29 baśni całość czytało się jak jeden ciąg. Granica ma być widoczna KĄTEM OKA, przy przewijaniu, bez czytania nagłówka. */ .otwarcie { display: flex; align-items: center; gap: 1rem; margin: 5rem 0 1.75rem; } .otwarcie:first-child { margin-top: .5rem; } .otwarcie::before { content: ""; flex: 0 0 2.5rem; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--epoka) 30%, transparent); } .otwarcie__kreska { flex: 1; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--epoka) 30%, transparent); } .otwarcie__numer { flex: none; order: -1; font-family: var(--uzytkowy); font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; color: #fff; white-space: nowrap; background: var(--epoka); border-radius: 1rem; padding: .3rem .85rem; } .naglowek-rozdzialu { color: var(--atrament); } .naglowek-rozdzialu::after { content: ""; display: block; width: 2.2rem; height: 3px; background: var(--epoka); border-radius: 2px; margin-top: .7rem; } /* Inicjał pierwszego akapitu rozdziału. */ .akapit--otwierajacy::first-letter { float: left; font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144; font-size: 3.1em; line-height: .82; padding: .06em .1em 0 0; color: var(--epoka); } /* --- dymek: rozróżnienie przypisu od motywu ------------------------------ */ .dymek { border-left-color: var(--epoka); } .dymek__rodzaj { display: inline-block; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .1em; color: #fff; background: var(--epoka); padding: .12rem .45rem; border-radius: .15rem; margin-bottom: .45rem; } /* ========================================================================= Motywy literackie — równoległe paski na marginesie Zakresy motywów nakładają się na siebie. Podkreślanie tekstu inline nie umie tego wyrazić (nakładających się zakresów nie da się zagnieździć), więc podkreślenia wychodziły poszarpane. Równoległe tory rozwiązują to z definicji, a tekst zostaje nietknięty. ========================================================================= */ .czytnik { position: relative; } .pasmo { position: absolute; top: 0; bottom: 0; left: calc(100% + 1.1rem); width: calc(var(--torow, 1) * 7px); pointer-events: none; } .pasmo__pasek { position: absolute; width: 4px; border: 0; border-radius: 3px; padding: 0; opacity: .5; cursor: pointer; pointer-events: auto; transition: opacity .15s ease, width .15s ease; } .pasmo__pasek::after { /* powiększone pole dotyku */ content: ""; position: absolute; inset: -4px -8px; } .pasmo__pasek:hover, .pasmo__pasek:focus-visible { opacity: 1; width: 7px; } /* Podświetlenie fragmentu po kliknięciu paska. */ .podswietlony { background: color-mix(in srgb, var(--zakreslacz) 70%, transparent); border-radius: .2rem; box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--zakreslacz) 70%, transparent); } /* Na wąskim ekranie nie ma marginesu — paski wchodzą na prawą krawędź. */ /* Na wąskim ekranie nie ma marginesu poza kolumną tekstu, więc paski wchodzą w padding czytnika. Poprzednio miały ujemny offset i wypadały poza kontener — na telefonie były po prostu niewidoczne. */ @media (max-width: 62rem) { .pasmo { left: auto; right: .35rem; } } /* Legenda pod paskiem narzędzi — mówi, czym te paski są. */ .legenda { display: flex; align-items: center; gap: .4rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); margin: 0 0 1.75rem; } .legenda__probka { display: inline-block; width: 4px; height: .9rem; border-radius: 2px; background: var(--e-pozytywizm); opacity: .55; } /* ========================================================================= Strona główna i strona lektury ========================================================================= */ .wstep__tytul { font-size: clamp(2.1rem, 7vw, 3.4rem); } /* --- wróć do czytania --------------------------------------------------- */ .wracaj { margin-bottom: 3rem; } .wracaj__lista { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .wracaj__karta { display: block; text-decoration: none; color: inherit; padding: .9rem 1rem 1rem; border-radius: .35rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); } .wracaj__karta:hover { border-color: var(--olowek); border-left-color: var(--epoka); } .wracaj__tytul { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; } .wracaj__autor { display: block; font-size: 0.8125rem; color: var(--olowek); margin-bottom: .55rem; } .wracaj__pasek { display: block; height: 3px; border-radius: 2px; background: var(--papier-cien); } .wracaj__pasek span { display: block; height: 100%; border-radius: 2px; background: var(--epoka); } .wracaj__procent { display: block; margin-top: .35rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- pasek nad półką ---------------------------------------------------- */ .polka__gora { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; } .polka__naglowek { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .12em; color: var(--olowek); margin: 0; flex: 1; } .szukajka { display: flex; align-items: center; gap: .4rem; background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .3rem; padding: .35rem .6rem; } .szukajka__ikona { color: var(--olowek); font-size: 1.0rem; } .szukajka__pole { border: 0; background: none; font-family: var(--uzytkowy); font-size: 0.875rem; color: var(--atrament); width: 12rem; outline: none; } .szukajka__pole::placeholder { color: var(--olowek); } .filtry { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.1rem; } .filtr { font-family: var(--uzytkowy); font-size: 0.75rem; cursor: pointer; padding: .3rem .7rem; border-radius: 1rem; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--olowek); } .filtr:hover { color: var(--atrament); border-color: var(--olowek); } .filtr--wybrany { background: var(--epoka); border-color: transparent; color: #fff; } /* --- karty lektur ------------------------------------------------------- */ .polka__lista { list-style: none; margin: 0; padding: 0; } .pozycja { margin-bottom: .55rem; } .pozycja__karta { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: .95rem 1rem; text-decoration: none; color: inherit; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); border-radius: .3rem; } .pozycja__karta:hover { border-color: var(--olowek); border-left-color: var(--epoka); } .pozycja__link { flex: 1; min-width: 0; } .pozycja__tytul { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.15rem; line-height: 1.25; } .pozycja__karta:hover .pozycja__tytul { color: var(--epoka); } .pozycja__autor { display: block; font-size: 0.8125rem; color: var(--olowek); } .pozycja__motywy { display: block; margin-top: .3rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* Bez `nowrap` na całej kolumnie. „Dwudziestolecie międzywojenne” nie mieściło się w jednej linii, wychodziło poza swoją kolumnę i nachodziło na tytuł. Zakaz łamania zostaje tylko przy krótkich liczbach. */ .pozycja__prawa { text-align: right; flex: none; max-width: 42%; } .pozycja__prawa .pozycja__dane { white-space: nowrap; } .pozycja__epoka { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .08em; color: var(--epoka); margin-bottom: .2rem; line-height: 1.3; overflow-wrap: anywhere; } .pozycja__dane { display: block; font-family: var(--uzytkowy); font-size: 0.8125rem; } .pozycja__dane--drobne { font-size: 0.75rem; color: var(--olowek); } /* Pasek postępu pod kartą został usunięty. Bez podpisu i bez jednostki czytało się go jako długość tekstu albo ozdobnik — zastąpiła go etykieta „przeczytane 51%” przy liczbie rozdziałów. */ .polka__pusto { font-size: 0.9375rem; color: var(--olowek); padding: 1.5rem 0; } /* --- obietnice ---------------------------------------------------------- */ .obietnice { display: grid; gap: 1.25rem; margin-top: 3.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-top: 2rem; border-top: 1px solid var(--papier-cien); } .obietnica__tytul { font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; margin: 0 0 .35rem; } .obietnica p { margin: 0; font-size: 0.875rem; color: var(--olowek); line-height: 1.55; } /* --- strona lektury ----------------------------------------------------- */ /* Etykiety wyróżniamy odstępem między literami i grubością, nie wielkimi literami. ETR (rozdz. 11.4, pkt 8): w słowach zapisanych wersalikami litery zlewają się w jednolity blok, a krótkie wyrazy wyglądają jak skrót i bywają odczytywane przez literowanie. */ .lektura__znacznik { display: inline-block; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .1em; color: #fff; background: var(--epoka); padding: .2rem .55rem; border-radius: .15rem; margin-bottom: .5rem; } .lektura__autor { font-family: var(--uzytkowy); font-size: 0.8125rem; letter-spacing: .06em; color: var(--olowek); margin: 0 0 .3rem; } .lektura__tytul { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100; font-weight: 400; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.05; margin: 0; text-wrap: balance; } .start { margin-bottom: 2rem; } .przycisk { margin: 0 .5rem .6rem 0; } .przycisk--drugi { background: var(--karta); color: var(--atrament); border: 1px solid var(--papier-cien); } .przycisk--drugi:hover { border-color: var(--olowek); filter: none; } .start__plan { margin: .4rem 0 0; font-size: 0.9375rem; color: var(--olowek); } .lektura__wstepik { font-size: 0.875rem; color: var(--olowek); margin: 0 0 .8rem; } .motywy { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; } .motywy__pozycja { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--uzytkowy); font-size: 0.8125rem; background: var(--karta); border: 1px solid var(--papier-cien); border-radius: 1rem; padding: .28rem .75rem; } .motywy__ile { font-size: 0.75rem; color: var(--olowek); background: var(--piasek); border-radius: .6rem; padding: 0 .35rem; } .spis-tresci__czesc { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .1em; color: var(--epoka); } /* ========================================================================= Skorowidz motywów literackich ========================================================================= */ .okruchy { font-family: var(--uzytkowy); font-size: 0.75rem; margin-bottom: .9rem; } .okruchy a { color: var(--olowek); text-decoration: none; } .okruchy a:hover { color: var(--epoka); } .motyw-strona__lid { color: var(--olowek); margin: .6rem 0 2rem; max-width: 34rem; } .motyw-strona__reszta { font-size: 0.875rem; color: var(--olowek); background: var(--piasek); border-radius: .3rem; padding: .8rem 1rem; } .cytaty { display: grid; gap: .9rem; margin-bottom: 2rem; } .cytat { margin: 0; padding: 1rem 1.1rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); border-radius: .3rem; } .cytat__tresc { margin: 0 0 .6rem; font-size: 1.0625rem; line-height: 1.6; hyphens: manual; } .cytat__tresc::before { content: "„"; color: var(--epoka); } .cytat__tresc::after { content: "”"; color: var(--epoka); } .cytat__zrodlo { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .cytat__zrodlo a { color: inherit; text-decoration: none; } .cytat__zrodlo a:hover { color: var(--epoka); } .cytat__zrodlo strong { color: var(--atrament); font-weight: 600; } a.motywy__pozycja { text-decoration: none; color: inherit; } a.motywy__pozycja:hover { border-color: var(--epoka); color: var(--epoka); } .cytat__urwanie { color: var(--olowek); } .cytat__skrot { display: block; margin-top: .25rem; font-size: 0.75rem; color: var(--olowek); } /* ========================================================================= Słownik trudnych słów ========================================================================= */ .alfabet { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2rem; } .alfabet__litera { display: inline-flex; align-items: baseline; gap: .25rem; font-family: var(--uzytkowy); font-size: 0.875rem; text-decoration: none; color: var(--atrament); background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .25rem; padding: .3rem .6rem; min-width: 2.1rem; justify-content: center; } .alfabet__litera:hover { border-color: var(--epoka); color: var(--epoka); } .alfabet__litera--biezaca { background: var(--epoka); color: #fff; border-color: transparent; } .alfabet__ile { font-size: 0.75rem; color: var(--olowek); } .alfabet__litera--biezaca .alfabet__ile { color: rgb(255 255 255 / .75); } .hasla .pozycja { margin-bottom: .45rem; } .haslo-karta { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: .3rem .9rem; align-items: baseline; text-decoration: none; color: inherit; padding: .7rem .9rem; background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .3rem; } .haslo-karta:hover { border-color: var(--epoka); } .haslo-karta__slowo { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; } .haslo-karta:hover .haslo-karta__slowo { color: var(--epoka); } .haslo-karta__kwalifikator { grid-column: 1; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); letter-spacing: .04em; } .haslo-karta__znaczenie { grid-column: 2; grid-row: 1 / span 2; font-size: 0.9375rem; } .haslo-karta__lektury { grid-column: 3; grid-row: 1 / span 2; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); white-space: nowrap; } .lista-hasel { margin: 0 0 2rem; } .lista-hasel__slowo { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; margin-top: 1rem; } .lista-hasel__slowo a { color: inherit; text-decoration: none; } .lista-hasel__slowo a:hover { color: var(--epoka); } .lista-hasel__kwalifikator { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); margin-left: .4rem; letter-spacing: .04em; } .lista-hasel__znaczenie { margin: .1rem 0 0; padding: 0; color: var(--olowek); font-size: 0.9375rem; } .haslo__slowo { font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 100; font-weight: 400; font-size: clamp(2rem, 6vw, 3rem); margin: 0; line-height: 1.05; } .haslo__kwalifikator { font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--epoka); margin: .2rem 0 1.25rem; letter-spacing: .05em; } .haslo__znaczenia { margin: 0 0 2rem; padding-left: 1.2rem; font-size: 1.0625rem; line-height: 1.6; } .haslo__znaczenia li { margin-bottom: .4rem; } .haslo__znaczenia li::marker { color: var(--epoka); } /* ========================================================================= Obsada dramatu ========================================================================= */ .postacie { display: grid; gap: .8rem; margin-bottom: 2rem; } .postac { background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); border-radius: .3rem; padding: 1rem 1.1rem; } .postac__czolo { margin-bottom: .6rem; } .postac__nazwa { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 30; font-weight: 400; font-size: 1.3rem; margin: 0; line-height: 1.2; } .postac__opis { margin: .15rem 0 0; font-size: 0.9375rem; color: var(--olowek); } .postac__slupek { height: 4px; border-radius: 2px; background: var(--papier-cien); margin-bottom: .7rem; overflow: hidden; } .postac__slupek span { display: block; height: 100%; background: var(--epoka); } .postac__liczby { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0 0 .6rem; font-family: var(--uzytkowy); } .postac__liczby div { display: flex; flex-direction: column; } .postac__liczby dt { font-size: 0.75rem; letter-spacing: .08em; color: var(--olowek); } .postac__liczby dd { margin: 0; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-size: 1.15rem; color: var(--epoka); } .postac__razem { margin: 0 0 .4rem; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); } .postac__towarzysz { display: inline-block; background: var(--piasek); border-radius: 1rem; padding: .1rem .55rem; margin: .15rem .2rem 0 0; color: var(--atrament); } .postac__towarzysz em { color: var(--olowek); font-style: normal; font-size: 0.75rem; } .postac__link { margin: 0; font-family: var(--uzytkowy); font-size: 0.8125rem; } .postac__link a { color: var(--epoka); text-decoration: none; } .postac__link a:hover { text-decoration: underline; } .haslo-karta__lektury em { font-style: normal; color: var(--epoka); font-size: 0.75rem; } /* Plakietka przy przekładach na wolnej licencji. Wyróżniona, bo to nie domena publiczna — licencja i nazwisko tłumacza są warunkiem korzystania, a nie uprzejmością. */ .prawa-plakietka { display: inline-block; margin: 0 0 .7rem; font-family: var(--uzytkowy); font-size: 0.75rem; background: var(--piasek); border-left: 3px solid var(--ochra); border-radius: .2rem; padding: .4rem .7rem; color: var(--atrament); } .pasek__marka { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 20; font-size: 0.9375rem; color: var(--atrament); text-decoration: none; white-space: nowrap; } .pasek__marka:hover { color: var(--epoka); } a.pasek__tytul { text-decoration: none; } a.pasek__tytul:hover { color: var(--atrament); } @media (max-width: 34rem) { .pasek__marka { display: none; } } /* --- wyniki wyszukiwania w częściach utworów --------------------------- */ .wyniki-czesci { margin-bottom: 1.5rem; display: grid; gap: .35rem; } .wyniki-czesci .polka__naglowek { grid-column: 1 / -1; margin-bottom: .2rem; } .wynik-czesc { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; text-decoration: none; color: inherit; padding: .55rem .8rem; border-radius: .3rem; background: var(--piasek); border-left: 3px solid var(--epoka); } .wynik-czesc:hover { background: var(--karta); } .wynik-czesc__tytul { font-family: var(--czytanie); font-size: 0.9375rem; } .wynik-czesc:hover .wynik-czesc__tytul { color: var(--epoka); } .wynik-czesc__utwor { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); margin-left: auto; white-space: nowrap; } /* ========================================================================= Statystyki, oś epok i autorzy — kolor wprowadzony przez informację Serwis wyglądał szaro nie dlatego, że brakowało ozdób, tylko dlatego, że strona główna była listą i niczym więcej. Te trzy elementy dokładają koloru, ale każdy z nich coś mówi: ile mamy, z jakich epok, kogo. ========================================================================= */ .liczby { display: grid; gap: .5rem; margin-bottom: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } .liczba { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1rem .9rem; border-radius: .4rem; text-decoration: none; background: color-mix(in srgb, var(--epoka) 13%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 28%, transparent); color: inherit; transition: transform .15s ease; } a.liczba:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--epoka) 22%, var(--karta)); } /* Duża cyfra w tle — dekoracja, ale wyprowadzona z tej samej liczby, którą kafelek podaje. */ .liczba::after { content: ""; position: absolute; right: -1rem; bottom: -1.6rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: color-mix(in srgb, var(--epoka) 14%, transparent); } .liczba__ile { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60; font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--epoka); } .liczba__co { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .04em; color: var(--olowek); } /* Każdy kafelek w innej barwie — kolory epok użyte jako paleta serwisu. */ .liczby .liczba:nth-child(1) { --epoka: var(--e-romantyzm); } .liczby .liczba:nth-child(2) { --epoka: var(--e-pozytywizm); } .liczby .liczba:nth-child(3) { --epoka: var(--e-modernizm); } .liczby .liczba:nth-child(4) { --epoka: var(--e-renesans); } .liczby .liczba:nth-child(5) { --epoka: var(--e-oswiecenie); } .liczby .liczba:nth-child(6) { --epoka: var(--e-starozytnosc); } /* --- autorzy ----------------------------------------------------------- */ .polka__wiecej { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); text-decoration: none; white-space: nowrap; } .polka__wiecej:hover { color: var(--epoka); } .autorzy-pasek { display: flex; flex-wrap: wrap; gap: .45rem; } .autor-zeton { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem .35rem .35rem; border-radius: 2rem; background: var(--karta); border: 1px solid var(--papier-cien); text-decoration: none; color: inherit; } .autor-zeton:hover { border-color: var(--epoka); } .autor-zeton__inicjal { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--epoka); color: #fff; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 20; font-size: 0.9rem; line-height: 1; } .autor-zeton__nazwa { font-size: 0.875rem; } .autor-zeton__ile { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .autorzy .pozycja { margin-bottom: .45rem; } .autor-karta { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-radius: .3rem; text-decoration: none; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); color: inherit; } .autor-karta:hover { border-color: var(--olowek); border-left-color: var(--epoka); } .autor-karta__inicjal { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--epoka); color: #fff; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30; font-size: 1.2rem; flex: none; } .autor-karta__opis { flex: 1; min-width: 0; } .autor-karta__nazwa { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; } .autor-karta:hover .autor-karta__nazwa { color: var(--epoka); } .autor-karta__epoka { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .08em; color: var(--epoka); } .autor-karta__dane { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); white-space: nowrap; text-align: right; } .autor-karta__dane strong { display: block; font-size: 1.1rem; color: var(--epoka); } .autor-czolo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .autor-czolo__inicjal { display: grid; place-items: center; width: 4rem; height: 4rem; flex: none; border-radius: 50%; background: var(--epoka); color: #fff; font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 60; font-size: 2.0rem; } /* --- kafle epok --------------------------------------------------------- */ /* Pas proporcjonalny ucinał nazwy: „Staro…”, „Dwuc międz”. Kafle o równej szerokości mieszczą pełne nazwy, a proporcje pokazuje pasek pod spodem. */ .epoki-kafle { margin-bottom: 3rem; } .epoki-kafle__siatka { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); } .epoka-kafel { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .8rem .9rem; border-radius: .4rem; cursor: pointer; text-align: left; background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 26%, transparent); transition: transform .15s ease, background .15s ease; } .epoka-kafel:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--epoka) 24%, var(--karta)); } .epoka-kafel__nazwa { font-family: var(--uzytkowy); font-size: 0.75rem; line-height: 1.2; color: var(--atrament); } .epoka-kafel__ile { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-size: 1.5rem; line-height: 1; color: var(--epoka); } .epoka-kafel__pasek { display: block; width: 100%; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--epoka) 22%, transparent); } .epoka-kafel__pasek span { display: block; height: 100%; border-radius: 2px; background: var(--epoka); } /* --- obietnice: karty w kolorze ---------------------------------------- */ .obietnice { border-top: 0; padding-top: 0; } .obietnica { position: relative; padding: 1.1rem 1.1rem 1.1rem 3.2rem; border-radius: .4rem; background: color-mix(in srgb, var(--epoka) 10%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 22%, transparent); } .obietnice .obietnica:nth-child(1) { --epoka: var(--e-renesans); } .obietnice .obietnica:nth-child(2) { --epoka: var(--e-oswiecenie); } .obietnice .obietnica:nth-child(3) { --epoka: var(--e-pozytywizm); } .obietnica__znak { position: absolute; left: 1rem; top: 1.15rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--epoka); color: #fff; font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1; } .obietnica__tytul { color: var(--atrament); } /* --- kolorowe litery w słowniku ---------------------------------------- */ .alfabet__litera:nth-child(6n+1) { --epoka: var(--e-romantyzm); } .alfabet__litera:nth-child(6n+2) { --epoka: var(--e-pozytywizm); } .alfabet__litera:nth-child(6n+3) { --epoka: var(--e-renesans); } .alfabet__litera:nth-child(6n+4) { --epoka: var(--e-oswiecenie); } .alfabet__litera:nth-child(6n+5) { --epoka: var(--e-modernizm); } .alfabet__litera:nth-child(6n+6) { --epoka: var(--e-starozytnosc); } .alfabet__litera { background: color-mix(in srgb, var(--epoka) 10%, var(--karta)); border-color: color-mix(in srgb, var(--epoka) 24%, transparent); color: var(--epoka); font-weight: 500; } .alfabet__litera:hover { background: color-mix(in srgb, var(--epoka) 24%, var(--karta)); } /* --- kolorowe pastylki motywów ----------------------------------------- */ /* Kolor ustawiamy na ELEMENCIE LISTY, nie na linku. Reguły nth-child na .motywy__pozycja trafiały w każdy link (bo jest jedynym dzieckiem swojego li), więc wszystkie pastylki dostawały pierwszą barwę z palety — stąd różowe „Czary”, „Podróż” i „Przemiana”. Barwa wyliczona z nazwy motywu przychodzi stylem w atrybucie i ma pierwszeństwo. */ .motywy > li:nth-child(5n+1) { --epoka: var(--e-pozytywizm); } .motywy > li:nth-child(5n+2) { --epoka: var(--e-renesans); } .motywy > li:nth-child(5n+3) { --epoka: var(--e-modernizm); } .motywy > li:nth-child(5n+4) { --epoka: var(--e-oswiecenie); } .motywy > li:nth-child(5n+5) { --epoka: var(--e-starozytnosc); } .motywy__pozycja { background: color-mix(in srgb, var(--epoka) 11%, var(--karta)); border-color: color-mix(in srgb, var(--epoka) 24%, transparent); } .motywy__ile { background: color-mix(in srgb, var(--epoka) 20%, transparent); } /* --- nagłówek wstępu z akcentem ---------------------------------------- */ .wstep { position: relative; border-left: 0; padding: 1.6rem 1.4rem 1.4rem; border-radius: .5rem; margin-bottom: 2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--e-romantyzm) 11%, var(--karta)), color-mix(in srgb, var(--e-pozytywizm) 11%, var(--karta))); border: 1px solid var(--papier-cien); } .wstep__tytul { margin-bottom: .6rem; } .wstep__lid { color: var(--atrament); opacity: .8; } /* ========================================================================= Panel rozdziałów Na dużym ekranie panel jest częścią układu i stoi otwarty domyślnie — odpowiada na pytanie „gdzie jestem”: który rozdział, ile z niego zostało, ile z całości. Na wąskim wysuwa się nad tekst, bo nie ma go gdzie postawić, i domyślnie jest zwinięty. ========================================================================= */ :root { --panel: 0px; } @media (min-width: 64rem) { [data-panel="otwarty"] { --panel: 17.5rem; } } body { padding-left: var(--panel); transition: padding-left .22s ease; } .pasek { left: var(--panel); transition: transform .28s ease, left .22s ease; } .spis { position: fixed; inset: 0 auto 0 0; z-index: 25; width: min(20rem, 84vw); background: var(--papier); border-right: 1px solid var(--papier-cien); /* Zapas u dołu na paski przypięte do dolnej krawędzi (słuchacz, postęp) oraz na pasek gestów w telefonie — bez niego ostatnie rozdziały były nieosiągalne. */ padding: 4.5rem 1rem calc(6rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateX(-101%); transition: transform .24s ease; } [data-panel="otwarty"] .spis { transform: none; } @media (min-width: 64rem) { .spis { width: 17.5rem; } } .spis__gora { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; } .spis__wroc { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); text-decoration: none; } .spis__wroc:hover { color: var(--epoka); } .spis__ksiazka { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; color: var(--atrament); text-decoration: none; line-height: 1.2; } .spis__ksiazka:hover { color: var(--epoka); } .spis__naglowek { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .1em; color: var(--olowek); } /* --- postęp całości ----------------------------------------------------- */ .spis__postep { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--papier-cien); } .spis__postep-pasek { height: 5px; border-radius: 3px; background: var(--papier-cien); overflow: hidden; margin-bottom: .35rem; } .spis__postep-pasek span { display: block; height: 100%; width: 0; background: var(--epoka); border-radius: 3px; transition: width .2s linear; } .spis__postep-opis { margin: 0; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } #spis-postep-procent { color: var(--epoka); font-weight: 600; } /* --- lista rozdziałów --------------------------------------------------- */ .spis__pusty { font-size: 0.8125rem; color: var(--olowek); margin: 0 0 1rem; } .spis__lista { list-style: none; margin: 0; padding: 0; } .spis__pozycja { position: relative; margin-bottom: .1rem; } .spis__link { display: flex; align-items: baseline; gap: .5rem; padding: .4rem .5rem; border-radius: .25rem; color: inherit; text-decoration: none; font-size: 0.875rem; line-height: 1.3; } .spis__link:hover { background: var(--karta); } .spis__numer { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); min-width: 1.4rem; text-align: right; flex: none; } .spis__tytul { flex: 1; min-width: 0; } .spis__czesc { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .08em; color: var(--epoka); } .spis__czas { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); white-space: nowrap; flex: none; } .spis__pasek { display: block; height: 2px; margin: 0 .5rem; border-radius: 1px; background: var(--papier-cien); } .spis__pasek span { display: block; height: 100%; width: 0; border-radius: 1px; background: var(--epoka); transition: width .2s linear; } .spis__pozycja[data-stan="przeczytany"] .spis__link { color: var(--olowek); } .spis__pozycja[data-stan="przeczytany"] .spis__pasek span { opacity: .45; } .spis__pozycja[data-stan="biezacy"] .spis__link { background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); font-weight: 600; } .spis__pozycja[data-stan="biezacy"] .spis__numer { color: var(--epoka); } /* --- kręgosłup: podziałka rozdziałów i etykieta ------------------------- */ .kregoslup { left: calc(var(--panel) + max(0px, (100vw - var(--panel) - var(--tresc)) / 2 - 2.6rem)); } .kregoslup__podzialka { position: absolute; left: 50%; top: 0; bottom: 0; width: 9px; margin-left: -4.5px; pointer-events: none; } .kregoslup__podzialka span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--olowek); opacity: .45; } .kregoslup__etykieta { position: absolute; left: 2.3rem; transform: translateY(-50%); white-space: nowrap; opacity: 0; pointer-events: none; font-family: var(--uzytkowy); font-size: 0.75rem; background: var(--atrament); color: var(--papier); padding: .2rem .5rem; border-radius: .25rem; } .kregoslup[data-ciagniety="tak"] .kregoslup__etykieta { opacity: 1; } .kregoslup[data-ciagniety="tak"] .kregoslup__podzialka span { opacity: .8; } /* Przy otwartym panelu kręgosłup byłby trzecim wskaźnikiem postępu obok panelu i paska u dołu — zostaje, ale węższy i bez podpowiedzi. */ @media (min-width: 64rem) { [data-panel="otwarty"] .kregoslup__podpowiedz { display: none; } } /* --- przycisk panelu w pasku -------------------------------------------- */ .pasek__spis[aria-expanded="true"] { background: color-mix(in srgb, var(--epoka) 14%, var(--karta)); border-color: color-mix(in srgb, var(--epoka) 30%, transparent); color: var(--atrament); } @media (max-width: 34rem) { .pasek__spis-tekst { display: none; } } .zostalo { left: var(--panel); } @media (min-width: 64rem) { /* Panel podaje już postęp — pasek u dołu przy otwartym panelu tylko dubluje informację i zabiera wysokość. */ [data-panel="otwarty"] .zostalo { display: none; } } /* --- spis treści na stronie lektury ------------------------------------ */ /* Sam tytuł i liczba minut nie mówią nic o kształcie książki. Pasek pod każdą pozycją pokazuje długość rozdziału względem najdłuższego, więc od razu widać, gdzie da się przeczytać przed lekcją, a gdzie nie. */ .spis-tresci { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: r; } .spis-tresci__czesc-naglowek { font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .12em; color: var(--epoka); margin: 1.2rem 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid color-mix(in srgb, var(--epoka) 30%, transparent); } .spis-tresci__pozycja { border-radius: .3rem; padding: .1rem .1rem .4rem; margin-bottom: .15rem; } .spis-tresci__pozycja:hover { background: var(--karta); } .spis-tresci__link { display: flex; align-items: baseline; gap: .7rem; padding: .45rem .6rem .3rem; text-decoration: none; color: inherit; } .spis-tresci__numer { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); min-width: 1.6rem; text-align: right; flex: none; } .spis-tresci__tytul { flex: 1; min-width: 0; } .spis-tresci__link:hover .spis-tresci__tytul { color: var(--epoka); } .spis-tresci__czas { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); white-space: nowrap; flex: none; } /* Rozdział dłuższy niż godzina wymaga osobnego posiedzenia — warto, żeby uczeń zobaczył to przed rozpoczęciem, a nie w połowie. */ .spis-tresci__pozycja--dlugi .spis-tresci__pasek span { background: var(--epoka); } .spis-tresci__pozycja--dlugi .spis-tresci__czas { color: var(--epoka); font-weight: 600; } /* ========================================================================= Czoło strony lektury Wcześniej były tu kreska, etykieta i tytuł na gołym tle — poprawnie, ale bez charakteru. Teraz jest to karta w barwie epoki, z inicjałem tytułu jako znakiem wodnym (ten sam zabieg co przy autorach) i faktami wpisanymi w blok, zamiast osobnej ramki pod spodem. ========================================================================= */ .czolo { position: relative; display: flex; gap: 1.6rem; align-items: flex-start; padding: 1.6rem 1.4rem 1.4rem; margin-bottom: 2rem; border-radius: .5rem; background: linear-gradient(135deg, color-mix(in srgb, var(--epoka) 15%, var(--karta)), color-mix(in srgb, var(--epoka) 5%, var(--karta))); border: 1px solid color-mix(in srgb, var(--epoka) 25%, transparent); border-left: 5px solid var(--epoka); } .czolo__tresc { position: relative; flex: 1; min-width: 0; } a/* Etykiety wyróżniamy odstępem między literami i grubością, nie wielkimi literami. ETR (rozdz. 11.4, pkt 8): w słowach zapisanych wersalikami litery zlewają się w jednolity blok, a krótkie wyrazy wyglądają jak skrót i bywają odczytywane przez literowanie. */ .lektura__znacznik { text-decoration: none; } a.lektura__znacznik:hover { filter: brightness(1.12); } .czolo__gatunek { margin: .35rem 0 0; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); } .czolo__fakty { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.2rem 0 1.3rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--epoka) 22%, transparent); } .czolo__fakt { display: flex; flex-direction: column; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .04em; color: var(--olowek); } .czolo__fakt strong { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60; font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--epoka); } .czolo .start { margin-bottom: 0; } .czolo .przycisk { box-shadow: 0 2px 8px color-mix(in srgb, var(--epoka) 35%, transparent); } .czolo .przycisk:hover { transform: translateY(-1px); } .czolo .start__plan { margin-top: .5rem; } @media (max-width: 34rem) { .czolo { padding: 1.2rem 1.1rem; } .czolo__inicjal { display: none; } .czolo__fakty { gap: 1.1rem; } } /* ========================================================================= Okładki Serwis o książkach nie pokazywał ani jednej książki — same wiersze tekstu na jednolitym tle. Stąd wrażenie braku kontrastu: wszystko było w tej samej jasności. Okładek nie mamy i mieć nie będziemy (skany są chronione), więc składamy je z tego, co jest: barwa epoki, tytuł i nazwisko. Wychodzi nasycony prostokąt na jasnym papierze — jedyny mocny akcent na stronie, a przy tym półka od razu daje się przeglądać wzrokiem, bo każda książka wygląda inaczej. ========================================================================= */ .oklad { position: relative; overflow: hidden; flex: none; aspect-ratio: 2 / 3; display: flex; flex-direction: column; justify-content: space-between; border-radius: .15rem .3rem .3rem .15rem; background: linear-gradient(150deg, color-mix(in srgb, var(--epoka) 92%, #fff), color-mix(in srgb, var(--epoka) 78%, #000)); color: #fff; box-shadow: var(--cien-maly); } /* Grzbiet — wąski ciemniejszy pas po lewej, jak w oprawionej książce. */ .oklad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .28rem; background: rgb(0 0 0 / .22); } /* Delikatny połysk, żeby prostokąt nie był płaski. */ .oklad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .14), transparent 55%); } .oklad__tytul, .oklad__autor { position: relative; z-index: 1; } .oklad__tytul { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40; line-height: 1.12; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } .oklad__autor { font-family: var(--uzytkowy); letter-spacing: .08em; opacity: .85; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .oklad--mala { width: 3.4rem; padding: .45rem .4rem .4rem .55rem; } .oklad--mala .oklad__tytul { font-size: .5rem; -webkit-line-clamp: 4; } .oklad--mala .oklad__autor { font-size: .375rem; } .oklad--duza { width: 8.5rem; padding: 1rem .85rem .9rem 1.1rem; box-shadow: var(--cien-duzy); } .oklad--duza .oklad__tytul { font-size: 1.1rem; -webkit-line-clamp: 6; } .oklad--duza .oklad__autor { font-size: .625rem; } @media (max-width: 34rem) { .oklad--duza { width: 5.5rem; padding: .6rem .5rem .5rem .7rem; } .oklad--duza .oklad__tytul { font-size: .75rem; -webkit-line-clamp: 5; } .oklad--duza .oklad__autor { font-size: .5rem; } } /* Karta lektury musi teraz mieścić okładkę u góry, nie w linii bazowej. */ .pozycja__karta { align-items: flex-start; gap: .85rem; } .pozycja__karta:hover .oklad { box-shadow: var(--cien-duzy); } .oklad, .pozycja__karta { transition: box-shadow .15s ease, transform .15s ease; } .pozycja__karta:hover .oklad--mala { transform: translateY(-2px); } /* --- podniesienie kontrastu kart --------------------------------------- */ .pozycja__karta, .wracaj__karta, .autor-karta, .liczba, .epoka-kafel, .cytat, .postac, .haslo-karta { box-shadow: var(--cien-maly); } .pozycja__karta:hover, .autor-karta:hover, .haslo-karta:hover { box-shadow: var(--cien-duzy); } .czolo { box-shadow: var(--cien-duzy); } /* Nagłówki sekcji wyraźniej odcinają bloki od siebie. */ .polka__naglowek, .lektura__podtytul { color: var(--atrament); font-weight: 600; opacity: .55; } /* --- okładki w „wróć do czytania” i w wynikach wyszukiwania ------------- */ .wracaj__karta { display: flex; gap: .8rem; align-items: flex-start; } .wracaj__opis { flex: 1; min-width: 0; } .wracaj__karta:hover .oklad { box-shadow: var(--cien-duzy); transform: translateY(-2px); } .oklad--drobna { width: 2.3rem; padding: .3rem .25rem .25rem .4rem; } .oklad--drobna .oklad__tytul { font-size: .3125rem; -webkit-line-clamp: 4; } .oklad--drobna .oklad__autor { font-size: .25rem; } .wynik-czesc { align-items: center; } .wynik-czesc__opis { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } /* --- stronicowanie ------------------------------------------------------ */ .stronicowanie { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.5rem 0 2rem; } .stronicowanie__strona { display: grid; place-items: center; min-width: 2.1rem; padding: .3rem .5rem; font-family: var(--uzytkowy); font-size: 0.8125rem; text-decoration: none; color: var(--atrament); background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .25rem; } .stronicowanie__strona:hover { border-color: var(--epoka); color: var(--epoka); } .stronicowanie__strona--biezaca { background: var(--epoka); border-color: transparent; color: #fff; font-weight: 600; } /* ========================================================================= Zaznaczenia i notatki Trzymane w przeglądarce, na tych samych kotwicach co pozycja czytania — przeżyją odświeżenie tekstu z Wolnych Lektur. ========================================================================= */ .zazn { border-radius: .1rem; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .zazn--zolty { background: color-mix(in srgb, #f2d94e 46%, transparent); } .zazn--zielony { background: color-mix(in srgb, #7fc98a 40%, transparent); } .zazn--niebieski { background: color-mix(in srgb, #7fb4e0 40%, transparent); } .zazn:hover { filter: brightness(.94); } /* Zaznaczenie z notatką dostaje kreskę pod spodem — inaczej nie da się go odróżnić od zwykłego zakreślenia, a to zupełnie inna rzecz. */ .zazn--z-notatka { border-bottom: 2px solid var(--atrament); padding-bottom: .05em; } [data-motyw="noc"] .zazn--zolty { background: rgb(242 217 78 / .26); } [data-motyw="noc"] .zazn--zielony { background: rgb(127 201 138 / .24); } [data-motyw="noc"] .zazn--niebieski { background: rgb(127 180 224 / .24); } /* --- menu po zaznaczeniu ------------------------------------------------ */ .menu-zazn { position: fixed; z-index: 40; display: flex; align-items: center; gap: .4rem; padding: .35rem .45rem; border-radius: .4rem; background: var(--atrament); box-shadow: var(--cien-duzy); } .menu-zazn__kolor { width: 1.35rem; height: 1.35rem; border-radius: 50%; cursor: pointer; border: 2px solid rgb(255 255 255 / .3); } .menu-zazn__kolor:hover { border-color: #fff; } .menu-zazn__kolor--zolty { background: #f2d94e; } .menu-zazn__kolor--zielony { background: #7fc98a; } .menu-zazn__kolor--niebieski { background: #7fb4e0; } .menu-zazn__akcja { border: 0; background: none; cursor: pointer; color: var(--papier); font-family: var(--uzytkowy); font-size: 0.75rem; padding: .25rem .5rem; border-radius: .25rem; } .menu-zazn__akcja:hover { background: rgb(255 255 255 / .14); } .dymek__usun { display: block; margin-top: .6rem; border: 0; cursor: pointer; background: none; color: var(--margines); font-family: var(--uzytkowy); font-size: 0.75rem; padding: 0; } .dymek__usun:hover { text-decoration: underline; } /* --- notatki na stronie lektury ---------------------------------------- */ .notatki { margin-bottom: 2rem; } .notatka { margin: 0 0 .6rem; padding: .8rem 1rem; border-radius: .3rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid currentColor; } .notatka.zazn--zolty { color: #c9a41f; } .notatka.zazn--zielony { color: #4e9a5e; } .notatka.zazn--niebieski { color: #3e7fb4; } .notatka__cytat { margin: 0; color: var(--atrament); font-size: 0.9375rem; line-height: 1.55; } .notatka__cytat::before { content: "„"; } .notatka__cytat::after { content: "”"; } .notatka__tresc { margin: .5rem 0 0; padding-top: .5rem; color: var(--atrament); font-family: var(--uzytkowy); font-size: 0.875rem; border-top: 1px dashed var(--papier-cien); } .notatka__miejsce { margin-top: .5rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .notatka__miejsce a { color: inherit; text-decoration: none; } .notatka__miejsce a:hover { color: var(--epoka); } .notatki__uwaga { font-size: 0.8125rem; color: var(--olowek); background: var(--piasek); border-radius: .3rem; padding: .7rem .9rem; } /* --- wyszukiwanie w lekturze ------------------------------------------- */ .szukaj-w-lekturze { display: flex; align-items: center; gap: .4rem; margin-bottom: .9rem; background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .3rem; padding: .3rem .55rem; } .szukaj-w-lekturze .szukajka__pole { width: 100%; font-size: 0.8125rem; } .wyniki-tekstu { margin-bottom: 1rem; } .wyniki-tekstu__stan, .wyniki-tekstu__ile { margin: 0 0 .5rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); letter-spacing: .06em;} .wynik-tekst { display: block; width: 100%; text-align: left; cursor: pointer; border: 0; border-left: 2px solid var(--papier-cien); background: none; padding: .4rem .5rem .4rem .6rem; margin-bottom: .15rem; border-radius: 0 .2rem .2rem 0; } .wynik-tekst:hover { background: var(--karta); border-left-color: var(--epoka); } .wynik-tekst__cytat { display: block; font-size: 0.75rem; line-height: 1.45; color: var(--olowek); } .wynik-tekst__cytat mark { background: color-mix(in srgb, var(--zakreslacz) 85%, transparent); color: var(--atrament); font-weight: 600; border-radius: .1rem; } .wynik-tekst__miejsce { display: block; margin-top: .15rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); } /* ========================================================================= Lektury według klas ========================================================================= */ .klasy { margin-bottom: 2.5rem; } .klasy__siatka { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .klasa-kafel { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: .4rem; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--epoka) 13%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 28%, transparent); box-shadow: var(--cien-maly); transition: transform .15s ease; } .klasa-kafel:hover { transform: translateY(-2px); box-shadow: var(--cien-duzy); } .klasy .klasa-kafel:nth-child(1) { --epoka: var(--e-renesans); } .klasy .klasa-kafel:nth-child(2) { --epoka: var(--e-oswiecenie); } .klasy .klasa-kafel:nth-child(3) { --epoka: var(--e-romantyzm); } .klasa-kafel__nazwa { font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; } .klasa-kafel__ile { display: flex; align-items: baseline; gap: .35rem; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 60; font-size: 1.8rem; line-height: 1; color: var(--epoka); } .klasa-kafel__z { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .klasa-kafel__opis { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- wykaz na stronie klasy -------------------------------------------- */ .wykaz { margin-bottom: 2.5rem; } .wykaz__lista { list-style: none; margin: 0; padding: 0; } .wykaz__pozycja { margin-bottom: .35rem; } .wykaz__link { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem; border-radius: .3rem; text-decoration: none; color: inherit; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); } a.wykaz__link:hover { box-shadow: var(--cien-maly); border-color: var(--olowek); border-left-color: var(--epoka); } /* Pozycji, których nie mamy, nie ukrywamy — uczeń ma wiedzieć, że istnieją, i dlaczego ich tu nie znajdzie. Stąd wyciszenie zamiast pominięcia. */ .wykaz__pozycja--brak .wykaz__link { background: transparent; border-style: dashed; border-left-color: var(--papier-cien); opacity: .75; } .wykaz__brak-oklad { width: 2.3rem; aspect-ratio: 2/3; flex: none; border-radius: .15rem; border: 1px dashed var(--olowek); opacity: .4; } .wykaz__opis { flex: 1; min-width: 0; } .wykaz__tytul { display: block; font-size: 0.9375rem; } a.wykaz__link:hover .wykaz__tytul { color: var(--epoka); } .wykaz__autor { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .wykaz__stan { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); white-space: nowrap; text-align: right; max-width: 9rem; } .wykaz__stan--jest { color: var(--epoka); font-weight: 600; } /* ========================================================================= Plan czytania Ma być jednym zdaniem, które mówi, co robić dziś. Nie tabelą na czternaście dni — taka tabela po pierwszym opuszczonym dniu jest nieprawdziwa, a uczeń przestaje jej ufać. ========================================================================= */ .plan { margin: 0 0 2rem; padding: 1.2rem 1.3rem; border-radius: .45rem; background: color-mix(in srgb, var(--epoka) 10%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 25%, transparent); box-shadow: var(--cien-maly); } .plan__tytul { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-weight: 400; font-size: 1.3rem; margin: 0 0 .3rem; } .plan__opis { margin: 0 0 .9rem; font-size: 0.875rem; color: var(--olowek); } .plan__terminy { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; } .plan__termin { font-family: var(--uzytkowy); font-size: 0.8125rem; cursor: pointer; padding: .45rem .9rem; border-radius: .3rem; background: var(--epoka); color: #fff; border: 0; box-shadow: 0 1px 4px color-mix(in srgb, var(--epoka) 35%, transparent); } .plan__termin:hover { filter: brightness(1.08); transform: translateY(-1px); } .plan__wlasna { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); display: inline-flex; align-items: center; gap: .4rem; } .plan__data { font-family: var(--uzytkowy); font-size: 0.8125rem; border: 1px solid var(--papier-cien); border-radius: .25rem; padding: .25rem .4rem; background: var(--karta); color: var(--atrament); } .plan__na-dzis { margin: 0 0 .3rem; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-size: 1.25rem; line-height: 1.25; color: var(--atrament); } .plan__cel { margin: 0 0 .9rem; font-size: 0.875rem; color: var(--olowek); } .plan__cel a { color: var(--epoka); } /* Pasek pokazuje dwie rzeczy naraz: ile przeczytane i gdzie jest dzisiejsza meta. Różnica między nimi to dzisiejsza porcja — widać ją bez liczenia. */ .plan__pasek { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--epoka) 18%, transparent); margin-bottom: .7rem; overflow: hidden; } .plan__pasek-przeczytane { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--epoka); border-radius: 4px; } .plan__pasek-dzis { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--atrament); border-radius: 1px; } .plan__stopka { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .plan__usun { border: 0; background: none; cursor: pointer; padding: 0; color: var(--olowek); font-family: var(--uzytkowy); font-size: 0.75rem; text-decoration: underline; } .plan__usun:hover { color: var(--margines); } /* --- cel dnia w czytniku ------------------------------------------------ */ .spis__cel { margin: 0 0 .9rem; padding: .5rem .65rem; border-radius: .3rem; background: color-mix(in srgb, var(--epoka) 14%, var(--karta)); border-left: 3px solid var(--epoka); font-family: var(--uzytkowy); font-size: 0.75rem; line-height: 1.35; color: var(--atrament); } .spis__pozycja[data-w-planie="tak"] .spis__numer { font-weight: 600; } .spis__pozycja[data-w-planie="nie"] .spis__link { opacity: .62; } /* Znacznik dzisiejszej mety na kręgosłupie. */ .kregoslup[data-z-planem="tak"]::after { content: ""; position: absolute; left: 50%; top: var(--cel-dnia, 100%); width: 13px; height: 2px; margin-left: -6.5px; background: var(--atrament); border-radius: 1px; } .wroty--cel { background: var(--epoka); } .plan__akcja { margin: 0 0 .9rem; } .plan__akcja .przycisk { margin: 0; } /* --- pasek dzisiejszej porcji ------------------------------------------- */ .plan__cel-dnia { margin-bottom: .8rem; } .plan__cel-pasek { height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: .25rem; background: color-mix(in srgb, var(--epoka) 16%, transparent); } .plan__cel-pasek span { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--epoka); transition: width .25s ease; } .plan__cel-opis { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .plan[data-osiagniety="tak"] .plan__cel-pasek span { background: #4e9a5e; } .plan[data-osiagniety="tak"] .plan__cel-opis { color: #4e9a5e; font-weight: 600; } .plan[data-osiagniety="tak"] .plan__na-dzis::before { content: "✓ "; color: #4e9a5e; } .plan__tempo { display: inline-flex; align-items: center; gap: .3rem; } .plan__tempo-wybor { font-family: var(--uzytkowy); font-size: 0.75rem; border: 1px solid var(--papier-cien); border-radius: .2rem; background: var(--karta); color: var(--atrament); padding: .1rem .2rem; } /* --- cel dnia w czytniku ------------------------------------------------ */ .spis__cel { padding: .55rem .65rem; } .spis__cel-tekst { margin: 0 0 .35rem; } .spis__cel-pasek { height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--epoka) 20%, transparent); } .spis__cel-pasek span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--epoka); transition: width .2s linear; } .spis__cel[data-osiagniety="tak"] { background: color-mix(in srgb, #4e9a5e 14%, var(--karta)); border-left-color: #4e9a5e; } .spis__cel[data-osiagniety="tak"] .spis__cel-pasek span { background: #4e9a5e; } .spis__cel[data-osiagniety="tak"] .spis__cel-tekst::before { content: "✓ "; color: #4e9a5e; font-weight: 700; } .kregoslup[data-cel-osiagniety="tak"]::after { background: #4e9a5e; } /* --- wybór tempa w czytniku --------------------------------------------- */ .tempo-wybor { position: fixed; top: 3.6rem; right: .8rem; z-index: 35; width: 15rem; background: var(--papier); border: 1px solid var(--papier-cien); border-radius: .4rem; padding: .9rem; box-shadow: var(--cien-duzy); } .tempo-wybor__tytul { margin: 0 0 .2rem; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.0rem; } .tempo-wybor__opis { margin: 0 0 .7rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .tempo-wybor__opcje { display: grid; gap: .3rem; } .tempo-wybor__opcja { display: flex; flex-direction: column; gap: .1rem; cursor: pointer; text-align: left; padding: .5rem .6rem; border-radius: .3rem; background: var(--karta); border: 1px solid var(--papier-cien); } .tempo-wybor__opcja:hover { border-color: var(--epoka); } .tempo-wybor__opcja--wybrane { background: color-mix(in srgb, var(--epoka) 14%, var(--karta)); border-color: var(--epoka); } .tempo-wybor__nazwa { font-size: 0.875rem; color: var(--atrament); } .tempo-wybor__ile { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- postęp na półce: etykieta zamiast paska ---------------------------- */ .pozycja__przeczytane { font-family: var(--uzytkowy); font-size: 0.75rem; font-weight: 600; color: var(--epoka); white-space: nowrap; } /* --- dołożenie porcji --------------------------------------------------- */ .spis__cel-wiecej, .plan__wiecej { margin-top: .5rem; border: 0; cursor: pointer; border-radius: .25rem; font-family: var(--uzytkowy); font-size: 0.75rem; padding: .3rem .6rem; background: var(--epoka); color: #fff; } .spis__cel-wiecej:hover, .plan__wiecej:hover { filter: brightness(1.1); } .plan__wiecej { margin-left: .6rem; margin-top: 0; } /* --- spis klas ---------------------------------------------------------- */ .klasy__siatka--duza { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: 2rem; } .klasy__siatka--duza .klasa-kafel { padding: 1.3rem 1.4rem; } .klasy__siatka--duza .klasa-kafel:nth-child(1) { --epoka: var(--e-renesans); } .klasy__siatka--duza .klasa-kafel:nth-child(2) { --epoka: var(--e-oswiecenie); } .klasy__siatka--duza .klasa-kafel:nth-child(3) { --epoka: var(--e-romantyzm); } .klasa-kafel__pasek { display: block; height: 4px; border-radius: 2px; margin-top: .5rem; background: color-mix(in srgb, var(--epoka) 22%, transparent); } .klasa-kafel__pasek span { display: block; height: 100%; border-radius: 2px; background: var(--epoka); } .etapy-inne { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; } .etapy-inne__odnosnik { font-family: var(--uzytkowy); font-size: 0.8125rem; text-decoration: none; color: var(--epoka); padding: .35rem .7rem; border-radius: .25rem; background: var(--karta); border: 1px solid var(--papier-cien); } .etapy-inne__odnosnik:hover { border-color: var(--epoka); } /* Hasła na stronie litery wyglądają jednakowo — definicja jest przy każdym. Odnośnik pojawia się tylko tam, gdzie NAPRAWDĘ jest co pokazać (cytaty z kilku lektur), i mówi wprost, co za nim czeka. */ .lista-hasel__wiecej { display: inline-block; margin-left: .5rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); text-decoration: none; white-space: nowrap; } .lista-hasel__wiecej:hover { text-decoration: underline; } /* Cytat przy KAŻDYM haśle na stronie litery. Wcześniej zdanie z lektury dostawały tylko słowa z własną stroną — a mamy je dla wszystkich, więc różnica była sztuczna i wyglądała na niekonsekwencję. */ .lista-hasel__cytat { display: block; margin-top: .35rem; padding-left: .7rem; border-left: 2px solid color-mix(in srgb, var(--epoka) 35%, transparent); } .lista-hasel__cytat a { color: var(--olowek); text-decoration: none; font-size: 0.875rem; line-height: 1.5; } .lista-hasel__cytat a:hover { color: var(--atrament); } .lista-hasel__zrodlo { display: block; margin-top: .1rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); } .lista-hasel__inne { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); margin-left: .3rem; } .lista-hasel__wiecej { display: inline-block; margin: .4rem 0 0; } .lista-hasel__znaczenie { margin-bottom: 1.1rem; } .spis-tresci__miara { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; } .spis-tresci__link { align-items: center; padding-bottom: .45rem; } /* Wybór etapu na górze — uczeń, który trafił z wyszukiwarki na cudzą listę, ma przełączyć się od razu, a nie po przewinięciu całego wykazu. */ .etapy-inne--gora { margin-bottom: 1.5rem; } .etapy-inne__odnosnik--biezacy { background: var(--epoka); color: #fff; border-color: transparent; font-weight: 600; } /* --- długość rozdziału: kropki ------------------------------------------ Każdy pasek z tłem i wypełnieniem czyta się jako postęp — niezależnie od szerokości i podpisu. Kropki są policzalne, a nie mierzone: nie mają ani ścieżki, ani wypełnienia, więc nie ma czego wziąć za „przeczytane w 70%”. Pytanie, na które odpowiadają, jest zresztą kategorialne — „zdążę przed lekcją czy nie” — a nie ciągłe. ------------------------------------------------------------------------ */ .spis-tresci__kropki { display: flex; gap: 3px; align-items: center; height: .6rem; } .spis-tresci__kropki i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--epoka) 55%, transparent); } .spis-tresci__kropki em { font-style: normal; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); line-height: 1; } .spis-tresci__pozycja--dlugi .spis-tresci__kropki i { background: var(--epoka); } .spis-tresci__pozycja--dlugi .spis-tresci__czas { color: var(--epoka); font-weight: 600; } /* ========================================================================= Strony autorów i motywów — dopracowanie ========================================================================= */ .czolo--autor, .czolo--motyw { align-items: center; } .autor-czolo__inicjal { display: grid; place-items: center; width: 5rem; height: 5rem; flex: none; border-radius: 50%; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--epoka) 92%, #fff), color-mix(in srgb, var(--epoka) 72%, #000)); font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100; font-size: 2.4rem; box-shadow: var(--cien-maly); } /* Znak motywu — kwadrat z zaokrągleniem, żeby odróżniał się od okrągłych inicjałów autorów. Ta sama barwa co paski motywu w czytniku. */ .motyw-znak { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; flex: none; border-radius: 1.2rem; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--epoka) 92%, #fff), color-mix(in srgb, var(--epoka) 70%, #000)); font-family: var(--display); font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 100; font-size: 2.1rem; box-shadow: var(--cien-maly); } /* --- regał autora ------------------------------------------------------- */ /* Lista wierszy nie pokazywała tego, co u autora najciekawsze: ile tego jest i jak wygląda razem. Okładki obok siebie robią to od razu. */ .regal { display: grid; gap: 1.1rem 1rem; margin-bottom: 2rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); } .regal__ksiazka { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; } .regal__ksiazka .oklad--polkowa { width: 100%; padding: .7rem .6rem .6rem .8rem; } .oklad--polkowa .oklad__tytul { font-size: .7rem; -webkit-line-clamp: 5; } .oklad--polkowa .oklad__autor { font-size: .5rem; } .regal__ksiazka:hover .oklad { transform: translateY(-3px); box-shadow: var(--cien-duzy); } .regal__tytul { font-size: 0.8125rem; line-height: 1.25; } .regal__ksiazka:hover .regal__tytul { color: var(--epoka); } .regal__czas { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- rozkład motywu po lekturach ---------------------------------------- */ .rozklad { margin-bottom: 2rem; } .rozklad__lista { list-style: none; margin: 0; padding: 0; } .rozklad__pozycja { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr auto; align-items: center; gap: .8rem; padding: .3rem 0; } .rozklad__pozycja a { font-size: 0.875rem; color: var(--atrament); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rozklad__pozycja a:hover { color: var(--epoka); } /* Tu pasek JEST na miejscu: porównujemy lektury między sobą, więc wspólna podziałka to sens, a nie pomyłka. Wypełnienie odnosi się do lektury z największą liczbą fragmentów. */ .rozklad__pasek { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--epoka) 12%, transparent); } .rozklad__pasek span { display: block; height: 100%; border-radius: 5px; background: var(--epoka); } .rozklad__ile { font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30; font-size: 0.9375rem; color: var(--epoka); min-width: 1.6rem; text-align: right; } /* ========================================================================= Spisy autorów i motywów — siatki zamiast wierszy Lista wierszy przy czterdziestu autorach i czterystu motywach to ściana tekstu, po której nie da się przebiec wzrokiem. Siatka daje kształt i pozwala wybierać na oko, a nie czytając po kolei. ========================================================================= */ .autorzy-siatka, .motywy-siatka { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; } .autorzy-siatka { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .motywy-siatka { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .autorzy-siatka .pozycja, .motywy-siatka .pozycja { margin: 0; } /* --- płytka autora ------------------------------------------------------ */ .autor-plytka { position: relative; overflow: hidden; display: block; height: 100%; padding: 1rem 1rem .9rem; border-radius: .4rem; text-decoration: none; color: inherit; background: var(--karta); border: 1px solid var(--papier-cien); box-shadow: var(--cien-maly); transition: transform .15s ease; } .autor-plytka:hover { transform: translateY(-2px); box-shadow: var(--cien-duzy); } /* Cztery grzbiety książek u góry — zapowiedź tego, co jest na stronie autora, i jedyne miejsce, gdzie widać, że ktoś ma utwory z różnych epok. */ .autor-plytka__grzbiety { position: absolute; inset: 0 0 auto 0; height: .35rem; display: flex; } .autor-plytka__grzbiet { flex: 1; background: var(--epoka); } .autor-plytka__grzbiet[data-wariant="1"] { filter: brightness(1.15); } .autor-plytka__grzbiet[data-wariant="2"] { filter: brightness(.85); } .autor-plytka__grzbiet[data-wariant="3"] { filter: brightness(1.3); } .autor-plytka__inicjal { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; margin-bottom: .5rem; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--epoka) 92%, #fff), color-mix(in srgb, var(--epoka) 72%, #000)); font-family: var(--display); font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 40; font-size: 1.25rem; } .autor-plytka__nazwa { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; line-height: 1.2; margin-bottom: .2rem; } .autor-plytka:hover .autor-plytka__nazwa { color: var(--epoka); } .autor-plytka__dane { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- płytka motywu ------------------------------------------------------ */ .motyw-plytka { display: block; height: 100%; padding: .9rem 1rem; border-radius: .4rem; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 30%, transparent); border-left: 4px solid var(--epoka); box-shadow: var(--cien-maly); transition: transform .15s ease; } .motyw-plytka:hover { transform: translateY(-2px); box-shadow: var(--cien-duzy); background: color-mix(in srgb, var(--epoka) 20%, var(--karta)); } .motyw-plytka__nazwa { display: block; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30; font-size: 1.1rem; line-height: 1.15; margin-bottom: .3rem; } .motyw-plytka__dane { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); margin-bottom: .3rem; } .motyw-plytka__dane strong { color: var(--epoka); font-size: 0.8125rem; } .motyw-plytka__lektury { display: block; font-size: 0.75rem; color: var(--olowek); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* --- warianty okładek --------------------------------------------------- Barwa niesie epokę, ale u jednego autora wszystkie utwory są zwykle z tej samej — półka Mickiewicza wychodziła ścianą czerwieni. Sześć wariantów zmienia JASNOŚĆ w szerokim zakresie: od wyraźnie przyciemnionych po rozjaśnione. Odcień zostaje ten sam, więc epokę nadal da się rozpoznać, a półka przestaje być jednolita. ------------------------------------------------------------------------ */ .oklad[data-wariant="0"] { background: linear-gradient(150deg, color-mix(in srgb, var(--epoka) 96%, #fff), color-mix(in srgb, var(--epoka) 74%, #000)); } .oklad[data-wariant="1"] { background: linear-gradient(125deg, color-mix(in srgb, var(--epoka) 62%, #fff), color-mix(in srgb, var(--epoka) 92%, #fff)); } .oklad[data-wariant="2"] { background: linear-gradient(165deg, color-mix(in srgb, var(--epoka) 78%, #000), color-mix(in srgb, var(--epoka) 52%, #000)); } .oklad[data-wariant="3"] { background: linear-gradient(135deg, color-mix(in srgb, var(--epoka) 84%, #fff), color-mix(in srgb, var(--epoka) 88%, #000)); } .oklad[data-wariant="4"] { background: linear-gradient(155deg, color-mix(in srgb, var(--epoka) 90%, #000), color-mix(in srgb, var(--epoka) 68%, #fff)); } .oklad[data-wariant="5"] { background: linear-gradient(115deg, color-mix(in srgb, var(--epoka) 70%, #fff), color-mix(in srgb, var(--epoka) 60%, #000)); } /* Grzbiety na płytce autora — ta sama zasada, mocniejszy rozstrzał. */ .autor-plytka__grzbiet[data-wariant="0"] { filter: brightness(1); } .autor-plytka__grzbiet[data-wariant="1"] { filter: brightness(1.45); } .autor-plytka__grzbiet[data-wariant="2"] { filter: brightness(.7); } .autor-plytka__grzbiet[data-wariant="3"] { filter: brightness(1.2); } .autor-plytka__grzbiet[data-wariant="4"] { filter: brightness(.85); } .autor-plytka__grzbiet[data-wariant="5"] { filter: brightness(1.6); } /* ========================================================================= Słuchacz — odtwarzacz nagrań Jednostką jest ROZDZIAŁ, nie cała książka: przy 91 lekturach nagrania udaje się związać z naszym spisem treści, więc uczeń włącza nagranie tego rozdziału, który czyta. ========================================================================= */ .sluchacz { position: fixed; left: var(--panel); right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; background: var(--papier); border-top: 1px solid var(--papier-cien); box-shadow: 0 -2px 12px rgb(60 45 25 / .1); } .sluchacz__graj { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer; background: var(--epoka); color: #fff; font-size: 0.9rem; display: grid; place-items: center; } .sluchacz__graj:hover { filter: brightness(1.1); } .sluchacz__srodek { flex: 1; min-width: 0; } .sluchacz__tytul { margin: 0 0 .2rem; font-size: 0.8125rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sluchacz__pasek { height: 5px; border-radius: 3px; cursor: pointer; overflow: hidden; background: var(--papier-cien); } .sluchacz__pasek span { display: block; height: 100%; width: 0; background: var(--epoka); } .sluchacz__czas { margin: .15rem 0 0; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .sluchacz__narzedzie { flex: none; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--olowek); cursor: pointer; border-radius: .25rem; font-family: var(--uzytkowy); font-size: 0.75rem; padding: .3rem .5rem; } .sluchacz__narzedzie:hover { border-color: var(--epoka); color: var(--epoka); } .sluchacz__narzedzie[aria-pressed="true"] { background: var(--epoka); color: #fff; border-color: transparent; } /* Pasek „zostało” schodzi wyżej, gdy gra nagranie. */ .sluchacz:not([hidden]) ~ .zostalo { bottom: 3.6rem; } @media (max-width: 34rem) { .sluchacz__czas { display: none; } } /* --- lista nagrań na stronie lektury ------------------------------------ */ .nagrania { margin-bottom: 2rem; } .nagrania__lista { list-style: none; margin: 0; padding: 0; } .nagrania__pozycja { margin-bottom: .2rem; } .nagrania__link { display: flex; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: .3rem; text-decoration: none; color: inherit; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 3px solid var(--epoka); } .nagrania__link:hover { box-shadow: var(--cien-maly); } .nagrania__numer { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); min-width: 1.6rem; text-align: right; } .nagrania__tytul { flex: 1; min-width: 0; font-size: 0.9375rem; } .nagrania__link:hover .nagrania__tytul { color: var(--epoka); } .nagrania__znak { color: var(--epoka); } .pozycja__audio { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--epoka); white-space: nowrap; } .nagrania__pozycja { display: flex; align-items: center; gap: .5rem; } .nagrania__link { flex: 1; } .nagrania__pobierz { flex: none; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); text-decoration: none; white-space: nowrap; padding: .3rem .5rem; border-radius: .25rem; border: 1px solid var(--papier-cien); } .nagrania__pobierz:hover { border-color: var(--epoka); color: var(--epoka); } .sluchacz__tytul[data-blad="tak"] { color: var(--margines); } /* ========================================================================= Ustawienia dostępności — panel globalny Osiągalny z nagłówka KAŻDEJ strony. Osoba, która potrzebuje większych odstępów, potrzebuje ich także na półce i w słowniku — czyli tam, gdzie szuka książki, zanim zacznie ją czytać. Zakres jest wyborem użytkownika: „tylko podczas czytania” albo „na wszystkich stronach”. Część osób chce spokojnego interfejsu i zmienionego wyłącznie tekstu lektury. ========================================================================= */ :root { --odstep-liter: 0em; --odstep-wyrazow: 0em; --interlinia: 1.8; } /* Tekst lektury zawsze podlega ustawieniom — to jego dotyczą w pierwszej kolejności. */ .czytnik .akapit, .czytnik .wiersz, .czytnik .didaskalia { letter-spacing: var(--odstep-liter); word-spacing: var(--odstep-wyrazow); line-height: var(--interlinia); } [data-kroj="bezszeryfowy"] .czytnik { font-family: var(--uzytkowy); } /* Zakres „wszędzie” rozciąga je na resztę serwisu. */ [data-zakres-dostepnosci="wszedzie"] body { letter-spacing: var(--odstep-liter); word-spacing: var(--odstep-wyrazow); line-height: var(--interlinia); } [data-zakres-dostepnosci="wszedzie"][data-kroj="bezszeryfowy"] body { font-family: var(--uzytkowy); } /* Wysoki kontrast — dla osób słabowidzących ciepła biel bywa za miękka. */ [data-kontrast="wysoki"] { --papier: #ffffff; --karta: #ffffff; --piasek: #f2f2f2; --papier-cien: #767676; --atrament: #000000; --olowek: #4a4a4a; } [data-kontrast="wysoki"] .oklad { box-shadow: 0 0 0 1px #000; } [data-kontrast="wysoki"] .pozycja__karta, [data-kontrast="wysoki"] .liczba, [data-kontrast="wysoki"] .motyw-plytka, [data-kontrast="wysoki"] .autor-plytka { border-color: #767676; } /* Podświetlenie akapitu — przeciw gubieniu wersu przy powrocie wzroku do lewej krawędzi. */ [data-linijka="tak"] .czytnik .akapit:hover, [data-linijka="tak"] .czytnik .wiersz:hover { background: color-mix(in srgb, var(--zakreslacz) 45%, transparent); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--zakreslacz) 45%, transparent); border-radius: .15rem; } .szczyt__dostepnosc { border: 1px solid var(--papier-cien); background: var(--karta); color: var(--atrament); cursor: pointer; border-radius: .25rem; font-family: var(--uzytkowy); font-size: 0.8125rem; padding: .25rem .5rem; margin-left: .5rem; min-height: 1.9rem; } .szczyt__dostepnosc:hover { border-color: var(--epoka); color: var(--epoka); } .dostepnosc { position: fixed; top: 4rem; right: 1rem; z-index: 60; width: 21rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 5rem); overflow-y: auto; padding: 1.1rem; background: var(--papier); border: 1px solid var(--papier-cien); border-radius: .45rem; box-shadow: var(--cien-duzy); } .dostepnosc__naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; } .dostepnosc__tytul { margin: 0; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.1rem; } .dostepnosc__zamknij { border: 0; background: none; cursor: pointer; color: var(--olowek); font-size: 1rem; padding: .25rem .4rem; min-width: 1.9rem; min-height: 1.9rem; } .dostepnosc__opis { margin: 0 0 1rem; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); line-height: 1.45; } .dostepnosc__grupa { border: 0; margin: 0 0 1rem; padding: 0; } .dostepnosc__grupa legend { font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; margin-bottom: .35rem; letter-spacing: .04em; } .dostepnosc__grupa label, .dostepnosc__przelacznik { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1.4; cursor: pointer; } .dostepnosc__suwak { display: block; margin-bottom: .9rem; font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1.4; } .dostepnosc__suwak b { color: var(--epoka); font-weight: 600; } .dostepnosc__suwak input { display: block; width: 100%; margin-top: .35rem; } .dostepnosc__przelacznik { margin-bottom: 1rem; } /* Cele dotykowe: suwak albo pole wyboru mniejsze niż ok. 24 px jest praktycznie nieużywalne palcem — WCAG 2.5.8. */ .dostepnosc input[type="range"] { height: 1.75rem; } .dostepnosc input[type="checkbox"], .dostepnosc input[type="radio"] { width: 1.2rem; height: 1.2rem; flex: none; } .dostepnosc__reset { width: 100%; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--atrament); cursor: pointer; border-radius: .25rem; font-family: var(--uzytkowy); font-size: 0.8125rem; padding: .5rem; min-height: 2.2rem; } .dostepnosc__reset:hover { border-color: var(--epoka); color: var(--epoka); } @media (max-width: 34rem) { .dostepnosc { right: .5rem; left: .5rem; width: auto; top: 3.4rem; } } /* ========================================================================= Telefon — poprawki po audycie mobilnym Audyt wykazał, że układ nie rozpycha ekranu, ale wskazał dwa realne problemy: cztery warstwy przypięte do dolnej krawędzi oraz pasek czytnika z dziewięcioma przyciskami na 360 px. ========================================================================= */ /* Bezpieczny margines na telefonach z zaokrąglonym ekranem i paskiem gestów u dołu — bez tego przyciski wpadają pod pasek systemowy. */ .sluchacz { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); } .zostalo { bottom: calc(0px + env(safe-area-inset-bottom)); } /* Kolejność warstw przy dolnej krawędzi: słuchacz na dole, nad nim pasek postępu, nad nim komunikat powrotu. Bez tego zasłaniają się nawzajem dokładnie tam, gdzie nie ma miejsca, żeby je rozsunąć. */ .sluchacz:not([hidden]) ~ .wroty { bottom: 4.6rem; } .zostalo:not([hidden]) ~ .wroty { bottom: 3rem; } @media (max-width: 34rem) { /* Pasek czytnika miał sześć przycisków plus tytuł. Na wąskim ekranie zostawiamy cztery. Zmniejszanie i powiększanie pisma znika, bo panel „Aa” robi to samo suwakiem i z opisem. Tempo czytania też znika — to ustawienie zmienia się raz i jest dostępne na stronie lektury, przy planie czytania, gdzie ma widoczny wpływ na liczby. */ #mniejsza, #wieksza, #tempo { display: none; } .pasek { gap: .35rem; padding: .5rem .6rem; } .pasek__narzedzie, .pasek__spis { min-width: 2.2rem; min-height: 2.2rem; /* wygodny cel dotykowy */ } /* Panel rozdziałów na całą szerokość — przy 84vw zostawał wąski pasek tekstu z boku, który kusi do kliknięcia i zamyka panel przypadkiem. */ .spis { width: 100%; } /* Słuchacz: tytuł nagrania ma pierwszeństwo przed narzędziami. */ .sluchacz { gap: .5rem; padding-left: .6rem; padding-right: .6rem; } .sluchacz__narzedzie { padding: .3rem .4rem; } /* Dwie kolumny przy kaflach zamiast jednej — trzy liczby obok siebie czytają się lepiej niż długa lista. */ .liczby { grid-template-columns: repeat(2, 1fr); } } /* Bardzo wąskie ekrany (320 px, iPhone SE). */ @media (max-width: 22rem) { .pasek__marka, .sluchacz__narzedzie#sluchacz-tempo { display: none; } .czolo { flex-direction: column; gap: .8rem; } .oklad--duza { width: 6.5rem; } } /* --- przycisk spisu i zamykanie panelu ---------------------------------- */ /* Znak ☰ jest widoczny ZAWSZE. Wcześniej na wąskim ekranie chowaliśmy sam napis „Spis”, przez co przycisk stawał się pustym prostokątem i nikt nie wiedział, że to on otwiera rozdziały. */ .pasek__spis-znak { font-size: 1rem; line-height: 1; } .spis__zamknij { position: absolute; top: .7rem; right: .7rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--papier-cien); background: var(--karta); color: var(--olowek); cursor: pointer; font-size: .9rem; display: none; place-items: center; } .spis__zamknij:hover { border-color: var(--epoka); color: var(--epoka); } @media (max-width: 34rem) { /* Na telefonie panel przykrywa tekst, więc musi mieć własne wyjście. */ .spis__zamknij { display: grid; } /* Karta na półce: kolumna z danymi schodzi pod tytuł zamiast walczyć z nim o szerokość. */ .pozycja__karta { flex-wrap: wrap; } .pozycja__prawa { max-width: none; width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding-left: 4.25rem; /* równo z tekstem, obok okładki */ } .pozycja__epoka { margin-bottom: 0; } } /* ========================================================================= Porównywarka lektur „Porównaj obraz X w dwóch utworach” to najczęstsze polecenie na maturze. Dane mieliśmy od dawna — trzeba je było tylko odwrócić. ========================================================================= */ .porownaj__wybor { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 1.1rem; background: color-mix(in srgb, var(--epoka) 10%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 24%, transparent); border-radius: .45rem; } .porownaj__pole { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: .3rem; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); } .porownaj__pole select { font-family: var(--uzytkowy); font-size: 0.875rem; padding: .5rem; min-height: 2.4rem; border-radius: .25rem; background: var(--karta); border: 1px solid var(--papier-cien); color: var(--atrament); } .porownaj__znak { font-family: var(--display); font-size: 1.3rem; color: var(--olowek); padding-bottom: .5rem; } .porownaj__pary { display: grid; gap: .7rem; margin-bottom: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .porownaj__karta { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit; padding: .7rem .9rem; border-radius: .35rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); box-shadow: var(--cien-maly); } .porownaj__karta:hover { box-shadow: var(--cien-duzy); } .porownaj__karta-opis { min-width: 0; } .porownaj__karta-tytul { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1rem; line-height: 1.2; } .porownaj__karta-autor, .porownaj__karta-epoka { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } .porownaj__karta-epoka { color: var(--epoka); } .porownaj__motywy { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .porownaj__motyw { display: block; padding: .6rem .8rem; border-radius: .3rem; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 28%, transparent); border-left: 4px solid var(--epoka); } .porownaj__motyw:hover { background: color-mix(in srgb, var(--epoka) 22%, var(--karta)); } .porownaj__motyw-nazwa { display: block; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 0.9375rem; } .porownaj__motyw-ile { font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); } /* --- lektury pokrewne na stronie utworu --------------------------------- */ .pokrewne { margin-bottom: 2rem; } .pokrewne__lista { list-style: none; margin: 0; padding: 0; } .pokrewne__pozycja { margin-bottom: .35rem; } .pokrewne__link { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; padding: .6rem .8rem; border-radius: .3rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); } .pokrewne__link:hover { box-shadow: var(--cien-maly); } .pokrewne__opis { flex: 1; min-width: 0; } .pokrewne__tytul { display: block; font-size: 0.9375rem; } .pokrewne__link:hover .pokrewne__tytul { color: var(--epoka); } .pokrewne__autor, .pokrewne__motywy { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); line-height: 1.35; } .pokrewne__motywy { color: var(--epoka); } .pokrewne__ile { flex: none; text-align: right; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-size: 1.4rem; color: var(--epoka); line-height: 1; } .pokrewne__ile span { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); max-width: 5.5rem; } @media (max-width: 34rem) { .porownaj__znak { display: none; } .pokrewne__link { flex-wrap: wrap; } .pokrewne__ile { text-align: left; } .pokrewne__ile span { max-width: none; } } /* --- cytaty z dwóch lektur obok siebie ---------------------------------- */ /* Odesłanie na stronę motywu ze wszystkimi 138 lekturami gubiło dokładnie to porównanie, po które czytelnik przyszedł. Fragmenty rozwijają się więc na miejscu, w dwóch kolumnach. */ .porownaj__motyw { width: 100%; text-align: left; cursor: pointer; font: inherit; } .porownaj__motyw[aria-expanded="true"] { background: var(--epoka); color: #fff; } .porownaj__motyw[aria-expanded="true"] .porownaj__motyw-ile { color: rgb(255 255 255 / .8); } .fragmenty { margin: 1.5rem 0 2rem; } .fragmenty__pary { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .fragmenty__tytul { font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-weight: 400; font-size: 1.05rem; margin: 0 0 .6rem; padding-bottom: .35rem; color: var(--atrament); border-bottom: 2px solid var(--epoka); } .fragmenty__brak { font-size: 0.875rem; color: var(--olowek); background: var(--piasek); border-radius: .3rem; padding: .7rem .9rem; } .fragmenty__wszystkie { margin-top: 1rem; font-family: var(--uzytkowy); font-size: 0.8125rem; } .fragmenty__wszystkie a { color: var(--epoka); } .fragmenty .cytat { margin-bottom: .6rem; } .fragmenty__ile { font-family: var(--uzytkowy); font-size: 0.75rem; font-weight: 400; color: var(--olowek); } /* ========================================================================= Tryb offline Uczeń czyta w autobusie, w pociągu i na przerwie w szkole bez wifi — to nie są sytuacje wyjątkowe, tylko dokładnie te, w których czyta się lektury. ========================================================================= */ .stan-sieci { position: sticky; top: 0; z-index: 70; margin: 0; padding: .5rem 1rem; text-align: center; background: var(--ochra); color: #fff; font-family: var(--uzytkowy); font-size: 0.8125rem; } .offline { margin-bottom: 2rem; } .offline__pasek { height: 8px; border-radius: 4px; overflow: hidden; margin: .6rem 0 .4rem; background: color-mix(in srgb, var(--epoka) 18%, transparent); } .offline__pasek span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--epoka); transition: width .2s linear; } .offline__stan { margin: .3rem 0 0; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); line-height: 1.45; } /* Lektura zapisana — zielony, bo to stan docelowy, a nie ostrzeżenie. */ .offline[data-pobrana="tak"] .offline__stan { color: #3f7a4d; } .offline[data-pobrana="tak"] .offline__stan::before { content: "✓ "; } /* --- zaproszenie do instalacji ------------------------------------------ */ /* Przeglądarki chowają tę możliwość w menu, a Safari nie proponuje jej wcale. Bez widocznego przycisku i instrukcji nikt tego nie znajdzie. */ .instalacja { position: fixed; left: .6rem; right: .6rem; z-index: 65; bottom: calc(.6rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: .5rem; background: var(--atrament); color: var(--papier); box-shadow: var(--cien-duzy); } .instalacja__ikona { flex: none; width: 2.2rem; height: 2.2rem; border-radius: .4rem; background: var(--e-romantyzm); background-image: linear-gradient(150deg, color-mix(in srgb, var(--e-romantyzm) 90%, #fff), color-mix(in srgb, var(--e-romantyzm) 70%, #000)); } .instalacja__tresc { flex: 1; min-width: 0; } .instalacja__tytul { margin: 0; font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; } .instalacja__opis { margin: .1rem 0 0; font-family: var(--uzytkowy); font-size: 0.75rem; color: color-mix(in srgb, var(--papier) 75%, transparent); line-height: 1.35; } .instalacja__opis strong { color: var(--papier); } .instalacja__dodaj { flex: none; border: 0; cursor: pointer; border-radius: .3rem; background: var(--papier); color: var(--atrament); font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; padding: .5rem .9rem; min-height: 2.2rem; } .instalacja__zamknij { flex: none; border: 0; background: none; cursor: pointer; color: color-mix(in srgb, var(--papier) 60%, transparent); font-size: .9rem; min-width: 2rem; min-height: 2rem; } .instalacja__zamknij:hover { color: var(--papier); } /* --- instrukcja instalacji ---------------------------------------------- */ .instrukcja { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: krok; } .instrukcja li { position: relative; margin-bottom: .6rem; padding: .8rem 1rem .8rem 3rem; background: var(--karta); border: 1px solid var(--papier-cien); border-radius: .35rem; font-size: 0.9375rem; line-height: 1.5; } .instrukcja li::before { counter-increment: krok; content: counter(krok); position: absolute; left: .9rem; top: .9rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--epoka); color: #fff; font-family: var(--uzytkowy); font-size: 0.75rem; } .instrukcja strong { display: block; margin-bottom: .15rem; } .instrukcja em { font-style: normal; color: var(--epoka); font-weight: 600; } /* --- strona sprawdzenia trybu offline ----------------------------------- */ .diagnostyka { list-style: none; margin: 0 0 2rem; padding: 0; } .diag { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem .6rem 2.2rem; margin-bottom: .25rem; border-radius: .3rem; position: relative; background: var(--karta); border: 1px solid var(--papier-cien); font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1.4; } .diag::before { position: absolute; left: .7rem; top: .6rem; font-weight: 700; } .diag--dobrze { border-left: 4px solid #3f7a4d; } .diag--dobrze::before { content: "✓"; color: #3f7a4d; } .diag--zle { border-left: 4px solid var(--margines); } .diag--zle::before { content: "✕"; color: var(--margines); } .diag--uwaga { border-left: 4px solid var(--ochra); } .diag--uwaga::before { content: "!"; color: var(--ochra); } .diag--info { border-left: 4px solid var(--papier-cien); background: transparent; } .diag--info::before { content: "·"; color: var(--olowek); } .diag__etykieta { color: var(--atrament); overflow-wrap: anywhere; } .diag__szczegol { color: var(--olowek); font-size: 0.75rem; overflow-wrap: anywhere; } /* ========================================================================= Pasek atutów na stronie głównej Problem: strona główna jest już gęsta w pionie — kafelki, oś epok, klasy, autorzy, półka. Dokładanie tam kolejnej sekcji z opisem funkcji zepchnęłoby lektury poniżej ekranu. Rozwiązanie wykorzystuje miejsce, którego dotąd nie używaliśmy: pas z prawej strony na szerokim ekranie. Na telefonie zamienia się w poziomy przewijany rząd tuż pod nagłówkiem — a więc też nie wydłuża strony. ========================================================================= */ .strona--szeroka { max-width: 46rem; } .glowna { display: flex; flex-direction: column; } .glowna__tresc { min-width: 0; } .atuty { /* Na telefonie: poziomy pas nad treścią. `order` przesuwa go w górę bez ruszania kolejności w kodzie, gdzie musi stać obok treści, żeby na szerokim ekranie trafić do drugiej kolumny. */ order: -1; margin-bottom: 2rem; display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .atuty__naglowek { display: none; } .atut { flex: 0 0 15rem; scroll-snap-align: start; display: flex; gap: .6rem; align-items: flex-start; text-align: left; padding: .8rem .9rem; border-radius: .4rem; text-decoration: none; color: inherit; cursor: pointer; background: color-mix(in srgb, var(--epoka) 10%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 24%, transparent); border-left: 4px solid var(--epoka); box-shadow: var(--cien-maly); } a.atut:hover, button.atut:hover { background: color-mix(in srgb, var(--epoka) 18%, var(--karta)); } .atut--cichy { cursor: default; } /* Każdy atut w innej barwie — te same kolory epok, użyte jako paleta. */ .atuty .atut:nth-child(6n+2) { --epoka: var(--e-pozytywizm); } .atuty .atut:nth-child(6n+3) { --epoka: var(--e-modernizm); } .atuty .atut:nth-child(6n+4) { --epoka: var(--e-renesans); } .atuty .atut:nth-child(6n+5) { --epoka: var(--e-oswiecenie); } .atuty .atut:nth-child(6n+6) { --epoka: var(--e-starozytnosc); } .atuty .atut:nth-child(6n+7) { --epoka: var(--e-romantyzm); } .atut__znak { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .35rem; background: var(--epoka); color: #fff; font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1; } .atut__tresc { min-width: 0; } .atut__tytul { display: block; font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; color: var(--atrament); margin-bottom: .1rem; } .atut__opis { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); line-height: 1.4; } /* --- szeroki ekran: kolumna z prawej ------------------------------------ */ @media (min-width: 72rem) { .strona--szeroka { max-width: 66rem; } .glowna { display: grid; gap: 2.5rem; align-items: start; grid-template-columns: minmax(0, 1fr) 16rem; } .glowna__tresc { grid-column: 1; grid-row: 1; } .atuty { grid-column: 2; grid-row: 1; order: 0; position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 0; /* Element przypięty WYŻSZY NIŻ EKRAN ma dolną część nieosiągalną — nie da się do niej doscrollować, bo przewija się razem z widokiem. Przy dziesięciu kafelkach cała grupa „Bezpieczne dla dziecka” znikała poniżej krawędzi. Własne przewijanie to naprawia. */ max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; } /* Delikatny sygnał, że pasek ma więcej treści niż widać. */ .atuty::-webkit-scrollbar { width: 6px; } .atuty::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--olowek) 35%, transparent); border-radius: 3px; } .atuty__naglowek { display: block; margin: 0 0 .2rem; font-family: var(--uzytkowy); font-size: 0.75rem; letter-spacing: .1em; color: var(--olowek); font-weight: 600; } .atut { flex: none; } /* Nagłówek strony i stopka zostają na szerokości treści, żeby pasek atutów nie rozjeżdżał całego układu. */ .strona--szeroka .wstep { max-width: 46rem; } } .filtr-audio { margin: 0 0 .8rem; padding: .6rem .9rem; border-radius: .3rem; background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); border-left: 4px solid var(--epoka); font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--olowek); } .filtr-audio a { color: var(--epoka); } /* ========================================================================= Podgląd fragmentu Wejście z cytatu, przypisu albo pierwszej kwestii bohatera to nie czytanie. Zapisywanie wtedy pozycji oznaczało lekturę jako rozpoczętą w 5%, choć nikt nie przeczytał zdania — a półka pokazywała fałszywy postęp i plan czytania liczył od złego miejsca. Samo nierejestrowanie postępu byłoby jednak równie mylące, tylko po cichu. Stąd pasek, który mówi wprost, w jakim jesteśmy trybie, i daje dwa wyjścia: czytać od początku albo wrócić tam, gdzie się skończyło. ========================================================================= */ .podglad { position: sticky; top: 3.2rem; z-index: 24; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 auto 1.5rem; max-width: var(--tresc); padding: .7rem .9rem; border-radius: .4rem; background: color-mix(in srgb, var(--ochra) 16%, var(--karta)); border: 1px solid color-mix(in srgb, var(--ochra) 40%, transparent); border-left: 4px solid var(--ochra); } .podglad__znak { flex: none; font-size: .9rem; } .podglad__opis { flex: 1; min-width: 10rem; margin: 0; font-family: var(--uzytkowy); font-size: 0.8125rem; color: var(--atrament); line-height: 1.4; } .podglad__akcja { flex: none; border: 0; cursor: pointer; border-radius: .25rem; background: var(--epoka); color: #fff; font-family: var(--uzytkowy); font-size: 0.75rem; padding: .45rem .8rem; min-height: 2.1rem; } .podglad__akcja:hover { filter: brightness(1.1); } .podglad__akcja--drugi { background: var(--karta); color: var(--atrament); border: 1px solid var(--papier-cien); } /* --- ścieżka nawigacyjna ------------------------------------------------ */ /* Dla kogoś, kto wszedł z wyszukiwarki wprost na hasło słownikowe albo motyw — musi zobaczyć, gdzie jest i co jeszcze tu znajdzie. */ .okruszki { margin: 0 0 1.2rem; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); line-height: 1.5; } .okruszki a { color: var(--olowek); text-decoration: none; } .okruszki a:hover { color: var(--epoka); text-decoration: underline; } .okruszki [aria-current="page"] { color: var(--atrament); } /* Nagłówek H1 w czytniku — dla wyszukiwarki i czytnika ekranu. Wizualnie tytuł niesie pasek u góry, ale strona bez H1 jest dla robota bezimienna, a dla osoby niewidomej pozbawiona punktu wejścia. */ .czytnik__tytul-ukryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- częste pytania ----------------------------------------------------- */ /* Treść MUSI być widoczna na stronie. Dane strukturalne opisujące coś, czego czytelnik nie zobaczy, są niezgodne z wytycznymi wyszukiwarek i potrafią zaszkodzić bardziej, niż pomagają. */ .pytania { margin-bottom: 2rem; } .pytanie { margin-bottom: .4rem; border-radius: .35rem; background: var(--karta); border: 1px solid var(--papier-cien); border-left: 4px solid var(--epoka); } .pytanie__tytul { cursor: pointer; padding: .8rem 1rem; list-style: none; font-family: var(--uzytkowy); font-size: 0.9375rem; font-weight: 600; color: var(--atrament); } .pytanie__tytul::-webkit-details-marker { display: none; } .pytanie__tytul::before { content: "+ "; color: var(--epoka); font-weight: 700; } .pytanie[open] .pytanie__tytul::before { content: "− "; } .pytanie__odpowiedz { margin: 0; padding: 0 1rem 1rem 2.1rem; font-size: 0.9375rem; line-height: 1.55; color: var(--olowek); } /* --- most do serwisu siostrzanego --------------------------------------- */ /* Odnośnik ma sens tylko tam, gdzie jest UŻYTECZNY: rodzic szukający lektur dla klasy V często ma w domu młodsze dziecko. Odnośnik wstawiony wszędzie byłby reklamą; wstawiony w jednym trafnym miejscu jest pomocą. */ .most { margin: 1.5rem 0 2rem; padding: 1.1rem 1.2rem; border-radius: .45rem; background: color-mix(in srgb, var(--e-renesans) 12%, var(--karta)); border: 1px solid color-mix(in srgb, var(--e-renesans) 30%, transparent); border-left: 4px solid var(--e-renesans); } .most__tytul { margin: 0 0 .25rem; font-family: var(--display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 24; font-size: 1.05rem; } .most__opis { margin: 0 0 .6rem; font-size: 0.9375rem; line-height: 1.5; color: var(--olowek); } .most__odnosnik { font-family: var(--uzytkowy); font-size: 0.8125rem; font-weight: 600; color: var(--e-renesans); text-decoration: none; } .most__odnosnik:hover { text-decoration: underline; } /* --- atuty zaufania ----------------------------------------------------- */ /* Dla rodzica „bez reklam i bez konta” waży więcej niż wszystkie funkcje razem wzięte, więc te kafelki mają własną grupę i własną barwę. Wmieszane między możliwości techniczne rozmyłyby się. */ .atuty__naglowek--drugi { margin-top: 1rem; } .atut--zaufanie { --epoka: var(--e-renesans); background: color-mix(in srgb, var(--e-renesans) 8%, var(--karta)); } /* Znak w kwadraciku BEZ ściskania. Pierwsza wersja zmniejszała napis „0 zł” do 11 px i ściągała litery ujemnym odstępem, żeby się zmieścił — audyt dostępności to wyłapał i słusznie. Zamiast psuć czytelność, powiększamy kwadracik. */ .atut--zaufanie .atut__znak { width: 2.4rem; font-size: 0.8125rem; font-weight: 600; } a.atut--zaufanie:hover { background: color-mix(in srgb, var(--e-renesans) 16%, var(--karta)); } @media (max-width: 71.9375rem) { /* W poziomym pasku nagłówki grup zabierałyby miejsce, a kolejność i tak jest widoczna — zielone kafelki odcinają się same. */ .atuty__naglowek--drugi { display: none; } } .korzysci { list-style: none; margin: 0 0 2rem; padding: 0; } .korzysci li { padding: .7rem 0 .7rem 1.4rem; position: relative; border-bottom: 1px solid var(--papier-cien); font-size: 0.9375rem; line-height: 1.6; } .korzysci li::before { content: "›"; position: absolute; left: 0; color: var(--epoka); font-weight: 700; } .korzysci li:last-child { border-bottom: 0; } .kontakt-blok { padding: 1.1rem 1.2rem; border-radius: .45rem; background: var(--piasek); font-size: 0.9375rem; line-height: 1.6; } .kontakt-blok p { margin: 0; } .atuty__naglowek--drugi a { color: var(--e-renesans); text-decoration: none; } .atuty__naglowek--drugi a:hover { text-decoration: underline; } /* ========================================================================= Strona dla rodziców — gwarancje Nazwa klasy z rozmysłem inna niż `.obietnice`: tamta jest siatką trzech krótkich haseł na stronie głównej. Nowa sekcja odziedziczyła po niej `display: grid` z kolumnami po 13 rem i długie akapity wpadły w wąskie słupki — kolizja nazw klas jest cicha i kosztowna. Tu treść jest DŁUGA, więc układ jest jednokolumnowy: pełna szerokość tekstu, bo to się czyta, a nie przegląda. ========================================================================= */ .gwarancje { margin-bottom: 3rem; } .gwarancja { margin-bottom: 1.5rem; padding-left: 1.2rem; border-left: 3px solid var(--e-renesans); } .gwarancja__tytul { margin: 0 0 .5rem; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40; font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--atrament); } .gwarancja p { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.65; max-width: 34rem; } .gwarancja p:last-child { margin-bottom: 0; } /* Uzasadnienie: sama gwarancja to deklaracja, powód to argument — i czyta się go inaczej, więc wygląda inaczej. */ .gwarancja__dlaczego { color: var(--olowek); font-size: 0.9375rem !important; background: var(--piasek); border-radius: .3rem; padding: .7rem .9rem; } /* Przycisk ustawień to narzędzie, nie pozycja menu — wciśnięty między odnośniki wyglądał jak ich część. Oddziela go kreska. */ .szczyt__dostepnosc { margin-left: .35rem; padding: .2rem .5rem .2rem .75rem; border: 0; border-left: 1px solid var(--papier-cien); border-radius: 0; background: none; min-height: 1.6rem; } .szczyt__dostepnosc:hover { background: none; color: var(--margines); } @media (max-width: 46rem) { /* Na wąskim ekranie nawigacja idzie od nowej linii i do lewej — wciśnięta obok marki dawała po jednym słowie w wierszu. */ .szczyt__nawigacja { margin-left: 0; width: 100%; } } /* --- zaproszenie do narzędzia ------------------------------------------- */ /* „Porównaj” zniknęło z menu, bo w oderwaniu od kontekstu nic nie mówiło. Tutaj, wśród motywów, jest zrozumiałe: czytelnik już wie, czym jest motyw, więc porównywanie utworów po motywach tłumaczy się samo. */ .zaproszenie { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1.1rem 1.2rem; border-radius: .45rem; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--epoka) 12%, var(--karta)); border: 1px solid color-mix(in srgb, var(--epoka) 28%, transparent); border-left: 4px solid var(--epoka); box-shadow: var(--cien-maly); } .zaproszenie:hover { background: color-mix(in srgb, var(--epoka) 20%, var(--karta)); box-shadow: var(--cien-duzy); } .zaproszenie__znak { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .4rem; background: var(--epoka); color: #fff; font-size: 1.1rem; } .zaproszenie__tresc { flex: 1; min-width: 0; } .zaproszenie__tytul { display: block; font-family: var(--display); font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 30; font-size: 1.15rem; margin-bottom: .15rem; color: var(--atrament); } .zaproszenie__opis { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--olowek); } .zaproszenie__strzalka { flex: none; color: var(--epoka); font-size: 1.2rem; } @media (max-width: 34rem) { .zaproszenie { gap: .7rem; padding: .9rem 1rem; } .zaproszenie__strzalka { display: none; } } /* --- opis autora -------------------------------------------------------- */ /* Strona autora miała 23 słowa: nagłówek i lista tytułów. Taka strona nie odpowiada na żadne pytanie i w wynikach wyszukiwania wypada gorzej niż jej brak. Biogramów nie mamy i nie zmyślamy — piszemy to, co wynika z naszych danych. */ .autor-opis { margin-bottom: 2rem; max-width: 36rem; } .autor-opis p { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.65; } .autor-opis p:last-child { margin-bottom: 0; color: var(--olowek); font-size: 0.9375rem; } /* --- stopka ------------------------------------------------------------- */ .stopka { max-width: 46rem; margin: 4rem auto 0; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--papier-cien); font-family: var(--uzytkowy); font-size: 0.8125rem; line-height: 1.6; color: var(--olowek); } .rodzina { margin-bottom: 1.5rem; } .rodzina__tytul { margin: 0 0 .5rem; font-weight: 600; color: var(--atrament); } .rodzina__tytul a { color: var(--epoka); } .rodzina__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .rodzina__lista a { color: var(--atrament); font-weight: 600; } .rodzina__lista span { color: var(--olowek); } .stopka__uwaga { margin: 0 0 1.2rem; } .stopka__odnosniki { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--papier-cien); } .stopka__odnosniki a { color: var(--atrament); text-decoration: none; white-space: nowrap; } .stopka__odnosniki a:hover { color: var(--epoka); text-decoration: underline; } .stopka__drobne { margin: 0; font-size: 0.75rem; } .stopka a { color: var(--epoka); } /* Podpis pod nazwą epoki — uczeń szukający „Młodej Polski” widzi „Modernizm” i musi wiedzieć, że to ten sam okres. */ .epoka-kafel__podpis { display: block; font-family: var(--uzytkowy); font-size: 0.75rem; color: var(--olowek); line-height: 1.3; margin-top: .1rem; } .autorzy-wstep, .porownaj-wstep { margin-bottom: 1.5rem; max-width: 36rem; } .autorzy-wstep p, .porownaj-wstep p { margin: 0 0 .7rem; font-size: 0.9375rem; line-height: 1.65; color: var(--olowek); } /* Tytuł utworu — duży, bo przy zbiorze to tytuł osobnej książki, nie numer rozdziału powieści. Granicę niesie `.otwarcie` nad nim; kreska pod tytułem zostaje z pierwotnego składu i należy do samego tytułu. */ .czytnik h2.naglowek-rozdzialu { font-size: 1.9rem; margin: 0 0 .4rem; } .czytnik h3.naglowek-rozdzialu { margin-top: 2.5rem; font-size: 1.35rem; } @media (max-width: 34rem) { .czytnik h2.naglowek-rozdzialu { font-size: 1.55rem; } .otwarcie { margin: 3.5rem 0 1.25rem; } }