/* ========================================================================== Grkokatolički kalendar Križevačke eparhije - glavni stil -------------------------------------------------------------------------- BOJE: zlatna je SAMO za ispune, obrube i crte. Zlatna #c9a227 na pergamentu daje ~2.4:1 i kao tekst PADA; tekst-zlatna je zato #7d5f10 (~5.2:1). Ovo nije kozmetika - to je čitljivost. PRIKAZ: SVIJETLO ILI TAMNO. Boje se zato dijele na PLOHE (podloga, karta, granatna ploha) i SLOVA NA NJIMA. Granatna je ploha tamna u OBAMA prikazima - zaglavlje ostaje granatno - pa slovo na njoj ne smije ići s podlogom stranice: `--na-granatu` ostaje svijetlo uvijek. Dok su te dvije uloge dijelile jednu varijablu, tamni je prikaz pisao tamno slovo na tamnoj plohi, i to bez ijedne pogreške u konzoli - boja se ne prijavljuje sama. ========================================================================== */ /* Merriweather je VARIJABILNI font: jedan fajl nosi težine 300-900. Zato su ovdje dva fajla, a ne tri (Google za 400 i 700 vraća isti bajt-po-bajt identičan woff2 - izmjereno). */ @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fontovi/merriweather.woff2") format("woff2"); } @font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fontovi/merriweather-kurziv.woff2") format("woff2"); } /* -------------------------------------------------------------------------- STAROSLAVENSKI DODATAK - i zašto ga Merriweather ne može pokriti. -------------------------------------------------------------------------- U staroslavenskom tekstu stoje spojni znakovi iznad slova: titlo (U+0483), kamora (U+0484), psili (U+0486) - i četiri NATPISNA SLOVA (U+2DED es, U+2DE2 ghe, U+2DE3 de, U+2DEA o). Ta se četiri pišu IZNAD osnovnoga slova i skraćuju riječ ("гдⷭа" je "gospoda"), pa su dio riječi, a ne ukras. Naš `merriweather.woff2` ih NEMA (podskup je latinični). Ćirilica se do sada crtala iz SUSTAVSKIH slova posjetitelja - dakle različito na svakom računalu, a na onima bez tih znakova kao PRAZNA KOCKICA. Zašto kockica zahvaća i OSNOVNO SLOVO, a ne samo znak iznad: preglednik bira JEDNO slovo za cijeli slog (grafem). Ne može uzeti "г" iz Merriweathera a "ⷭ" iz Nota - ako nijedno pojedino slovo ne pokriva CIJELI slog, cijeli slog pada na zadnje sredstvo, a to je kockica. Zato je skup "гⷭ" crtao DVJE kockice. Izmjereno u pregledniku nad 117 stvarnih slogova iz `podaci/ dan-stsl/`: 19 slogova, 2788 pojava, 360 od 365 dana. Zato ovdje stoji JEDAN slog koji pokriva i osnovno slovo i znak iznad. Podskup je rađen Googleovim `text=` nad TOČNO onim znakovima koji se u tekstu doista pojavljuju (97 znakova), pa cijela datoteka ima 9 KB - manje od jedne prosječne fotografije. Popis znakova u `unicode-range` nije ukras: on govori pregledniku da ovo slovo preskoči ondje gdje ne treba, pa se datoteka uopće ne dohvaća onome tko čita samo Šarića. LICENCA: Noto Serif, SIL Open Font License 1.1 - zapisano u `podaci/izvori.json`. -------------------------------------------------------------------------- */ @font-face { font-family: 'Noto stsl'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fontovi/noto-serif-stsl.woff2?v=82af407d") format("woff2"); unicode-range: U+20-21, U+25, U+28-29, U+2C, U+2E, U+3A-3B, U+5B, U+5D, U+300-301, U+306, U+30F, U+311, U+33E, U+403-406, U+40C-40D, U+410-414, U+416-422, U+424-429, U+42E, U+430-44C, U+44E, U+450, U+453-457, U+45C-45E, U+460-461, U+463, U+467, U+46F-473, U+475, U+477, U+47A-47B, U+47D-47F, U+483-484, U+486-487, U+4C1-4C2, U+4D0-4D1, U+4D7, U+1C82, U+2011, U+2DE2-2DE3, U+2DEA, U+2DED, U+A64B, U+A656-A657, U+FE00; } :root { --pergament: #f6efe0; /* podloga stranice */ --pergament-2: #efe5d0; /* podloga uvučena u karticu */ --karta: #fdf8ee; /* ploha kartice, panela, ćelije */ --zlato: #c9a227; --zlato-sv: #e8cd72; --zlato-t: #7d5f10; /* TEKST-zlatna, 5.2:1 */ --granat: #7a1420; /* PLOHA: zaglavlje, modul, pritisnuti gumb */ --granat-sv: #a8262f; /* ploha uz plohu - svjetlija od `--granat` */ --granat-t: #7a1420; /* TEKST-granat: naslovi i poveznice */ /* RUBRIKA - crvena uputa svećeniku u časoslovu. Ima SVOJU boju, a ne granatnu, jer granatna već znači "naslov" i "molitva koja se ne mijenja": da rubrika dobije istu, čitatelj ne bi razlikovao uputu od molitve - a to je razlika koju eparhijska stranica drži crvenom (`#EF4035`) i koju smo preuzeli. Ovdje je tamnija od nje da se na pergamentu čita. */ --rubrika: #a8231e; --na-granatu: #f6efe0; /* slovo NA granatnoj plohi - u obama prikazima */ --tinta: #2b2118; --tinta-2: #5b4c3c; --crta: #cbb894; --crta-2: #e0d3b6; /* Dvije plohe koje su prije bile tvrdo upisane u pravilima (`#fff` i `#fdf3f3`). U tamnome bi ostale svijetle, a to je upravo ono što se ne vidi kao kvar - ploha se samo ne preboji. */ --podloga-hover: #fff; --podloga-svetkovina: #fdf3f3; /* Boje RANGA, u istim vrijednostima koje nose i ćelije mreže. Svagdan je svjesno bez svoje boje: običan dan nosi zadnji obrub i zadnju boju broja, pa bi četvrta varijabla bila boja koju ništa ne koristi. (Isto je zato izbrisana `--zelena` #2d4a35: stajala je ovdje, a nijedno je pravilo nije rabilo - mrtva varijabla je kvar kao i mrtva brojka.) */ --r-svetkovina: #7a1420; --r-blagdan: #a8862a; --r-spomen: #4a6b52; /* `color-scheme` se NE postavlja na `light dark`. Time bi preglednik sam odabrao tamne `select`, `dialog` i trake za pomicanje kad je SUSTAV taman - i kad je korisnik odabrao "svijetlo". Ovdje se stavlja uz PALETU: svijetlo uz svijetlu, tamno u obama tamnim blokovima. */ color-scheme: light; --sirina: 1100px; --razmak: 1rem; /* Zaobljenje u TRI stupnja. Jedna vrijednost za sve činila je i velike plohe i sitne oznake jednako plosnatima; sada kartice nose `--radijus`, najveći panel dana `--radijus-veliki`, a sitno (ćelije, oznake, slova) `--radijus-mali`. */ --radijus-mali: 8px; --radijus: 14px; --radijus-veliki: 22px; /* Luk ikone: gornji kutovi eliptični, donji mali. Ikone se u crkvi slikaju u luku, pa i sličica dobiva luk - ali NE okrugao oblik, jer bi to bila profilna slika, a ne ikona. */ --luk: 50% 50% var(--radijus-mali) var(--radijus-mali) / 30% 30% var(--radijus-mali) var(--radijus-mali); } /* ========================================================================== TAMNI PRIKAZ - ZAMJENA VRIJEDNOSTI, NE NOVI SLOG. -------------------------------------------------------------------------- Mijenja se samo ono što je u `:root` PALETA. Nijedno pravilo ispod ovoga ne zna za prikaz: mreža, panel, modul, pravilo i tablice preboje se same, jer svi uzimaju boju iz varijabli. DVA BLOKA, ISTA PALETA. Prvi slijedi SUSTAV (`prefers-color-scheme`), drugi korisnikov izbor. Razdvojeni su jer se `@media` ne može pozvati iz imena razreda; da se vrijednosti ne raziđu, `provjeri.py` prepisuje oba popisa i traži da budu JEDNAKI - razlika u jednome retku obara gradnju. `@media screen` NIJE UKRAS. Ispis (`css/ispis.css`) je u mediju `print`, pa se tamna paleta na papir ne primijeni ni kad korisnik gleda tamno. Bez toga bi ispis tamnoga prikaza izašao s tamnim plohama - a župni printer je jednobojan i tinta je skupa. GRANATNA PLOHA OSTAJE TAMNA u obama prikazima (u tamnome samo dublja), pa `--na-granatu` u tamnim blokovima nosi ISTU svijetlu vrijednost. Prepisan je iako se vrijednost ne mijenja - da oba popisa imaju isti skup varijabli i da se to može provjeriti bez popisa iznimaka. ========================================================================== */ @media screen and (prefers-color-scheme: dark) { :root:not([data-tema="svijetlo"]) { --pergament: #191410; --pergament-2: #221b15; --karta: #251e17; --zlato: #c9a227; --zlato-sv: #e8cd72; --zlato-t: #e2c063; /* 9.6:1 na `--karta` */ --granat: #5e1019; --granat-sv: #8a1c26; --granat-t: #ef98a1; /* 9.1:1 na `--karta` */ --rubrika: #f2a49b; /* 7.0:1 na `--karta` */ --na-granatu: #f6efe0; /* NIJE se mijenja - ploha je tamna u obama */ --tinta: #ece2d2; --tinta-2: #b3a691; --crta: #544738; --crta-2: #3a3128; --podloga-hover: #322a21; --podloga-svetkovina: #2e1a1d; --r-svetkovina: #e8747f; --r-blagdan: #d9b352; --r-spomen: #7fb08c; color-scheme: dark; } } @media screen { :root[data-tema="tamno"] { --pergament: #191410; --pergament-2: #221b15; --karta: #251e17; --zlato: #c9a227; --zlato-sv: #e8cd72; --zlato-t: #e2c063; /* 9.6:1 na `--karta` */ --granat: #5e1019; --granat-sv: #8a1c26; --granat-t: #ef98a1; /* 9.1:1 na `--karta` */ --rubrika: #f2a49b; /* 7.0:1 na `--karta` */ --na-granatu: #f6efe0; /* NIJE se mijenja - ploha je tamna u obama */ --tinta: #ece2d2; --tinta-2: #b3a691; --crta: #544738; --crta-2: #3a3128; --podloga-hover: #322a21; --podloga-svetkovina: #2e1a1d; --r-svetkovina: #e8747f; --r-blagdan: #d9b352; --r-spomen: #7fb08c; color-scheme: dark; } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--pergament); color: var(--tinta); font: 400 18px/1.6 Merriweather, Georgia, "Times New Roman", serif; } /* Pleter: dvije niti koje se prepliću, kao troplet. Data-URI da ne ide nijedan dodatni zahtjev prema serveru. */ .pleter { height: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M0 11Q11-3 22 11T44 11'/%3E%3Cpath d='M0 11Q11 25 22 11T44 11'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; } .pleter--debeo { height: 34px; opacity: .9; } .zaglavlje { background: var(--granat); color: var(--na-granatu); padding: 1.1rem var(--razmak) 1.2rem; text-align: center; border-bottom: 3px solid var(--zlato); } .zaglavlje h1 { margin: 0; font-size: clamp(1.15rem, 3.6vw, 1.7rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .zaglavlje .podnaslov { margin: .35rem 0 0; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zlato-sv); } /* BIRAČ PRIKAZA STOJI U ZAGLAVLJU, A NE U PANELU DANA. Birač početka dana stoji u panelu jer mijenja TAJ PANEL; prikaz mijenja CIJELU stranicu, pa mu je mjesto u zaglavlju - uz naslov, ondje gdje se traži postavka stranice. RAZRED JE `prikaz__izbor`, A NE `prijevod__izbor`: `uskladiBirace()` traži birače prijevoda po dokumentu, pa bi birač prikaza s istim razredom bio prepisan bez ijedne pogreške - oba bi radila, samo bi jedan drugome mijenjao postavku. Boje idu iz palete, pa birač radi u obama prikazima sam. */ .zaglavlje__prikaz { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: .7rem; } .prikaz { display: inline-flex; align-items: center; gap: .45rem; } .prikaz__natpis { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-sv); } .prikaz__izbor { font: inherit; font-size: .82rem; color: var(--tinta); background: var(--karta); border: 1.5px solid var(--zlato-sv); border-radius: var(--radijus-mali); padding: .18rem .4rem; } .prikaz__izbor:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } main { max-width: var(--sirina); margin: 0 auto; padding: 0 var(--razmak) 4rem; } /* --- zajedničko ---------------------------------------------------------- */ section { margin-top: 2.2rem; } h2.naslov-odjeljka { margin: 0 0 .9rem; font-size: .84rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--zlato-t); border-bottom: 2px solid var(--crta); padding-bottom: .45rem; /* Zlatna nit ispod sive crte. `box-shadow`, a ne `::after`: naslov stoji i unutar `` sklopivih odjeljaka, gdje je `flex: 1` - pseudoelement bi se tamo ponašao kao još jedno dijete i potisnuo naslov. */ box-shadow: 0 4px 0 -2px var(--zlato-sv); } /* Sprite sa simbolima postoji u dokumentu, ali ne zauzima mjesto: simboli se koriste preko ``, a sam sprite nije sadržaj. */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Podnaslovi unutar odjeljka (legenda, pravila). Isti izgled kao `.pravila h3` - da se "Znakovi iz Tipika" i "PRAVILO ZA POSNE DANE" ne razlikuju po tome što su u kodu na različitim mjestima. */ h3.podnaslov-3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); margin: 1.2rem 0 .45rem; } /* Podnaslov UNUTAR podnaslova (legenda: "Znakovi iz Tipika" -> "Post" i "Rang dana"). Manji i tamniji od `podnaslov-3`, da se dvije razine ne čitaju kao isti naslov. */ h4.podnaslov-4 { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin: .9rem 0 .3rem; } /* --- SKLOPIVA CJELINA (`
`) ------------------------- Isti obrazac nose `.citanje` (modal) i `.izvori__popis`; ovaj je opći i nosi odjeljke koji su sami po sebi dugački - kazalo svetaca, legendu i izvore - te pojedine cjeline unutar njih. Naslov unutar `summary`-ja mora ostati BEZ svoga gornjeg odmaka: `summary` ga već nosi, a dva odmaka jedan pod drugim čine da se naslovi doimaju nepovezanima. Zato su `h2.naslov-odjeljka` i `h3.podnaslov-3` ovdje poništeni - i to selektorom koji je jači od `.pravila h3`, jer se isti naslovi pojavljuju i unutar `.pravila`. */ .sklop { margin: 0; } /* `summary` je `flex`, a trokutić se crta sam (`::before`). Zašto ne ugrađeni trokutić: `summary` je po zadanom `list-item`, pa se njegov znak crta IZNAD naslova kad je naslov blok (a ovdje je `h2`/`h3`, i mora ostati blok - nosi punu crtu ispod sebe). S `list-item` trokutić završi u vlastitome retku i naslov se doima odvojenim od njega. Zato se ugrađeni znak gasi, a trokutić crta sam, u istome retku. Stanje i dalje nosi `
`, a ne znak - čitaču ekrana se ne podmeće ništa novo. */ .sklop > summary.sklop__naslov { display: flex; align-items: baseline; gap: .45rem; cursor: pointer; padding: .3rem 0; list-style: none; } .sklop > summary.sklop__naslov::-webkit-details-marker { display: none; } .sklop > summary.sklop__naslov::before { content: "\25B8"; /* ▸ */ flex: none; color: var(--zlato-t); font-size: .95em; line-height: 1; } .sklop[open] > summary.sklop__naslov::before { content: "\25BE"; } /* ▾ */ .sklop > summary.sklop__naslov:focus-visible { outline: 3px solid var(--zlato); outline-offset: 2px; } /* Naslov je `flex: 1` da crta ispod njega ide cijelom širinom - bez toga bi se `h2` skupio na širinu teksta i crta bi stala na pola reda. */ .sklop > summary.sklop__naslov > h2.naslov-odjeljka, .sklop > summary.sklop__naslov > h3.podnaslov-3, .sklop > summary.sklop__naslov > h4.podnaslov-3 { flex: 1; margin: 0; } /* DRUGA RAZINA ŽIVOTOPISA stoji UNUTAR svečeva retka, a ne kao odjeljak stranice. Zato joj je naslov manji od naslova odjeljka i ne nosi crtu - inače bi se unutar jednoga sveca čitala kao novi odjeljak. Veličina je ista kao natpis izvora (`.izvori__popis > summary`), jer je i uloga ista: redak koji se otvara, a ne naslov. */ .modal__sveti .sklop > summary.sklop__naslov > h4.podnaslov-3, .modal__zivotopis .sklop > summary.sklop__naslov > h4.podnaslov-3 { font-size: .82rem; font-weight: 400; color: var(--granat-t); } .modal__sveti .sklop > summary.sklop__naslov:hover > h4.podnaslov-3, .modal__zivotopis .sklop > summary.sklop__naslov:hover > h4.podnaslov-3 { color: var(--granat); } .modal__sveti .sklop > summary.sklop__naslov, .modal__zivotopis .sklop > summary.sklop__naslov { padding: .15rem 0; } .modal__sveti .sklop__tijelo > p.zivotopis, .modal__zivotopis .sklop__tijelo > p { margin-top: .3rem; } .sklop__tijelo { padding-top: .2rem; } /* Cjeline iste razine stoje jedna pod drugom, pa im treba malo zraka i kad su SVE sklopljene - inače se popis naslova čita kao jedna krpa. */ .sklop + .sklop { margin-top: .15rem; } /* Skokovi na odjeljke - prvi su elementi u toku tabulatora, pa tipkovnički korisnik ne mora proći kroz cijelu mrežu da bi došao do kazala. */ .skokovi { display: flex; flex-wrap: wrap; gap: .3rem .9rem; max-width: var(--sirina); margin: .7rem auto 0; padding: 0 var(--razmak); } .skokovi .skok { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--granat-t); text-decoration: none; border-bottom: 1.5px solid var(--crta); padding-bottom: .1rem; } .skokovi .skok:hover { border-bottom-color: var(--zlato); } .skokovi .skok:focus-visible { outline: 3px solid var(--zlato); outline-offset: 2px; } .podnozje { max-width: var(--sirina); margin: 0 auto; padding: 1.2rem var(--razmak) 2rem; font-size: .8rem; color: var(--tinta-2); text-align: center; } .podnozje a { color: var(--granat-t); } .gumb { font: inherit; font-size: .88rem; color: var(--granat-t); background: var(--karta); border: 1.5px solid var(--crta); border-radius: var(--radijus); padding: .42rem .8rem; cursor: pointer; } .gumb:hover { border-color: var(--zlato); background: var(--podloga-hover); } .gumb:focus-visible { outline: 3px solid var(--zlato); outline-offset: 2px; } .gumb[aria-pressed="true"] { background: var(--granat); color: var(--na-granatu); border-color: var(--granat); } .vizualno-sakriveno { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 1. DANAŠNJI DAN - sidro stranice, uvećan, na vrhu ========================================================================== */ .danas { margin-top: 1.6rem; background: var(--karta); border: 2px solid var(--zlato); border-radius: var(--radijus-veliki); /* Dvostruki okvir: vanjski zlatni rub (border) i tanka zlatna crta unutar njega, kakva stoji na okvirima ikona. */ box-shadow: 0 2px 0 var(--crta-2), 0 10px 26px rgba(80, 60, 20, .08), inset 0 0 0 1px rgba(201, 162, 39, .45); overflow: hidden; } .danas__vrpca { /* Traka je prva u panelu i panel ima `overflow: hidden`, pa je gornje zaobljenje već odrezano - ovo je samo osiguranje da rub ne "progleda" pri ispisu, gdje `overflow` ne vrijedi jednako. */ border-radius: 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; background: var(--granat); color: var(--na-granatu); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .9rem; } /* Birač početka dana stoji u ovoj traci jer se jedino današnji panel i mijenja tom postavkom. Slovo-razmak i velika slova se PONIŠTAVAJU - naslov trake je ukras, a ovo je kontrola koju treba čitati. */ .danas__pocetak { display: inline-flex; align-items: center; gap: .45rem; letter-spacing: normal; text-transform: none; font-size: .72rem; color: var(--zlato-sv); } .danas__pocetak-izbor { font: inherit; font-size: .74rem; letter-spacing: normal; color: var(--tinta); background: var(--pergament); border: 1px solid var(--zlato-sv); border-radius: var(--radijus-mali); padding: .12rem .3rem; cursor: pointer; } .danas__pocetak-izbor:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } .danas__tijelo { display: flex; gap: 1.4rem; padding: 1.2rem; align-items: flex-start; } /* LIJEVI STUPAC: ikona dana, a pod njom lik sata časova (v. `.sat-znak`). IKONA I LIK MORAJU BITI ISTE ŠIRINE, i to je ono što je vlasnik zatražio 16. 10. 2026. (»stavi ju ispod ikone iste širine kao ikona«). Lik je ne dobiva sam: on je `width: 100%` unutar stupca, pa je prati. Ikona je ne nasljeđuje nego je PONAVLJA u px - jer bi `width: 100%` na njoj ostavio `t_rez_ikona` bez ijedne izmjerene brojke. Ta dva broja (stupac i ikona) u svakome prikazu uspoređuje tvrdnja `t_sirina_sata` u `provjeri.py`. Prije je širinu nosila sama ikona; lik je tada morao imati svoju, i to je bila druga mjera iste stvari. `flex: 0 0 auto` je nužan: bez njega bi se stupac rastegnuo preko cijeloga panela i potisnuo tekst dana. */ .danas__stupac { flex: 0 0 auto; width: 375px; } /* Ikona je USPRAVNA (izvorne ikone su ~3:4), a ne kvadrat: kvadrat je rezao donji dio figure, pa se ikonama gubio lik. Kutija je 5:6 u svakome prikazu, pa se omjer reza ne mijenja kad se stupac širi. Povecan je i zato da lijevi stupac ne ostane prazan do pola panela - tekst dana zna biti dug (objašnjenje, citat, spomen, "sto slijedi"). */ .danas__ikona { flex: 0 0 auto; width: 375px; height: 450px; border: 2px solid var(--zlato); border-radius: var(--luk); background: var(--pergament-2); object-fit: cover; /* REZ IDE S VRHA, A NE IZ SREDINE. Ikona je poredana odozgo: glava s oreolom stoji u gornjem dijelu, a stopala i podnožje na dnu. `cover` bez ovoga reže SIMETRIČNO, pa se glava odsijeca - izmjereno nad 428 ikona: centrirano rezanje s vrha uzima medijan 5,6 % visine, a kod najužih ikona (npr. `obadija_prorok.jpg`, 186 x 600) CIJELIH 31 %, toliko da u okviru od 250 x 300 ostane samo trup i svitak, bez lica. Uz `top` vrh stoji na vrhu okvira i ni jedan se izvorni piksel odozgo ne gubi; odbacuje se dno, koje se i smije odbaciti. Isto pravilo nosi i svaka druga kutija s `object-fit: cover` - v. tvrdnju `t_rez_ikona` u `provjeri.py`, koja to mjeri nad SVIM ikonama obaju veličina, a ne nad ovim pravilom. */ object-position: top; cursor: zoom-in; } .danas__tekst { flex: 1 1 auto; min-width: 0; } /* Tekst panela se NE razvlači preko cijele širine: redak od ~130 znakova se čita znatno teže od retka od ~70. Mjera je u `ch`, pa vrijedi i kad se veličina slova mijenja. Tablice i popisi ostaju izvan ovoga. */ .danas__tekst > p, .objasnjenje p, .citat p { max-width: 70ch; } .danas__datum { margin: 0; font-size: 1.12rem; letter-spacing: .04em; color: var(--tinta-2); } .danas__naslov { margin: .2rem 0 .5rem; font-size: clamp(1.3rem, 3.4vw, 1.95rem); font-weight: 700; line-height: 1.25; color: var(--granat-t); } .danas__sveti { margin: .2rem 0 .5rem; font-size: 1.08rem; } /* RED IKONA DANA - po jedna slika za svaki spomen toga dana. -------------------------------------------------------------------------- Slike su MALE (44 px) i to je namjerno: velika ikona dana ostaje junak panela, a red samo kazuje KOLIKO je spomena i KOJI su. Da su slike u redu velike, dan s četiri sveca potisnuo bi naslov i retke s podacima. Red se LOMI u više redaka - dan s četiri sveca ne smije razvući panel. */ .ikone-red { list-style: none; margin: .35rem 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem .9rem; } .ikone-red li { display: flex; align-items: center; gap: .45rem; font-size: .95rem; } .ikone-red__slika { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; /* Vidi `t_rez_ikona`: rez s vrha. Ovdje se to NAJVIŠE vidi - kutija je kvadratna, pa od uspravne ikone ostaje pojas. Sa `top` je taj pojas GLAVA s oreolom; centrirano je bio trup, a kod najužih ikona prazan svitak - izmjereno 415 od 428 ikona gubi s vrha. */ object-position: top; border: 1.5px solid var(--zlato); border-radius: var(--radijus-mali); background: var(--pergament-2); } /* Znak spomena je SVG (svijeća), pa mu obrub stoji na kutiji, a ne na slici. */ .ikone-red__slika--znak { padding: .3rem; color: var(--granat-t); } .ikone-red__ime { color: var(--tinta-2); } .redak { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; margin: .3rem 0; font-size: 1.0rem; } .redak__kljuc { flex: 0 0 auto; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zlato-t); min-width: 5.6rem; } .redak__vrijednost { flex: 1 1 auto; min-width: 0; } /* Redak kojemu je vrijednost CRTEZ, a ne tekst - oznaka posta (SVG). `.redak` je `align-items: baseline`, a to s crtezom ne radi: `.znak` je `display: inline-flex`, pa mu je osnovica osnovica PRVOG predmeta u redu - a to je SVG, kojemu je osnovica DONJI rub. Uz oznaku od 20 px razlika se nije vidjela; kad je u panelu povecana na 46 px, natpis "POST" pao je na njezino dno, dvadesetak px nize od svojega retka. `vertical-align` tu NE pomaze (na flex predmet se ne primjenjuje), pa se takav redak poravnava po SREDINI - i natpis i tekst tada stoje uz sredinu sličice. */ .redak--grafika { align-items: center; } .znak { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; } .znak svg { flex: 0 0 auto; } /* NATPIS ZNAKA SMIJE PRIJEĆI U DRUGI REDAK ONDJE GDJE NOSI REČENICU. -------------------------------------------------------------------------- `white-space: nowrap` u `.znak` je namjeran: drži simbol i njegovu riječ na okupu. Ali ondje gdje natpis nije riječ nego REČENICA - oznaka posta nosi `opis` iz dnevnoga zapisa ("Posni dan - posti se, ali nije obavezno pod teški grijeh.") - `nowrap` daje elementu najmanju širinu od ~450 px, a to je više od cijeloga retka. Redak tada ne prelije, nego RAŠIRI svoj stupac: u popupu je `scrollWidth` dijaloga narastao na 534 px uz `clientWidth` 316 (mjereno na 320 i 360 px), a u današnjem panelu znak je dosegao 481 px u oknu od 390 px. Oboje se vidi kao vodoravni pomak stranice. Ista je zamka već jednom uhićena u ćeliji mreže (`.celija__dno .znak`, niže, i ondje je opisana s brojkama) - ovo je DRUGO mjesto, pa je i popis drugi. Ćelija ostaje pri svojemu pravilu: ona uz `wrap` mijenja i veličinu slova i poravnanje, a ovdje se mijenja samo lom. `flex-wrap` je DRUGI sloj iste zamke: bez njega natpis ostaje uz simbol u jednome redu i prelije se preko ruba retka. S njim se spusti POD simbol i ondje se lomi unutar širine koju redak stvarno ima. */ .redak__vrijednost .znak, .modal__obiljezja dd .znak { white-space: normal; flex-wrap: wrap; } /* GUMB OKO ZNAKA - znak koji vodi na svoje objašnjenje u legendi. (`oznake.js`, `objasni`; znak bez ključa ostaje gola oznaka s `title`.) -------------------------------------------------------------------------- Gumb je ovdje zbog SKLOPLJENE LEGENDE: `
` ima sklopljen visinu 0, pa bi `` skrolao na pogrešno mjesto i to bez ijedne greške. `K.pristupacnost.skoci` prije skrola otvara sklopove - ali zove se iz JavaScripta, ne iz adrese. ZAŠTO SVA UA PRAVILA MORAJU STAJATI OVDJE: gumb je `inline-block` s `font: 400 13.333px` i `text-align: center` iz preglednikova sloga. Da se ne nadjačaju, gumb oko znaka od 56 px NIJE isti okvir kao prije - drugi font daje drugu osnovicu, pa bi se znak u odnosu na natpis "POST" pomaknuo iako je `` ostao isti. Zato `font: inherit` i `display: inline-flex` (isto što i `.znak`), a kutija se briše do nule. `line-height: inherit` je nužan uz `font: inherit` - skraćeno svojstvo `font` vraća `line-height` na `normal`, a `.redak` ga ne zadaje. */ .znak-gumb { display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0; background: none; font: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radijus-mali); } .znak-gumb:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } /* SLOVO KOJE ZAMJENjuje CRTEZ u oznaci posta - `T.`, `m.`, `s.`. (`oznake.js`, `znakPosta`; tipik ta tri posta tiska slovom, pa se i ovdje tiskaju slovom - izmišljen crtez bio bi krivotvorina.) Veličinu slovo nosi kao SVOJSTVO `--velicina-slova`, a ne upisanim `font-size`: tako je mjerilo na jednome mjestu, a IZUZETAK - ćelija mreže - može ga nadjačati običnim pravilom. Da je veličina upisana u slog, ćelija bi je mogla skinuti samo s `!important`. `line-height: 1` drži kutiju slova jednakom kutiji crteza, da redak ne naraste zbog slova: podrazumijevani 1.15 dao bi uz crtez od 56 px redak od 64 px, a redak nosi crtez, ne slovo. */ .znak-slovo { font-size: var(--velicina-slova, 1rem); line-height: 1; } /* UZORAK BOJE RIZA - ploha obojana zgođašnjom bojom uz riječ koja je nosi. Nije znak iz spritea: crno-bijeli znak za boju bio bi znak koji ne kazuje ono što nosi. Obris je nužan jer se svijetle i bijele rize inače ne bi razlikovale od podloge retka. */ .uzorak-boje { display: inline-block; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .3); border-radius: var(--radijus-mali); } .danas__citanja { margin-top: .55rem; } .citanje-kratice { display: flex; flex-wrap: wrap; gap: .4rem; } .citanje-gumb { font: inherit; font-size: .92rem; background: var(--pergament-2); border: 1px solid var(--crta); border-radius: var(--radijus-mali); padding: .28rem .6rem; cursor: pointer; color: var(--tinta); text-align: left; } .citanje-gumb:hover { border-color: var(--zlato); background: var(--podloga-hover); } .citanje-gumb:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } /* Objašnjenje blagdana - NIJE citat i zato nije kurziv. Prije je nosilo isti razred kao `blockquote` ispod sebe, pa se dvije posve različite stvari ("što ovaj blagdan znači" i "što o njemu kaže sv. Ivan Zlatousti") čitalo kao jedan te isti odlomak - bez naslova se nije znalo što je što. */ .objasnjenje { margin: .9rem 0 0; padding: .75rem 1rem; border-left: 3px solid var(--crta); background: var(--karta); font-size: 1.0rem; } .objasnjenje cite { display: block; margin-top: .4rem; font-style: normal; font-size: .86rem; color: var(--tinta-2); } /* Naslov odjeljka u današnjem panelu ("O blagdanu"). Isti kroj kao `.redak__kljuc`, ali je naslov, a ne ključ retka - pa je `

`. */ .danas__odjeljak { margin: 1.1rem 0 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zlato-t); } /* Red gumba koji vode na dijelove modala. Imena gumba su IMENA ODJELJAKA - prije je stajao jedan gumb "Otvori puni tekst čitanja", a modal iza njega nosi i životopise, pojmovnik i rubrike, pa se nije moglo znati gdje se što nalazi. Gumb koji ne kaže kamo vodi gori je od gumba koji nema. */ .danas__gumbi { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } /* Gumbi današnjeg panela veći su od ostalih gumba na stranici. To nije ukras: oni su jedini put do životopisa sveca i do punog teksta čitanja, a stoje na dnu najvećeg okvira - pa se u veličini ostalih gumba gube među redovima teksta iznad sebe. */ .danas__gumbi .gumb { font-size: 1rem; padding: .55rem 1.1rem; } /* ČETIRI MALA LINKOVA ZA KALENDAR NA MOBITELU, na samome dnu panela. ------------------------------------------------------------------------ Nisu gumbi: ne mijenjaju ništa na stranici, nego predaju datoteku pregledniku. Zato su manji i tiši od `.danas__gumbi` iznad sebe - inače bi se na dnu okvira čitalo sedam jednako važnih radnji, a ove četiri su dodatak, ne put u sadržaj. Crta iznad odvaja ih od gumba i od teksta. Razdjelnik je RAZMAK, a ne znak "·": znak je znao ostati sam na kraju retka kad se redak prelomi (`gap` se prelama čisto). */ .danas__veze { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.1rem; margin: 1.2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--crta); font-size: .84rem; } .danas__veze a { color: var(--granat-t); text-decoration-color: var(--crta); text-underline-offset: .18em; } .danas__veze a:hover { color: var(--granat); text-decoration-color: var(--zlato); } .danas__veze a:focus-visible { outline: 3px solid var(--zlato); outline-offset: 3px; } .citat { margin: .9rem 0 0; padding: .75rem 1rem; border-left: 3px solid var(--zlato); background: var(--pergament-2); font-style: italic; font-size: 1.0rem; } .citat cite { display: block; margin-top: .4rem; font-style: normal; font-size: .86rem; color: var(--tinta-2); } /* ========================================================================== 2. MJESEC - odmah ispod današnjeg dana ========================================================================== */ .mjesec__glava { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; } .mjesec__ime { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; color: var(--granat-t); flex: 1 1 auto; } .mjesec__ime .godina { color: var(--tinta-2); font-weight: 400; } .mjesec__ime .privremeno { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--na-granatu); background: var(--granat-sv); border-radius: var(--radijus-mali); padding: .1rem .4rem; vertical-align: middle; } .mjesec__strelica { font-size: 1.1rem; line-height: 1; padding: .42rem .7rem; } .mreza { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; } .mreza th { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); font-weight: 700; padding: .25rem 0; } .mreza td { padding: 0; vertical-align: top; } .celija { display: block; width: 100%; height: 100%; min-height: 112px; background: var(--karta); border: 1.5px solid var(--crta-2); border-radius: var(--radijus); padding: .3rem .34rem .34rem; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; position: relative; overflow: hidden; } .celija:hover { border-color: var(--zlato); background: var(--podloga-hover); } .celija:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } .celija--prazna { background: transparent; border-color: transparent; cursor: default; } /* Brojka dana je ono po čemu se kućica traži okom, a bila je manja od naslova uz nju (.76rem) tek neznatno veća. Sada je nosi jasno. */ .celija__dan { font-size: 1.18rem; font-weight: 700; color: var(--tinta-2); line-height: 1; } .celija--svetkovina { border-color: var(--r-svetkovina); border-width: 2px; background: var(--podloga-svetkovina); } .celija--svetkovina .celija__dan { color: var(--r-svetkovina); } .celija--blagdan { border-color: var(--r-blagdan); } .celija--blagdan .celija__dan { color: var(--zlato-t); } .celija--spomen .celija__dan { color: var(--r-spomen); } .celija__ikona { display: block; width: 100%; height: 52px; object-fit: contain; margin: .18rem 0 .1rem; } .celija__naslov { font-size: .76rem; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.7em; } .celija__dno { display: flex; align-items: center; gap: .3rem; margin-top: .22rem; flex-wrap: wrap; } .celija__kratica { font-size: .68rem; letter-spacing: .04em; color: var(--tinta-2); background: var(--pergament-2); border-radius: var(--radijus-mali); padding: 0 .24rem; } /* U ćeliji oznaka posta SMIJE prijeći u drugi redak. Inače bi je `white-space: nowrap` (iz `.znak`) izgurao iz ćelije, a ćelija ima `overflow: hidden` - pa bi "vino i ulje" tiho nestalo bez traga. `flex-wrap` je tu iz istog razloga, i to je DRUGI sloj iste zamke: bez njega natpis ostaje uz simbol u jednom redu i prelije se preko ruba ćelije. Na 390 px je ćelija 49 px, a oznaka je tada bila 70 px - pa se od natpisa vidjelo slovo-dva, a red je narastao na 188 px. S `wrap` natpis se spusti POD simbol i tamo se lomi unutar širine koju ćelija stvarno ima. */ .celija__dno .znak { white-space: normal; align-items: flex-start; flex-wrap: wrap; } /* Natpis oznake u ćeliji je MANJI od naslova dana. Bez ovoga naslijedi osnovnu veličinu ćelije (~15 px) i postane KRUPNIJI od naslova uz koji stoji (`.celija__naslov` je .76rem) - pa oko prvo pročita "vino i ulje", a ne ime dana. Uz to je na 820 px natpis tada bio 120 px širok i lomio se u drugi redak ispod simbola, dizavši redak na 200 px. Ista veličina koju nosi kratica čitanja (.68rem) drži oba pomoćna natpisa ćelije u istom, trećem planu. */ .celija__dno .znak { font-size: .68rem; line-height: 1.2; } /* SLOVO OZNAKE U ĆELIJI MREŽE - MANJE OD SVOJEGA MJERILA. -------------------------------------------------------------------------- Mjerilo 1:1 (crtez i slovo iste visine) vrijedi ondje gdje crtez i slovo stoje JEDAN UZ DRUGI - u panelu, modalu i legendi. U ćeliji mreže crtez nije uz slovo, pa nema što izjednačavati, a širina je tijesna. Izmjereno `probe`-om nad stvarnom mrežom (veljača 2026., slovo `m.`): viewport 320 px -> dno ćelije 30 px, slovo na 30 px = 40 px -> PRELJEVANJE viewport 360 px -> dno ćelije 36 px, slovo na 30 px = 40 px -> PRELJEVANJE viewport 390 px -> dno ćelije 40 px, slovo na 30 px = 40 px -> tijesno Ćelija ima `overflow: hidden`, pa se preliveno slovo ODREŽE bez ijedne greške u konzoli - isti onaj tihi gubitak kojim je ovdje već bio odrezan natpis "vino i ulje". Zato slovo u ćeliji ostaje na 1.15rem (18,4 px -> `m.` ~25 px): čitljivo je (prije je bilo ~11 px, uz crtez od 30 px), a uže od dna ćelije i na 320 px. I dalje je veće od naslova dana (.76rem) - to je namjerno: znak je znak, a ne riječ, i u ćeliji je on jedini nositelj posta. */ .celija__dno .znak-slovo { font-size: 1.15rem; line-height: 1.1; } .celija--danas { outline: 3px solid var(--granat); outline-offset: -1px; } .celija--odabran { border-color: var(--granat); box-shadow: inset 0 0 0 1.5px var(--granat); } /* ========================================================================== 3. TRAKA LITURGIJSKE GODINE ========================================================================== */ .vrpca { margin: 0; padding: 0; list-style: none; } /* Omot DRŽI OZNaku "vi ste ovdje". Ona mora viriti 4 px iznad i ispod trake, a traka ima `overflow: hidden` (da segmenti ne preliju zaobljene rubove). Da je oznaka unutra, `overflow` bi je odrezao na 30 px i odsjekao trokutić; da traka nema `overflow`, segmenti bi kvadrirali zaobljene rubove. Zato je oznaka SESTRA trake, u ovom omotu - a omot je taj koji je `position: relative`. Bez toga se oznaka oslanja na prvog POZICIONIRANOG pretka (u praksi `body`), pa se `top:-4px; bottom:-4px` razvuku na visinu cijele stranice i kroz nju prođe okomita crta. To se i dogodilo - izmjereno 1321 px visine na traci od 30 px. */ .vrpca__omot { position: relative; } .vrpca__traka { display: flex; height: 30px; border: 1.5px solid var(--crta); border-radius: var(--radijus); overflow: hidden; background: var(--karta); } .vrpca__segment { position: relative; height: 100%; border-right: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; border-top: 0; border-bottom: 0; border-left: 0; font: inherit; /* Znak razdoblja stoji po sredini segmenta. Segmenti su tamni (boje razdoblja su sve tamne), pa je znak boje papira - uz to nosi i tanak tamni obrub, da se vidi i na svijetlozlatnoj uskrsnoj plohi, gdje bi sam papir bio slab. */ display: flex; align-items: center; justify-content: center; } .vrpca__ikona { color: var(--na-granatu); filter: drop-shadow(0 0 1px rgba(0,0,0,.55)); pointer-events: none; } /* Segment uži od `config.vrpca_ikona_min` - znak se skriva. Razred postavlja `ResizeObserver` u `js/vrpca.js`, jer se širina ovdje dijeli po BROJU DANA, pa se u CSS-u ne može provjeriti. */ .vrpca__segment--uzak .vrpca__ikona { display: none; } /* Dio liturgijske godine za koji podataka nema. Nije gumb - nema na što skočiti - pa je i pokazivač običan, a ploha šrafirana: praznina se mora vidjeti kao praznina, a ne kao razdoblje bez imena. */ .vrpca__segment--nema { cursor: default; background: repeating-linear-gradient(45deg, var(--crta-2) 0 4px, var(--karta) 4px 9px); } .vrpca__segment:last-child { border-right: 0; } .vrpca__segment:hover { filter: brightness(1.12); } .vrpca__segment:focus-visible { outline: 3px solid var(--zlato); outline-offset: 2px; z-index: 2; } .vrpca__sada { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--granat); border-radius: 2px; z-index: 3; } .vrpca__sada::after { content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--granat); } /* Popis je MREŽA, a ne stupci. `column-width` puni stupac po stupac, pa se redoslijed čitao 1, 4, 7, 10 / 2, 5, 8, 11 / 3, 6, 9 - a popis razdoblja ima smisla samo slijeva nadesno. */ .vrpca__popis { margin: .7rem 0 0; padding-left: 1.4rem; font-size: .84rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 1.6rem; } .vrpca__popis li { margin: .12rem 0; } .vrpca__popis-nema { color: var(--tinta-2); font-style: italic; } .vrpca__popis button { font: inherit; font-size: .84rem; background: none; border: 0; padding: 0; color: var(--granat-t); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--crta); } .vrpca__popis button:hover { text-decoration-color: var(--zlato); } .posta-vrpca { margin-top: .5rem; font-size: .82rem; color: var(--tinta-2); } /* ========================================================================== 4. KAZALO SVETACA + PRETRAGA ========================================================================== */ .pretraga { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; } .pretraga input[type="search"] { font: inherit; font-size: .95rem; flex: 1 1 16rem; min-width: 0; padding: .5rem .7rem; background: var(--karta); border: 1.5px solid var(--crta); border-radius: var(--radijus); color: var(--tinta); } .pretraga input:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } .pretraga__broj { font-size: .84rem; color: var(--tinta-2); } .slova { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .8rem; } .slova button { font: inherit; font-size: .82rem; min-width: 1.9rem; padding: .22rem .35rem; background: var(--karta); border: 1.5px solid var(--crta-2); border-radius: var(--radijus-mali); cursor: pointer; color: var(--tinta); } .slova button:hover:not(:disabled) { border-color: var(--zlato); } .slova button:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } .slova button[aria-pressed="true"] { background: var(--granat); color: var(--na-granatu); border-color: var(--granat); } .slova button:disabled { opacity: .35; cursor: default; } .kazalo__popis { list-style: none; margin: 0; padding: 0; } .kazalo__popis > li { border-bottom: 1px solid var(--crta-2); padding: .45rem .2rem; display: flex; flex-wrap: wrap; gap: .15rem .6rem; align-items: baseline; } /* Isti razlog kao `.legenda__stavka:focus`: unos u kazalu nema naslova, pa `K.sveci.nadi` fokusira SAM `
  • ` - a bez ovoga se ne vidi na koji je svetac skok sletio. `:focus`, a ne `:focus-visible` (vidi legenda pravilo gore). */ .kazalo__popis > li:focus { outline: 3px solid var(--zlato); outline-offset: -3px; } /* ISTI RAZLOG, SAMO ZA NASLOVE: cilj skoka je naslov odjeljka. -------------------------------------------------------------------------- `K.pristupacnost.skoci` predaje fokus NASLOVU odjeljka (`querySelector("h1, h2, h3")`), a `K.vrh` povratkom na vrh naslovu stranice. Bez ovoga naslov zadrži PREGLEDNIKOV obrub, a on nije iz palete - izmjereno u pregledniku nad `H2#naslov-casoslov` nakon skoka: `outline: auto 1px rgb(0, 95, 204)`. ZAŠTO OBRUB, A NE GAŠENJE. Nad naslovom DIJALOGA obrub se gasi (`.modal__glava h2:focus`): dijalog samim svojim otvaranjem kaže gdje je čitatelj stigao, pa pravokutnik ne znači ništa. Skok to ne kaže - stranica se samo pomakne, pa čitatelj mora pogoditi na koji je odjeljak sletio, a obrub je upravo ono što mu to kaže. `:focus`, a NE `:focus-visible`: naslov nije u tijeku tabulatora (`tabindex="-1"` mu dodaje `fokusiraj`), pa do fokusa dolazi SAMO skokom - obrub se zato ne može pojaviti bez razloga. Isto kao u legendi i kazalu. Obrub je S UNUTRASNJE strane, kao i u legendi: naslov je širok koliko i odjeljak, pa bi vanjski obrub na uskom zaslonu bio odrezan. POKRIVENI SU TAGOVI, A NE RAZREDI. `skoci` traži `h1, h2, h3` bez obzira na razred, a naslov stranice je `

    ` izvan `main`. Razredni bi selektor tiho promašio svaki naslov s drugim razredom - izmjereno: isti preglednikov obrub nosi i `h3.podnaslov-3` u zaglavlju časa, a ne samo `h2.naslov-odjeljka`. Zato ovdje stoje tagovi, i zato tvrdnja u `provjeri.py` traži da se popis tagova ovdje poklapa s onim što `js/` doista fokusira. */ h1:focus, h2:focus, h3:focus { outline: 3px solid var(--zlato); outline-offset: -3px; } .kazalo__ime { flex: 1 1 14rem; min-width: 0; } /* Vrsta sveca ("mučenik", "časni otac") ide uz ime, a objašnjenje vrste je u pojmovniku u modalu - tako se ne ponavlja uz svako ime. */ .vrsta { font-size: .76rem; letter-spacing: .04em; color: var(--zlato-t); flex: 0 0 auto; /* Razmak je OBAVEZAN, a ne uljudnost: ime i vrsta su dva susjedna elementa, pa bez njega ispadne "mučenikbiskup". Pravilo o ponavljanju uklanja većinu takvih slučajeva, ali ovo je brana koja vrijedi i kad se nešto promaši. */ margin-left: .5em; } .kazalo__dani { flex: 0 1 auto; font-size: .8rem; color: var(--tinta-2); } .kazalo__dan { font: inherit; font-size: .8rem; background: none; border: 0; padding: 0; color: var(--granat-t); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: var(--crta); } .kazalo__dan:hover { text-decoration-color: var(--zlato); } .kazalo__dan:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } /* ========================================================================== 5. LEGENDA I PRAVILA ========================================================================== */ .legenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem 1.2rem; } .legenda__uvod { font-size: .88rem; color: var(--tinta-2); margin: .3rem 0 .5rem; max-width: 68ch; } .legenda__stavka { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; } /* CILJ SKOKA MORA BITI VIDLJIV. -------------------------------------------------------------------------- Klik na znak u panelu skrola na SVOJU stavku u legendi i predaje joj fokus. Bez ovoga fokus ne ostavlja nikakva traga: stranica se pomakne, a čitatelj mora sam pogoditi na koji je redak sletio - pa skok izgleda kao da je promasio. Zato cilj dobiva obrub. `:focus`, a NE `:focus-visible`: te stavke nisu u tijeku tabulatora (`tabindex="-1"` im dodaje `K.pristupacnost.skoci`, a `-1` znaci "fokusiraj programski, ne tabom"), pa do fokusa dolazi SAMO skokom - a `:focus-visible` na programski fokus obicno ne reagira. Obrub se zato ne moze pojaviti bez razloga. Isto pravilo nosi i omot bloka boja (`SIDRO_BOJA_RIZA`): on je `
    ` koji nema naslova, pa `skoci` fokusira njega samoga. Obrub je S UNUTRASNJE strane: stavka je siroka koliko i legenda, pa bi vanjski obrub na uskom zaslonu bio odrezan. */ .legenda__stavka:focus, .legenda__blok:focus { outline: 3px solid var(--zlato); outline-offset: -3px; border-radius: var(--radijus-mali); } /* Dva znaka uz isti natpis: crtani (vidi se u kalendaru) i isječak iz Tipika. Drže se skupa, pa se `gap` stavke ne troši između njih. */ .legenda__par { display: inline-flex; gap: .25rem; flex: 0 0 auto; } .legenda__slika { flex: 0 0 auto; width: 38px; height: 38px; object-fit: contain; background: var(--karta); border: 1px solid var(--crta-2); border-radius: var(--radijus-mali); } /* Crtani simbol (za oznake koje u legendi Tipika nemaju svoj isječak) - ista veličina kao isječak, da legenda ostane poravnata. Unutarnji `padding` je tu da crtež ne dira obrub; manji je od `gap`-a stavke jer je kutija ionako najmanja u legendi. */ .legenda__simbol { flex: 0 0 auto; width: 38px; height: 38px; padding: 3px; background: var(--karta); border: 1px solid var(--crta-2); border-radius: var(--radijus-mali); color: var(--granat-t); } .legenda__opis { flex: 1 1 auto; min-width: 0; } .legenda__natpis { display: block; } .legenda__slovo { font-size: 1.15rem; margin-right: .3rem; color: var(--granat-t); } /* Ključ za boje mreže. Bez njega je mjesec šifra: ćelija nosi boju po rangu, a nigdje ne piše što koja boja znači. Uzorak pokazuje OBRUB ćelije, a ime ranga je obojeno onako kako je obojen BROJ DANA - to su dva različita kanala i oba se ovdje vide. Spomen mijenja samo broj dana, pa mu obrub ostaje zadani. */ .legenda__boje { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: .55rem 0 .2rem; font-size: .88rem; } .legenda__boje-natpis { color: var(--tinta-2); } .rang-boja { display: inline-flex; align-items: center; gap: .35rem; } .rang-boja__uzorak { flex: 0 0 auto; width: 15px; height: 15px; border: 1.5px solid var(--crta-2); border-radius: var(--radijus-mali); background: var(--karta); } .rang-boja__uzorak--svetkovina { border: 2.5px solid var(--r-svetkovina); background: var(--podloga-svetkovina); } .rang-boja__uzorak--blagdan { border-color: var(--r-blagdan); } .rang-boja__ime { color: var(--tinta-2); } .rang-boja__ime--svetkovina { color: var(--r-svetkovina); } .rang-boja__ime--blagdan { color: var(--zlato-t); } .rang-boja__ime--spomen { color: var(--r-spomen); } /* Oznaka USRED rečenice pravila (`{{oznaka:…}}`). SVG se po zadanom poravnava na osnovnu crtu, pa bi znak sjeo preduboko - otuda pomak. */ .pravila svg { vertical-align: -0.28em; } /* Oznaka koja se u podacima pojavila, a u sučelju nije poznata. Ne izmišlja se simbol - vidi se da nešto nedostaje. */ .oznaka-nepoznata { color: var(--tinta-2); font-style: italic; } .pravila { margin-top: 1rem; font-size: .9rem; } .pravila h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); margin: 1rem 0 .35rem; } .pravila p { margin: .35rem 0; } .pravila ul { margin: .35rem 0; padding-left: 1.2rem; } .pravila .izvor { display: block; font-size: .78rem; color: var(--tinta-2); } .tablica-skracenica { border-collapse: collapse; font-size: .95rem; width: 100%; } .tablica-skracenica th, .tablica-skracenica td { border: 1px solid var(--crta-2); padding: .25rem .5rem; text-align: left; vertical-align: top; } .tablica-skracenica th { background: var(--pergament-2); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--zlato-t); } /* ========================================================================== 6. IZVORI ========================================================================== */ .izvori { list-style: none; margin: 0; padding: 0; font-size: .9rem; } .izvori > li { border-bottom: 1px solid var(--crta-2); padding: .7rem 0; } .izvori .izvori__naslov { font-weight: 700; } .izvori .izvori__opis { color: var(--tinta-2); font-size: .86rem; margin: .25rem 0; } .izvori a { color: var(--granat-t); text-decoration-color: var(--crta); } .izvori a:hover { text-decoration-color: var(--zlato); } /* Parovi "izdavač / uredio / godina / provjereno". Grid, a ne `dl` s lebdećim elementima: poravnato je i kad se vrijednost prelije u drugi redak. */ .izvori__podaci { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .35rem 0; font-size: .82rem; } .izvori__podaci dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); } .izvori__podaci dd { margin: 0; } .izvori__ikone { margin-top: 1.2rem; font-size: .86rem; } .izvori__ikone h3 { margin: 0 0 .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); } .izvori__ikone h4 { margin: .8rem 0 .3rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zlato-t); } .izvori__rupe { margin: .2rem 0; padding-left: 1.2rem; font-size: .82rem; } .izvori__popis { margin-top: .7rem; } .izvori__popis > summary { cursor: pointer; font-size: .82rem; color: var(--granat-t); } .izvori__popis > summary:focus-visible { outline: 3px solid var(--zlato); outline-offset: 2px; } .izvori__popis .tablica-skracenica { margin-top: .5rem; } /* Što NIJE objavljeno - i zašto. Odjeljak je namjerno istaknut: prešućivanje bi bilo gore od praznine, jer čitatelj ne bi znao da nešto nedostaje. */ .neprovjereno { margin-top: 1.4rem; padding: .8rem .95rem; background: var(--pergament-2); border-left: 3px solid var(--zlato); font-size: .86rem; } .neprovjereno h3 { margin: 0 0 .4rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); } .neprovjereno p { margin: .3rem 0; } .neprovjereno ul { margin: .3rem 0; padding-left: 1.1rem; } .neprovjereno li { margin: .5rem 0; } .neprovjereno strong { color: var(--zlato-t); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; } /* Oznaka se nastavlja na prethodno polje ("... četvrtak).ZAŠTO:"), pa joj treba razmak. Margin, a ne razmaknica, da ostane i kad se redak prelomi. */ .neprovjereno span + strong { margin-left: .5em; } /* ========================================================================== MODAL - dan u punom detalju ========================================================================== */ dialog.modal { width: min(56rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 2px solid var(--zlato); border-radius: var(--radijus); background: var(--karta); color: var(--tinta); } dialog.modal::backdrop { background: rgba(43, 33, 24, .55); } .modal__glava { position: sticky; top: 0; z-index: 2; display: flex; gap: .8rem; align-items: flex-start; background: var(--granat); color: var(--na-granatu); padding: .8rem 1rem; } /* Tekst zaglavlja MORA se rastegnuti, inače gumb za zatvaranje ne stoji na desnom rubu. Bez `flex: 1 1 auto` na ovom omotu on se skupi na širinu naslova, pa `×` sjedne odmah uz naslov - izmjereno na sredini zaglavlja, a ne na njegovu desnom rubu. `min-width: 0` je uz to nužan da dug naslov smije prijeći u drugi redak umjesto da gurne gumb izvan okvira. */ .modal__glava-tekst { flex: 1 1 auto; min-width: 0; } .modal__glava h2 { margin: 0; font-size: 1.22rem; line-height: 1.3; } /* Naslov modala dobiva `tabindex="-1"` i fokus se na njega PREBACUJE programatski (modal.js) da bi ga čitač ekrana pročitao prvi. Preglednik na takav fokus crta svoj plavi pravokutnik, a naslov nije ni gumb ni polje - pa taj pravokutnik ne znači ništa i ružan je. Zato se ovdje gasi. Ostali elementi s fokusom imaju `:focus-visible` sa zlatnim obrubom i njega se NE dira: ovdje je riječ samo o naslovu koji se ne može doseći tipkovnicom (tabindex="-1" nije u redu taba). */ .modal__glava h2:focus { outline: none; } .modal__glava .modal__datum { font-size: .88rem; color: var(--zlato-sv); } /* Gumb za zatvaranje stoji u desnom kutu zaglavlja. Zaglavlje je `sticky`, pa gumb ostaje na istom mjestu i kad se duga strana modala skrola - traženje izlaza po dnu dokumenta je ono što korisnik ovdje stvarno osjeti. */ .modal__zatvori { flex: 0 0 auto; font: inherit; font-size: 1.4rem; line-height: 1; background: none; border: 1.5px solid var(--zlato-sv); border-radius: var(--radijus-mali); color: var(--na-granatu); padding: .1rem .5rem .25rem; cursor: pointer; } .modal__zatvori:hover { background: rgba(255,255,255,.14); } .modal__tijelo { padding: 1.1rem; } /* Rang u zaglavlju modala. Boja je DODATNA - riječ je ta koja nosi rang. */ .oznaka-rang { /* inline-flex (a ne inline-block) jer u chipu od sada stoji i zvijezda ranga - pa se sličica i riječ moraju poravnati po sredini. */ display: inline-flex; align-items: center; gap: .28rem; margin-left: .5rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; border-radius: var(--radijus-mali); padding: .05rem .35rem; color: var(--zlato-sv); } /* Ove tri boje ostaju TVRDO UPISANE, i to je jedina iznimka u paleti: oznaka ranga stoji na GRANATNOJ PLOHI zaglavlja modala, a ta je ploha tamna u obama prikazima. Varijable ranga (`--r-svetkovina` i druge) mijenjaju se s prikazom jer su predviđene za SLOVO NA KARTICI - u tamnome su svjetlije, pa bi na granatnoj plohi bile tamne. Zato ove tri nisu izvedene iz njih. */ .oznaka-rang--svetkovina { color: #ffd9dc; } .oznaka-rang--blagdan { color: #ffe6ad; } .oznaka-rang--spomen { color: #d7e8da; } .modal__ikona { margin: 0 0 .9rem; } .modal__ikona img { width: 150px; height: 180px; object-fit: cover; object-position: top; /* v. `t_rez_ikona` - rez ide s vrha, ne iz sredine */ border: 1.5px solid var(--zlato); border-radius: var(--luk); background: var(--pergament-2); } .modal__ikona figcaption { font-size: .76rem; color: var(--tinta-2); margin-top: .25rem; line-height: 1.3; } .modal__ikona figcaption > span { display: block; } /* --- sveci dana ---------------------------------------------------------- */ .modal__sveti { list-style: none; margin: 0 0 .9rem; padding: 0; } .modal__sveti > li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid var(--crta-2); } .modal__ikona-sveca { flex: 0 0 auto; width: 96px; height: 116px; object-fit: cover; object-position: top; /* v. `t_rez_ikona` - rez ide s vrha, ne iz sredine */ border: 1px solid var(--crta); border-radius: var(--luk); background: var(--pergament-2); } .modal__sveca-tekst { flex: 1 1 auto; min-width: 0; } .modal__sveca-tekst .zivotopis { margin: .35rem 0 0; font-size: .98rem; } /* --- obilježja dana (dl) ------------------------------------------------- */ /* Stupac vrijednosti je `minmax(0, 1fr)`, a NE `1fr`. `1fr` nosi `auto` kao svoju najmanju širinu, a to je `min-content`: vrijednost koja se ne može lomiti (oznaka posta s rečenicom, dok je `nowrap`) podigne time cijeli stupac - i mreža naraste ŠIRE od dijaloga. Dijalog tada dobije svoj vodoravni pomak (`scrollWidth` 534 px uz `clientWidth` 316 na 360 px okna, mjereno), pa se redak posta čita samo do pola. Lom natpisa je u pravilu uz `.znak`; ovo je drugi sloj iste zamke - stupac se mora SMIJETI skupiti. Najuži slučaj (ispod 360 px) rješava sljedeći odlomak. */ .modal__obiljezja { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: .9rem 0; font-size: .98rem; } .modal__obiljezja dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zlato-t); align-self: baseline; } .modal__obiljezja dd { margin: 0; } /* ISPOD 360 px POPIS OBILJEŽJA PRELAZI U JEDAN STUPAC. -------------------------------------------------------------------------- Dva stupca traže: natpis (najdulji je "TJEDAN PO DUHOVIMA", 172 px) + razmak (14 px) + vrijednost (najdulja RIJEČ, "Dopuštenje", 80 px) = 266 px. Popis je širok `okno - 71 px` (dijalog `100vw - 2rem`, obrubi, `1.1rem` podstava tijela), pa dva stupca stanu od 338 px okna. Na 320 px popis ima 241 px: vrijednost dobije 55 px, riječ "Dopuštenje" (80 px) ispadne iz dijaloga i popup dobije vodoravni pomak (`scrollWidth` 284 uz `clientWidth` 276, mjereno). 359 je zaokružen s rezervom od 21 px, a 360 px je prvi koji dva stupca drži bez pomaka (281 ≥ 266) - i ondje je izmjeren. Jedan stupac je isti potez koji današnji panel već radi sam: `.redak` lomi natpis i vrijednost u dva retka. Natpis stoji u svojem retku, vrijednost u sljedećem, preko cijele širine - pa se i rečenica oznake posta složi cijela, a ne do pola. Razmak između natpisa i njegove vrijednosti je manji od onoga između dvaju parova (`dd` nosi `margin-bottom`), inače se par ne čita kao par. */ @media (max-width: 359px) { .modal__obiljezja { grid-template-columns: minmax(0, 1fr); } .modal__obiljezja dd { margin-bottom: .45rem; } } /* --- čitanja ------------------------------------------------------------- */ .modal__citanja { margin: 1rem 0; border-top: 1px solid var(--crta-2); padding-top: .7rem; } .modal__citanja > h3, .modal__rubrike > h3, .modal__zivotopis > h3, .modal__pojmovnik > h3, .modal .spomen > h3 { margin: 0 0 .5rem; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--zlato-t); } .modal__kome { margin: .9rem 0 .3rem; font-size: .9rem; letter-spacing: .06em; color: var(--granat-t); } /* `
    ` je namjeran: rasklapanje, tipkovnica i čitač ekrana rade sami, bez ijednog slušača. */ .citanje { margin: .5rem 0; border: 1px solid var(--crta-2); border-radius: var(--radijus-mali); background: var(--karta); } .citanje__naslov { cursor: pointer; padding: .45rem .65rem; font-size: .96rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; } .citanje__naslov:focus-visible { outline: 3px solid var(--zlato); outline-offset: -3px; } .citanje__prikaz { color: var(--tinta-2); font-size: .88rem; } .citanje__tekst { padding: .2rem .7rem .6rem; font-size: 1.02rem; } .citanje__izvor { margin: 0; padding: .3rem .7rem .6rem; font-size: .8rem; color: var(--tinta-2); } /* Stihovi se NE grupiraju po poglavlju: jedno evanđelje zna biti spoj pet odlomaka, pa se isto poglavlje pojavljuje dvaput. Oznaka poglavlja se ispisuje kad se broj PROMIJENI - uključujući i povratak na isto poglavlje. */ .stihovi { margin: 0 0 .45rem; font-size: 1.02rem; } .stihovi__poglavlje { font-weight: 700; color: var(--granat-t); font-size: .88rem; margin-right: .35rem; } .stihovi__broj { color: var(--zlato-t); font-size: .76rem; vertical-align: .3em; margin-left: .15rem; } /* --- izbor prijevoda čitanja --------------------------------------------- Birač stoji u odjeljku Čitanja modala i u retku Čitanja današnjega panela. Izgleda kao običan `` - tipkovnica, čitač ekrana i mobitel ga znaju sami, bez ijednog slušača. */ .prijevod { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .5rem; } .danas__citanja .prijevod { margin: .35rem 0 .1rem; } .prijevod__natpis { font-size: .82rem; letter-spacing: .04em; color: var(--tinta-2); } .prijevod__izbor { font: inherit; font-size: .84rem; padding: .18rem .3rem; color: var(--tinta); background: var(--karta); border: 1px solid var(--crta-2); border-radius: var(--radijus-mali); } .prijevod__izbor:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } /* Staroslavenski. ĆIRILICA TRAŽI VEĆI PROCJED REDAKA: iznad slova stoje spojni znakovi (titlo, kamora, natpisna slova - U+0300.., U+2DE0..), a uz tijesan `line-height` oni se odrežu ili uđu u red iznad. Latinica toga nema, ali ima ′ (meki znak) i ě/ę/ǫ, pa joj treba malo više od osnovnoga. `"Noto stsl"` JE PRVI U SLOGU - i to je cijela poanta. Ćirilica se prije crtala iz SUSTAVSKIH slova, pa je izgled ovisio o tuđem računalu, a natpisna slova (U+2DED i društvo) ispadala su kao kockice - i to tako da je kockica pojela i osnovno slovo, jer preglednik bira jedno slovo za cijeli slog. Vidi `@font-face` za "Noto stsl" na vrhu ove datoteke. Zašto prvi, a ne iza Merriweathera: Merriweather ovih znakova nema, pa bi ih svakako prepustio dalje - ali bi SVESTO OSTALO MJEŠANO, dio slova iz jednoga a dio iz drugoga slova, ovisno o tome što koje pokriva. Kad je podskup prvi, cijeli staroslavenski tekst dolazi iz jednoga slova i izgleda jednako na svakom računalu. Merriweather ostaje u slogu kao rezerva za ono čega u podskupu nema (znamenke, hrvatska imena u bilješkama). SLOG IDE SAMO NA ĆIRILICU (`--cir`), NE NA CIJELI `--stsl`. Podskup uz ćirilicu nosi i osnovnu interpunkciju (zarez, točku, dvotočku), pa bi u LATINICI zarezi dolazili iz Nota a slova iz Merriweathera - dvije vrste slova u istoj rečenici, a da to nitko nije tražio. Latinica ovih znakova nema, pa joj podskup ne služi ničemu i ne treba ga ni dohvaćati. RAZRED PISMA DOLAZI IZ `K.alat.razredPisma()`, a NE iz `K.alat.pismo()`. Prvo daje ime za stil ("cir"/"lat"), drugo ključ podatka ("c"/"l"). Ovdje je prije stajalo `--cir`, a ispis je slao `--c` - pa pravilo NIJE pogodilo ništa i ćirilica se crtala manjim slovima nego što ovdje piše. */ .citanje__tekst--stsl { line-height: 1.75; } .citanje__tekst--cir { font-family: "Noto stsl", Merriweather, Georgia, "Times New Roman", serif; } .citanje__tekst--cir .stihovi { font-size: 1.08rem; } /* --- rubrike, spomen, životopis, pojmovnik, citat ------------------------ */ .modal__rubrike { margin: 1rem 0; } .rubrika { margin: .3rem 0; font-size: .94rem; color: var(--tinta-2); } .rubrika--kurziv { font-style: italic; } .rubrika--tvrdo { font-weight: 700; color: var(--tinta); } .spomen { font-size: .96rem; margin: 1rem 0; } .spomen ul { margin: .2rem 0; padding-left: 1.2rem; } .modal__zivotopis { margin: 1rem 0; } .modal__zivotopis p { margin: .3rem 0; } .modal__pojmovnik { margin: 1rem 0; } .pojam { font-size: .94rem; margin: .3rem 0; } /* Priznanje autorstva ikone ili izvora - uvijek manje i tiše od sadržaja. */ .izvor { display: block; font-size: .82rem; color: var(--tinta-2); } a.izvor { text-decoration-color: var(--crta); } a.izvor:hover { color: var(--granat-t); text-decoration-color: var(--zlato); } .modal__strana { margin: 1rem 0 0; font-size: .8rem; color: var(--tinta-2); } .napomena { font-size: .86rem; color: var(--tinta-2); font-style: italic; margin-top: .3rem; } /* ========================================================================== MOLITVE ČASOSLOVA (`js/casoslov.js`) -------------------------------------------------------------------------- Ikone časova nose NOVI prefiks u spriteu (`casoslov-…`, a ne `oznaka-…`). Prefiks se dodaje na jednome mjestu (`K.casoslov.ikona` / `K.oznake.simbol`) jer `` na nepostojeći simbol NE prijavljuje ništa - ikona se samo ne nacrta. Vidi `index.html` uz same simbole. RAZREDI PISMA SE DIJELE S ČITANJIMA (`citanje__tekst--stsl`, `citanje__tekst--cir`), a ne pišu iznova. Slog "Noto stsl" mora biti PRVI ondje gdje je ćirilica - inače preglednik bira jedno slovo za cijeli slog, a natpisna slova (U+2DED i društvo) ispadnu kao kockice. Da se slog prepisao ovdje, ista bi se greška mogla vratiti na jednome od dvaju mjesta, i to tiho. ========================================================================== */ /* --- redak "Molitve" u današnjem panelu ---------------------------------- */ /* PLOČICA S IMENOM, A NE SAMO IKONA. Deset je gumba dosad nosilo ikonu, i ništa više: `title` na dodirnome ekranu NE POSTOJI, pa se na telefonu nije moglo znati ni koji je čas koji gumb, ni da se na njega može stisnuti. Ime stoji ISPOD ikone, pa pločica ostaje uska i pločice se same slože u redove - na 390 px ih stane tri do četiri u red, bez ijednoga posebnoga pravila za usko okno (i zato ga ovdje nema: pravilo koje se nigdje ne primijeni tiho stari). */ .casoslov__molitve { display: inline-flex; flex-wrap: wrap; gap: .35rem; } .casoslov__gumb { display: inline-flex; flex-direction: column; align-items: center; gap: .12rem; margin: 0; padding: .25rem .4rem .3rem; min-width: 4.1rem; max-width: 6.6rem; border: 1px solid var(--crta-2); border-radius: var(--radijus-mali); background: var(--karta); color: var(--granat-t); cursor: pointer; } /* Ime se NE piše velikim slovima: to je naziv časa, a ne natpis retka - a "Jutarnje molitve" se u velikim slovima ne složi u usku pločicu. */ .casoslov__gumb-natpis { font-size: .74rem; line-height: 1.15; letter-spacing: .01em; text-align: center; text-transform: none; } .casoslov__gumb:hover { border-color: var(--zlato); color: var(--granat-t); } .casoslov__gumb:focus-visible { outline: 3px solid var(--zlato); outline-offset: 1px; } /* ZNAK POKLONA UNUTAR MOLITVE - NA MJESTU GDJE SE POKLON DOISTA ČINI. -------------------------------------------------------------------------- Do 2. 10. 2026. znak je stajao u RETKU MOLITAVA u panelu dana, u pločici s poveznicom na čas - dakle uz POVEZNICU, a ne u molitvi. Korisnik je to izričito odbio ("ne ikone poklona pored linkova na molitve i časoslove nego unutar molitava i časoslova tamo gdje se trebaju raditi"), pa su i pločica i znak iz toga retka uklonjeni, a znak sada stoji u tijelu časa, umetnut na granicu bloka koju je gradnja pročitala s eparhijske rubrike (`blokoviTijelo` u `js/casoslov.js`, `anchori` u `podaci/pokloni.json`). PLOČICA JE UZ TO UKLONJENA IZ RETKA, i to se ne gubi. Postojala je SAMO zato da gumb za skok i znak ne budu `