/* * Dancing Buddha — vizualna identiteta. * * Barve so vzete iz logotipa: pesek #C8B4A3, bela linija, topla senca. Nevtralne * barve so namerno peščene in ne sive — siva bi ob logotipu izgledala umazano. * * Pisavi: EB Garamond za naslove (topla renesančna serifa, ki se ujema s potezo * logotipa) in Source Sans 3 za vse ostalo. Naslovna pisava je namenoma samo * naslovom: pri 12 pikslih, v gumbu ali v uri urnika, je neberljiva. * * Naslovna pisava NI Cormorant Garamond, čeprav je videti podobno. Cormorant na * Google Fonts nima znakov č, š in ž — brskalnik jih sestavi iz osnovne črke in * ločenega strešice, ki obvisi visoko nad njo. Na slovenski strani, kjer je tak * znak v skoraj vsakem naslovu, je to izločilna napaka. EB Garamond jih ima. * * Vsak ples ima svojo barvo. Ta ne živi tukaj, ampak v app/vsebina/plesi/*.md — * predloga jo postavi kot --barva na vrstico, vse pod njo pa bere od tam. Zato * je tu eno pravilo namesto enega na ples, nov ples pa ne zahteva ne nove * vrstice CSS ne nove barve v njem. */ /* * Pisavi stojita na našem strežniku in ne več na Google Fonts. * * Prej je bila veriga zahtevkov tri stopnje globoka: brskalnik je dobil HTML, * iz njega naložil CSS s fonts.googleapis.com (nova domena, nov DNS, nov TLS), * ta pa je šele povedal, da pisava leži na fonts.gstatic.com (spet nova * domena). Do tam je stran že bila izrisana — v Georgii in Segoe UI — in ko je * pisava končno prispela, je besedilo poskočilo v drugo pisavo. Prav ta preskok * je bil viden ob vsakem odprtju. * * Zdaj pisava pride z iste povezave kot HTML, prednaložena je v (glej * pogledi/postavitev.php), zato je praviloma tu že ob prvem izrisu. * * font-display: optional je druga polovica rešitve. Pove: če pisave ni v prvih * ~100 ms, jo za ta ogled pusti pri miru in izriši v nadomestni pisavi — brskalnik * je torej ne sme zamenjati sredi strani. Preskok tako ni več mogoč; cena je, * da zelo počasen prvi obisk vidi Georgio, naslednji pa že pravo pisavo iz * predpomnilnika. Če bi kdaj raje imeli pisavo takoj in preskok sprejeli, je * to ena beseda: optional -> swap. * * Datoteki sta variabilni: ena datoteka nosi vse debeline med 400 in 700, zato * sta obe skupaj (~87 kB) manjši od tega, kar je Google pošiljal za isti nabor. * Izrezani sta na osnovno latinico in Latin Extended-A — torej č, š, ž, đ in vsa * srednje- ter zahodnoevropska abeceda. Zgrajeni sta iz izvirnikov na * github.com/google/fonts z orodjem fonttools (subset), licenca OFL leži zraven. * * Ime datoteke je hkrati njena različica: predpomnjeni sta eno leto (.htaccess), * zato nova izdaja pisave potrebuje novo ime, ne le nove vsebine. */ @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/assets/pisave/eb-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0308, U+030C, U+0327-0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: optional; src: url("/assets/pisave/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0308, U+030C, U+0327-0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Ležeča različica nosi le .prazno in podobne drobne opombe, zato ni prednaložena — do nje brskalnik pride sam, kadar jo stran res potrebuje. */ @font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: optional; src: url("/assets/pisave/source-sans-3-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0100-017F, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0308, U+030C, U+0327-0329, U+2000-206F, U+20AC, U+2113, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* iz logotipa */ --zemlja-900: #2A211C; --zemlja: #453529; --baker: #A9744C; --baker-600: #8C5C34; --pesek-100: #EBE0D5; --pesek-050: #F7F2EC; --papir: #FCFAF7; --card: #FFFFFF; --ink: #382C24; --ink-2: #5C4B3F; --muted: #8A7767; --line: #E4DAD0; --line-2: #D0C2B4; --napaka: #A33A28; --napaka-bg: #FBEEEA; --napaka-ln: #EFCEC4; /* Privzeta barva plesa, kadar je vnos nima. Predloge jo prepišejo v style="". */ --barva: var(--baker); --sirina: 76rem; --senca: 0 1px 2px rgba(42,33,28,.05), 0 8px 22px -14px rgba(42,33,28,.26); --senca-2: 0 2px 4px rgba(42,33,28,.06), 0 18px 40px -22px rgba(42,33,28,.32); /* Dovoli prehode na ključne besede (auto), kar potrebuje animirano odpiranje kartic učiteljev. */ interpolate-size: allow-keywords; --f-naslov: "EB Garamond", Georgia, "Times New Roman", serif; --f-tekst: "Source Sans 3", "Segoe UI", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--papir); color: var(--ink); font-family: var(--f-tekst); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } .ovoj { max-width: var(--sirina); margin-inline: auto; padding-inline: 20px; } .ovoj--ozek { max-width: 48rem; } h1, h2, h3, h4 { font-family: var(--f-naslov); line-height: 1.1; text-wrap: balance; margin: 0 0 .4em; color: var(--zemlja); font-weight: 600; } /* Garamond je drobna pisava: pri isti številki izgleda manjša od navadne groteske, zato so vse velikosti za stopnjo večje, kot bi jih sicer izbral. */ h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -.01em; } h2 { font-size: clamp(28px, 3.6vw, 38px); } h3 { font-size: 21px; font-weight: 600; } p { margin: 0 0 1em; } a { color: var(--baker-600); text-underline-offset: 2px; } a:hover { color: var(--zemlja); } strong { font-weight: 600; color: var(--zemlja); } img { max-width: 100%; height: auto; } .preskoci { position: absolute; left: -9999px; background: var(--zemlja); color: #fff; padding: 10px 16px; border-radius: 0 0 4px 0; font-weight: 600; z-index: 60; } .preskoci:focus { left: 0; top: 0; } :focus-visible { outline: 2px solid var(--baker-600); outline-offset: 3px; border-radius: 3px; } .nadnaslov { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--baker-600); margin-bottom: 14px; } .nadnaslov a { color: inherit; } .vodilo { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; } .drobno { color: var(--muted); font-size: 13.5px; } .prazno { color: var(--muted); font-style: italic; } /* ---------- glava ---------- */ .glava { background: var(--papir); border-bottom: 1px solid var(--line); position: sticky; top: 0; /* Must outrank the drawer's backdrop (z-index 54 in the root context). Sticky + z-index makes this header a stacking context, so the drawer and its contents cannot escape this number however high they go. */ z-index: 60; } .glava__vrstica { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; } .znak { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .znak__mark { flex: none; color: var(--baker); } .znak__besede { display: grid; gap: 1px; } .znak__ime { font-family: var(--f-naslov); font-weight: 600; font-size: 27px; color: var(--zemlja); line-height: 1; } .znak__opis { font-size: 11.5px; color: var(--muted); letter-spacing: .03em; } /* Na telefonu je v glavi prostor le za ime; podnaslov bi se lomil v dve vrsti. */ @media (max-width: 38rem) { .znak__opis { display: none; } } .navigacija ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; } .navigacija a { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--zemlja); white-space: nowrap; } .navigacija a:hover { color: var(--baker-600); text-decoration: underline; text-decoration-thickness: 2px; } .navigacija a[aria-current="page"] { color: var(--baker-600); text-decoration: underline; text-decoration-thickness: 2px; } .druzbena { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; } .druzbena a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .druzbena__znak { flex: none; } /* Znak je ploskev in ne besedilo, zato podčrtaj ob prehodu ne pomaga; barva je edino, kar se lahko premakne. */ .navigacija__druzbena .druzbena a:hover .druzbena__znak { color: var(--baker-600); } .navigacija__druzbena .druzbena a { color: var(--zemlja); padding: 2px; } /* Ločnica pred znakoma: v vrstici z besedami sta druga vrsta stvari — kažeta ven s strani, ne po njej. */ .navigacija__druzbena { padding-left: 18px; border-left: 1px solid var(--line); } /* V nogi je poleg znaka beseda, zato je to navaden seznam povezav pod sabo. */ .druzbena--noga { flex-direction: column; align-items: flex-start; gap: 7px; } .druzbena--noga a { color: #fff; } .druzbena--noga a:hover { text-decoration: underline; text-decoration-thickness: 2px; } .meni-gumb { display: none; align-items: center; gap: 9px; background: none; border: 1px solid var(--line-2); border-radius: 5px; padding: 8px 13px; cursor: pointer; font-family: var(--f-tekst); font-size: 14px; font-weight: 700; color: var(--zemlja); } .meni-gumb__crte { display: grid; gap: 4px; width: 17px; } .meni-gumb__crte i { display: block; height: 2px; background: var(--zemlja); border-radius: 2px; transition: transform .18s ease, opacity .18s ease; } /* ---------- mobilni meni ---------- */ @media (max-width: 58rem) { .meni-gumb { display: flex; } /* Brez JS ostane meni viden — nikoli nedosegljiv. */ .js .navigacija { position: fixed; inset: 0 0 0 auto; width: min(20rem, 86vw); background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--senca-2); padding: 84px 24px 32px; transform: translateX(100%); transition: transform .22s ease, visibility .22s; overflow-y: auto; z-index: 55; visibility: hidden; } .js .navigacija ul { flex-direction: column; align-items: stretch; gap: 0; } .js .navigacija li { border-bottom: 1px solid var(--line); } .js .navigacija a { display: block; padding: 14px 2px; font-size: 17px; } /* Splošno pravilo zgoraj bi znaka raztegnilo čez predal in ju postavilo enega pod drugega; tu ostaneta v vrsti, ločnica pa se obrne v vodoravno. */ .js .navigacija .navigacija__druzbena { padding: 16px 2px 0; border-left: 0; } .js .navigacija .navigacija__druzbena .druzbena { gap: 20px; } .js .navigacija .navigacija__druzbena a { display: inline-flex; padding: 4px; } .js body.meni-odprt { overflow: hidden; } .js body.meni-odprt .navigacija { transform: translateX(0); visibility: visible; } .js body.meni-odprt::after { content: ""; position: fixed; inset: 0; z-index: 54; background: rgba(42,33,28,.42); } .js body.meni-odprt .meni-gumb { position: relative; z-index: 56; } .js body.meni-odprt .meni-gumb__crte i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .js body.meni-odprt .meni-gumb__crte i:nth-child(2) { opacity: 0; } .js body.meni-odprt .meni-gumb__crte i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } @media (prefers-reduced-motion: reduce) { .meni-gumb__crte i, .js .navigacija { transition: none; } } /* ---------- gumbi ---------- */ .gumb { /* inline-flex in ne inline-block: v .uvod__akcije sta gumba flex postavki, ki ju privzeti align-items: stretch raztegne na višino višjega. Polni gumb je bil brez roba 3 px nižji od obrobljenega, raztegnilo ga je na njegovo višino, notranji rob pa je ostal 12 px — besedilo je zato v njem sedelo 1,5 px previsoko. Prozoren rob izenači višini, sredinjenje pa besedilo drži na sredini tudi, če ga kdaj kaj spet raztegne. */ display: inline-flex; align-items: center; justify-content: center; background: var(--baker-600); color: #fff; font-family: var(--f-tekst); font-weight: 600; font-size: 16px; padding: 12px 24px; border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; text-align: center; box-shadow: var(--senca); } .gumb:hover { background: var(--zemlja); color: #fff; } .gumb--majhen { font-size: 14px; padding: 7px 16px; box-shadow: none; } .gumb--obroba { background: transparent; color: var(--zemlja); border: 1.5px solid var(--line-2); box-shadow: none; } .gumb--obroba:hover { background: var(--pesek-050); border-color: var(--baker); color: var(--zemlja); } /* Facebookova lastna modra, ker je gumb obljuba o tem, kam povezava pelje. */ .gumb--fb { display: inline-flex; align-items: center; gap: 9px; background: #1877F2; color: #fff; font-size: 15px; padding: 10px 18px; } .gumb--fb:hover { background: #0F5AC2; color: #fff; } .gumb__ikona { flex: none; } .fb-vrstica { margin: 26px 0 0; } /* ---------- uvod ---------- */ /* ---------- pasica na vrhu ---------- */ /* Slikovna pasica za poseben dogodek. Prižge se v administraciji (Naslovnica → način »slika«) in po datumu `velja_do` sama ugasne. Širina je cela stran in ne .ovoj: pasica je edino, kar sme iti od roba do roba, ker je slika in ne besedilo. Razmerje nosi sama slika prek width in height v HTML, zato tu ni ne aspect-ratio ne fiksne višine — s tem se izogne temu, da bi bila ista pasica na telefonu porezana drugače, kot je bila narejena. */ .pasica { background: var(--zemlja-900); } .pasica__slika { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; object-position: center; } .pasica__povezava { display: block; } /* Pasica je klikljiva vsa, zato mora žarišče biti vidno na njej sami. */ .pasica__povezava:focus-visible { outline: 3px solid var(--baker); outline-offset: -3px; } .uvod { background: radial-gradient(120% 90% at 88% 0%, var(--pesek-100), transparent 62%), linear-gradient(178deg, var(--pesek-050), var(--papir) 72%); border-bottom: 1px solid var(--line); padding-block: 64px 54px; } /* Pod pasico je uvod nadaljevanje in ne drugi vhod: manj zraka nad njim in brez preliva, ki bi se zaletel v spodnji rob slike. */ .uvod--pod-pasico { padding-block: 34px 44px; background: var(--papir); } .uvod h1 { margin-bottom: .3em; } .uvod__poved { font-size: 20px; color: var(--ink-2); max-width: 52ch; margin-bottom: 28px; } .uvod__akcije { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; } /* ---------- razdelki ---------- */ .razdelek { padding-block: 52px; } .razdelek--tesen { padding-block: 30px; } .razdelek__glava { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .povezava-vec { font-weight: 600; font-size: 15px; } /* Preplesavanja in dogodki, drug ob drugem. Vsak od njiju je kratek seznam — eno preplesavanje, dve delavnici — in eden pod drugim sta na širokem zaslonu dva pasova, v katerih stoji ena sama kartica čez cel zaslon. Ob sebi pa se bereta kot to, kar sta: dvoje, med čimer se izbira. Prelom naredi auto-fit in ne @media: kadar je razdelek samo eden — ker preplesavanja še ni ali ker je administracija drugega ugasnila — se prazen stolpec zloži sam in edini razdelek zasede vso širino. min(100%, 24rem) je tu zato, ker sicer 24rem na ozkem zaslonu prisili stolpec širše od strani. Znotraj stolpca gredo kartice ena pod drugo: pol strani je za dve kartici v vrsti pretesno, naslov dogodka pa se v tako ozki kartici lomi čez tri vrstice. */ .dogajanje { display: grid; align-items: start; gap: 30px 34px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } .dogajanje .kartice { grid-template-columns: 1fr; } /* ---------- plesi na naslovnici ---------- */ /* Ploščice, ki so pravzaprav kazalo cele strani. Barva vsakega plesa pride iz njegove datoteke, zato je tu samo var(--barva) in nobenega imena plesa. Dve postavitvi, ena vsebina. Na telefonu je to navadna mreža v enem stolpcu: vsi plesi so na očeh, drsi pa se tako ali tako po strani navzdol. Na širokem zaslonu (nad 58rem, isti prelom kot meni) postane ena sama vrstica, po kateri se drsi vodoravno — osem enakih ploščic v treh vrsticah je videti kot seznam, ena vrstica, ki se nadaljuje čez rob, pa kot izbira, ki ima še nadaljevanje. Prelom je namerno v to smer: mreža je privzeta, drsnik pa nadgradnja. Če CSS za drsnik brskalnik česa ne razume, ostane mreža — ne obratno. */ .plesi { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } /* ---------- drsnik ---------- */ /* Ovoj nosi puščici, proga drsi. Puščici sta absolutni nad progo in ne ob njej, ker bi ju stolpca levo in desno stisnila ploščice za dva palca navznoter, prav tam, kjer je prostora najmanj. */ .drsnik { position: relative; } @media (min-width: 58.0625rem) { .drsnik__proga { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; /* Prostor za senco ploščic: brez tega jo overflow odreže po spodnjem robu. Negativni odmik pa poskrbi, da vrstica navzven še vedno stoji poravnana z naslovom nad njo. */ padding: 4px 4px 14px; margin: -4px -4px -14px; /* Ta 4 px odmika je treba povedati tudi pripenjanju, sicer prva ploščica ni pripeta pri scrollLeft = 0, ampak pri 4 — brskalnik vrstico ob nalaganju sam premakne za tiste štiri piksle in puščica "nazaj" se prižge, še preden je kdo česa premaknil. */ scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain; } .drsnik__proga::-webkit-scrollbar { height: 8px; } .drsnik__proga::-webkit-scrollbar-track { background: transparent; } .drsnik__proga::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; } .drsnik__proga:focus-visible { outline: 2px solid var(--baker-600); outline-offset: 3px; } .drsnik .plesi { display: flex; grid-template-columns: none; /* Zadnja ploščica potrebuje desno od sebe zrak, sicer se zdi, da je odrezana, ko je drsnik do konca. */ padding-right: 2px; } .drsnik .ples-kartica { /* Širina je izbrana tako, da vrstica nikoli ne izide natanko: pri petih plesih in najširšem ovoju zadnja ploščica pogleda čez rob za dobrih šestdeset pikslov. Prav tisti kos je vse, kar drsnik potrebuje — pove, da se vrstica nadaljuje, in šele s tem sta puščica in zabris na robu sploh vidna. Če bi se pet ploščic natanko izšlo, drsnika ne bi bilo. Raste, a se ne krči: pri štirih plesih ali manj ni česa odkrivati, zato takrat zapolnijo širino tako kot prej mreža, namesto da bi vrstica obvisela na levi. Pri petih in več vsaka obdrži svojih 262 px in vrstica se drsa — nikoli se ne stiskajo, dokler se naslovi ne začnejo lomiti. */ flex: 1 0 262px; scroll-snap-align: start; } /* Zabris na robu pove, da vrstica ni končana. Maska je samo takrat, kadar je na tisti strani res še kaj — sicer bi zadnja ploščica zbledela brez razloga. Razreda postavlja JavaScript. */ .drsnik--drsi .drsnik__proga { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%); } .drsnik--drsi.drsnik--na-zacetku .drsnik__proga { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent 100%); } .drsnik--drsi.drsnik--na-koncu .drsnik__proga { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 46px); mask-image: linear-gradient(to right, transparent 0, #000 46px); } .drsnik--drsi.drsnik--na-zacetku.drsnik--na-koncu .drsnik__proga { -webkit-mask-image: none; mask-image: none; } .drsnik__gumb { position: absolute; top: calc(50% - 7px); transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--zemlja); box-shadow: var(--senca-2); cursor: pointer; transition: opacity .18s ease, transform .18s ease, background-color .18s ease, color .18s ease; } .drsnik__gumb--nazaj { left: -6px; } .drsnik__gumb--naprej { right: -6px; } /* `display: grid` zgoraj je močnejši od privzetka brskalnika za [hidden], zato mora skrivanje pisati tu — sicer bi bila gumba vidna, tudi ko ju JavaScript skrije, in na kratkem seznamu plesov ne bi počela nič. */ .drsnik__gumb[hidden] { display: none; } .drsnik__gumb:hover { background: var(--zemlja); color: var(--papir); border-color: var(--zemlja); } .drsnik__gumb:focus-visible { outline: 2px solid var(--baker-600); outline-offset: 2px; } /* Vlečenje z miško. Prijem se ponudi samo, kadar je kaj za povleči, med vlečenjem pa gresta pripenjanje in izbiranje besedila stran — prvo bi progo vleklo nazaj, drugo bi namesto ploščic označevalo besedilo. */ .drsnik--drsi .drsnik__proga { cursor: grab; } .drsnik--vlecem .drsnik__proga { cursor: grabbing; -webkit-user-select: none; user-select: none; } /* Pripenjanje je izklopljeno ves čas, ko progo premika JavaScript — med vlečenjem in potem, dokler se zamah izteka in dokler se ne umiri na ploščici. Brskalnik namreč pripne v isti sapi, ko razred pade dol, in vsak premik potegne nazaj; brez tega od vztrajnosti ne ostane nič, vidi se samo pripetev. Razreda postavlja JavaScript, zato brez njega ostane pripenjanje tako, kot je bilo. */ .drsnik--vlecem .drsnik__proga, .drsnik--zamah .drsnik__proga { scroll-snap-type: none; } /* Onemogočena puščica ostane na mestu in samo zbledi: če bi izginila, bi se ploščice ob vsakem drsenju do roba premaknile za širino gumba. */ .drsnik__gumb:disabled { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.86); } } /* Pod prelomom drsnika ni: mreža, vse na očeh, brez puščic. `hidden` na gumbih to naredi že brez JavaScripta, tole pa velja tudi potem, ko ga ta odstrani. */ @media (max-width: 58rem) { .drsnik__gumb { display: none; } } @media (prefers-reduced-motion: reduce) { .drsnik__gumb { transition: none; } } .ples-kartica { /* Ploščica nosi barvo svojega plesa, samo zelo razredčeno. Dve vrstici sta namerni: brskalnik brez color-mix() zavrže drugo in obdrži belo — barvna podlaga je okras, ne pogoj za branje. 10 % ni okus, ampak meja. Opis je pisan v --ink-2, drobni tekst pa v --muted, ki ima že na beli podlagi 4,3:1 in nima kaj izgubljati; pri 10 % pade na 3,8:1, pri 20 % bi bil nečitljiv. Barvo nosi rob, ne podlaga. */ background: var(--card); background: color-mix(in srgb, var(--barva) 10%, #fff); border: 1px solid var(--line); border-top: 3px solid var(--barva); border-radius: 8px; padding: 18px 20px 20px; box-shadow: var(--senca); display: flex; flex-direction: column; gap: 6px; } .ples-kartica__povezava { text-decoration: none; display: grid; gap: 2px; } .ples-kartica__ime { font-family: var(--f-naslov); font-size: 26px; font-weight: 600; color: var(--zemlja); line-height: 1.1; } .ples-kartica__povezava:hover .ples-kartica__ime { color: var(--barva); } .ples-kartica__vrsta { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--barva); } .ples-kartica__opis { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; } /* ---------- koraki ---------- */ .koraki { counter-reset: korak; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); } .koraki li { counter-increment: korak; } .koraki li::before { content: counter(korak); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; background: var(--pesek-100); color: var(--baker-600); border-radius: 50%; font-family: var(--f-naslov); font-size: 20px; font-weight: 700; } .koraki h3 { margin-bottom: .25em; } .koraki p { margin: 0; color: var(--ink-2); font-size: 16px; } /* ---------- urnik: dan, razdeljen na dvorani ---------- */ /* Dve dvorani sta dva stolpca, ker je vprašanje, na katerega urnik odgovarja, "kaj še teče ob sedmih" — en sam prepleten seznam bi ga skril. Na telefonu se stolpca zložita, kar je ista informacija v vrstnem redu, v katerem jo prst prebere. */ .dan { margin-top: 38px; } .dan__naslov { margin: 0 0 14px; font-size: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .dan__dvorani { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 52rem) { .dan__dvorani { grid-template-columns: 1fr; } } .dvorana { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px 18px; box-shadow: var(--senca); } .dvorana__ime { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .dvorana__prazna { margin: 0; font-size: 15px; color: var(--muted); font-style: italic; } .termini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .termini--cez { margin-top: 16px; } /* Ena vrstica urnika. Barvni rob je edino, kar loči zouk od bachate na prvi pogled — in ker barvo postavi predloga, to pravilo ne ve, kateri ples je. */ .termin { padding: 11px 12px 11px 14px; border-left: 3px solid var(--barva); border-radius: 0 6px 6px 0; display: grid; gap: 2px; /* Ista razredčena barva kot na ploščicah — vrstica urnika je ista stvar v ožjem prostoru. Prej je barvo nosil samo levi rob; ob sedmih, ko v dveh dvoranah tečeta dva tečaja hkrati, je 3 px premalo, da bi oko brez branja videlo, kateri je kateri. Podlaga to opravi, rob pa ostane, ker barva sama pri 10 % ni dovolj za ločevanje. Črte med vrsticami ni več: vrstice loči podlaga, ob 4 px razmiku med njimi pa bi lebdela v prazno. */ background: color-mix(in srgb, var(--barva) 10%, #fff); } .termin--prost { border-left-style: dotted; } /* Poudarek je bila peščena podlaga, ki bi zdaj barvo plesa pobrisala. Ostane poudarek, a ga nosi samo gostejša mera iste barve. Rob je pri vseh vrsticah enako debel. Poudarek imajo začetni tečaji, zato je debelejši rob bral kot "nivo": videti je bilo, kot da je črta ob Bachati 1 nekaj drugega kot črta ob Bachati 2. Barva podlage to pove brez te zmote. */ .termin--poudarek { background: color-mix(in srgb, var(--barva) 16%, #fff); } .termin__cas { margin: 0; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--muted); white-space: nowrap; } .termin__ime { margin: 0; font-size: 20px; line-height: 1.2; } .termin__ime a { text-decoration: none; color: var(--zemlja); } .termin__ime a:hover { color: var(--barva); text-decoration: underline; } .termin__ples { margin: 0; font-size: 14px; color: var(--ink-2); } .termin__pika { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--barva); margin-right: 7px; vertical-align: baseline; } .termin__povzetek { margin: 2px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; } /* Kdo uči. Manjše od imena tečaja, a v isti barvi kot vrstica s plesom — je podatek, po katerem se ljudje odločajo, ne drobni tisk. */ .termin__ucitelj { margin: 1px 0 0; font-size: 14px; color: var(--ink-2); } .termin__cena { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); } .termin__cena strong { font-weight: 700; color: var(--zemlja); } .termin__opomba { margin: 3px 0 0; } .termin__akcija { margin: 6px 0 0; } .termin__prosto { font-size: 14px; color: var(--muted); } /* Gumb za prijavo nosi barvo plesa, ne bakra. Vrstica je obarvana od roba do podlage, gumb v njej pa je bil edini kos, ki je ostal rjav — pri dveh tečajih drug pod drugim sta bila oba gumba enaka in barva, po kateri se vrstici ločita, se je pri edinem delu, ki ga je treba klikniti, izgubila. Barva je za odtenek potemnjena: barve plesov so izbrane za 3 px robove in 10 % podlage, tu pa nosijo bel napis. Zmes 88 % barve in 12 % zemlje drži vseh osem plesov in privzeti baker (vrstica brez plesa) nad 4,5 : 1. */ .termin__akcija .gumb:not(.gumb--obroba) { background: color-mix(in srgb, var(--barva) 88%, var(--zemlja-900)); } .termin__akcija .gumb:not(.gumb--obroba):hover { background: color-mix(in srgb, var(--barva) 62%, var(--zemlja-900)); } /* Ista vrstica, ko stoji sama na strani plesa: takrat je prostor za tri stolpce — kdaj, kaj, gumb — in za povzetek pod imenom. */ .termini--seznam { gap: 12px; margin-top: 18px; } .termin--velik { grid-template-columns: 9em 1fr auto; gap: 8px 24px; align-items: center; background: var(--card); background: color-mix(in srgb, var(--barva) 10%, #fff); border: 1px solid var(--line); border-left: 4px solid var(--barva); border-radius: 8px; padding: 18px 22px; box-shadow: var(--senca); } .termin--velik + .termin--velik { border-top: 1px solid var(--line); } .termin--velik .termin__cas { font-size: 15px; color: var(--zemlja); text-transform: capitalize; white-space: normal; } .termin--velik .termin__ura { font-weight: 400; color: var(--muted); } .termin--velik .termin__kaj { display: grid; gap: 3px; justify-items: start; } .termin--velik.termin--poudarek { border-radius: 8px; box-shadow: var(--senca-2); } @media (max-width: 44rem) { .termin--velik { grid-template-columns: 1fr; gap: 8px; } .termin--velik .termin__akcija .gumb { display: block; text-align: center; } } .pod-urnikom { margin-top: 30px; } /* ---------- teden na naslovnici ---------- */ /* Predogled, ne urnik: brez dvoran in brez gumbov, ker oboje spada na stran, ki je o tednu. */ .teden { display: grid; gap: 14px; margin: 22px 0 8px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .teden__dan { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 16px 18px; box-shadow: var(--senca); } .teden__naslov { margin: 0 0 10px; font-size: 22px; padding-bottom: 7px; border-bottom: 1px solid var(--line); } .termini--tesni .termin { padding-block: 8px; } .termini--tesni .termin__ime { font-size: 17px; } /* ---------- ples ---------- */ .ples__glava, .tecaj__glava { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; } /* Naslov dogodka, ki pripada plesu, nosi njegovo barvo — isto, s katero je svetila kartica, s katere je človek prišel. Isto pravilo in isti razlog kot pri .ples-blok__ime: barve plesov držijo na beli podlagi med 4,6:1 in 5,8:1, pri naslovu te velikosti torej z rezervo. Barvo dobi samo naslov; podnaslov in besedilo ostaneta črna, sicer stran ni več barvno oznacena, ampak barvna. */ .tecaj__glava--barvna h1 { color: var(--barva); } .skok { margin: 0 0 26px; } .ples-blok { /* Blok plesa je zdaj gol: brez podlage, brez roba, brez sence. Prej je bil kartica, znotraj nje pa so bile stopnje spet kartice — kartica v kartici, dve ravni okvirjev za eno raven vsebine. Bralec je videl pet enakih pravokotnikov, tečaji v njih pa so izginili. Barvo zato nosijo stopnje (glej .lestev__stopnja), ples pa jo pove z imenom in z značko. Bloke loči črta, ne škatla. */ padding: 0; margin-top: 34px; } .ples-blok + .ples-blok { border-top: 1px solid var(--line); padding-top: 30px; } .ples-blok__glava { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: baseline; } .ples-blok__ime { margin: 0; } /* Ime je zdaj edini nosilec barve v glavi bloka — barve plesov držijo na beli podlagi med 4,6:1 in 5,8:1, pri naslovu te velikosti torej z rezervo. */ .ples-blok__ime a { text-decoration: none; color: var(--barva); } .ples-blok__ime a:hover { text-decoration: underline; } .ples-blok__opis { margin: 8px 0 14px; font-size: 17px; color: var(--ink-2); max-width: 62ch; } .ples-blok__vec { margin: 14px 0 0; } .lestev { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .lestev__stopnja { /* Ista shema kot ploščica na naslovnici in vrstica urnika: razredčena barva plesa, poln rob ob strani, senca. Tu je zdaj težišče strani — stopnje so tisto, med čimer se bralec odloča. */ background: var(--card); background: color-mix(in srgb, var(--barva) 12%, #fff); border: 1px solid var(--line); border-left: 3px solid var(--barva); border-radius: 8px; padding: 11px 16px; box-shadow: var(--senca); display: grid; gap: 1px; } .lestev__stopnja a { font-weight: 600; text-decoration: none; color: var(--zemlja); font-size: 16px; } .lestev__stopnja a:hover { color: var(--barva); text-decoration: underline; } /* ---------- znak dvorane ---------- */ /* Dve nadstropji, eno polno. Podeduje barvo besedila ob sebi (currentColor), zato je v urniku enako sivkast kot naslov stolpca in na temni znački bel — brez ene same posebne vrstice za vsako mesto, kjer stoji. Poravnan je po pisavi in ne po sredini vrstice: v vrstici z besedilom mora sedeti na isti črti kot črke, sicer je videti, kot da lebdi. */ .dvorana-znak { flex: none; vertical-align: -2px; margin-right: 5px; } .dvorana-znak__prazno { opacity: .4; } /* Vrstica, v kateri znak stoji ob imenu dvorane. Flex in ne navadni tok, ker se dolgo ime na ozkem stolpcu prelomi, znak pa mora ostati ob prvi vrstici in ne pod njo. */ .termin__dvorana, .dvorana__ime, .kartica__kraj, .dvorana-vrstica { display: flex; align-items: center; gap: 0; } .termin__dvorana { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); } /* ---------- značke ---------- */ .znacka { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; background: var(--pesek-100); color: var(--zemlja); padding: 3px 11px; border-radius: 20px; margin: 0; } /* Značka z znakom dvorane. Stati mora za .znacka in ne pred njo: enako močni izbirnik, ki pride prej, izgubi — in prav to se je zgodilo. Kapsula je ostala inline-block, znak v njej pa navadna vrstična slika na pisavni črti, od koder je s svojimi 16 px razpel vrstico štiri pike višje od sosednje značke. Videti je bilo kot napačno poravnan znak, v resnici pa je bila napačno visoka kapsula. Z inline-flex je znak sredinjen na besedilo značke, kapsula pa je natanko tako visoka kot vsaka druga poleg nje. vertical-align znaku tu ne pomeni nič več (v flexu ne velja), ostane pa zapisan za brskalnik, ki flexa ne bi uveljavil. */ .znacka--dvorana { display: inline-flex; align-items: center; } .znacka--dvorana .dvorana-znak { vertical-align: 0; } /* In še drugič isti znak, tokrat navzven. Vrsta značk se poravnava po pisavni črti, pisavna črta kapsule s flexom pa ni črta njenega besedila, ampak dno prvega otroka — torej dno znaka. Značka z dvorano je zato ob sosednji stala pet pik previsoko, čeprav sta bili enako veliki. Ko sta enako visoki, ju sredina poravna natanko, pisavna črta pa ne. */ .kartica__meta .znacka--dvorana { align-self: center; } /* Barvna značka nosi barvo svojega plesa, polno in ne razredčeno: na kartici učitelja je to edina stvar, ki pove, kaj ta človek uči, in bleda značka na bledi podlagi kartice je izginila vanjo. Bela na vseh barvah plesov drži med 4,6:1 in 5,8:1, torej tudi pri 11,5 px krepko. (Rezervna --baker je pri 4,0:1 — če kdaj pride značka brez plesa, jo je treba potemniti.) */ .znacka--barvna { background: var(--barva); color: #fff; } /* Značka plesa na strani dogodka je povezava nanj. Podčrtaj bi v barvni kapsuli izgledal kot napaka, zato ga ni — dokler kazalec ne obstane na njej. */ .znacka a { color: inherit; text-decoration: none; } .znacka a:hover { text-decoration: underline; } .znacka--negotovo { background: #F3EADA; color: #7A5B18; } /* "Začni tukaj" je poziv, ne oznaka zvrsti. Odkar je --barvna polna barva plesa, bi bila v isti barvi od nje nerazločljiva — na strani plesa stojita obe. Zato temna zemlja: drugačna vrsta stvari, drugačna barva. */ .znacka--poudarek { background: var(--zemlja); color: #fff; } /* ---------- podatki o tečaju ---------- */ .podatki { display: grid; gap: 14px 26px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); margin: 20px 0 24px; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; } .podatki dt { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .podatki dd { margin: 0; font-size: 16.5px; color: var(--zemlja); font-weight: 600; } .podatki dd .drobno { font-weight: 400; display: block; } /* ---------- kartice ---------- */ .kartice { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .kartica { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 18px 20px; box-shadow: var(--senca); display: flex; flex-direction: column; gap: 7px; } .kartica__datum { font-size: 13px; font-weight: 700; color: var(--baker-600); margin: 0; letter-spacing: .02em; } .kartica__naslov { font-size: 23px; margin: 0; } .kartica__naslov a { text-decoration: none; color: var(--zemlja); } .kartica__naslov a:hover { color: var(--baker-600); text-decoration: underline; } .kartica__kraj { font-size: 14px; color: var(--muted); } .kartica__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 0; } .kartica p { margin: 0; } .kartica p + p { margin-top: 2px; } /* Kartica dogodka, ki pripada plesu. Isto pravilo kot pri .ples-kartica: barvo nosita rob in zelo razredčena podlaga, besedilo pa ostane v svoji barvi. Dve vrstici background sta namerni — brskalnik brez color-mix() zavrže drugo in obdrži belo, barvna podlaga je okras in ne pogoj za branje. */ .kartica--barvna { background: color-mix(in srgb, var(--barva) 10%, #fff); border-top: 3px solid var(--barva); } .kartica--barvna .kartica__datum { color: var(--barva); } .kartica--barvna .kartica__naslov a:hover { color: var(--barva); } /* Gumb na kartici dogodka — na strani plesa, kjer kartice stojijo v vrsti pod lestvijo tečajev in je vsaka drugače dolga. `margin-top: auto` ga potisne na dno kapsule, tako da so gumbi poravnani med sabo in ne vsak na svoji višini. Barvo pobere od plesa, po istem pravilu in iz istega razloga kot gumb v vrstici urnika: pri dveh dogodkih drug ob drugem je gumb tisti kos, ki ga je treba klikniti, in prav ta ne sme izgubiti barve, po kateri se ločita. */ .kartica p.kartica__akcija { margin: 6px 0 0; margin-top: auto; padding-top: 4px; } .kartica--barvna .kartica__akcija .gumb:not(.gumb--obroba) { background: color-mix(in srgb, var(--barva) 88%, var(--zemlja-900)); } .kartica--barvna .kartica__akcija .gumb:not(.gumb--obroba):hover { background: color-mix(in srgb, var(--barva) 62%, var(--zemlja-900)); } .arhiv { list-style: none; margin: 18px 0 0; padding: 0; } .arhiv li { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; } .arhiv__datum { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 7em; } /* ---------- učitelji ---------- */ .ucitelji-strip { margin-top: 30px; } .ucitelji-strip__naslov { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .ucitelji-strip__seznam { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 26px; } .ucitelj-znak { display: flex; align-items: center; gap: 12px; } .ucitelj-znak__slika { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; object-position: 50% 0%; border: 2px solid var(--pesek-100); } /* Brez fotografije: začetnica v disku. Manjkajoča slika mora izgledati kot odločitev, ne kot luknja. */ .ucitelj-znak__crka { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--pesek-100); color: var(--baker-600); font-family: var(--f-naslov); font-size: 27px; font-weight: 600; } .ucitelj-znak__besede { display: grid; gap: 1px; } .ucitelj-znak__ime { font-weight: 600; color: var(--zemlja); } .ucitelj-znak__vloga { font-size: 13.5px; color: var(--muted); } /* Učitelji na /o-nas: kartica v barvi plesa, ki ga uči, z izrezanim portretom, ki stoji na njenem dnu in gleda čez zgornji rob. Portret ni v okvirju in ni obrezan v krog — slike so izrezi z alfo, zato sme glava čez rob kartice: za njo ni pravokotnika, ki bi ga bilo treba skriti. Prav to je razlog, da glav prej ni bilo videti — kvadratni izrez v krogu je od posnetka do kolen pokazal sredino trupa. */ .ucitelji { display: grid; gap: 132px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); /* Prostor nad prvo vrsto za glave, ki gledajo iz kartic. Mora biti vsaj toliko, kolikor znaša previs spodaj (-132px), sicer glava zleze v naslov. */ margin-top: 132px; } .ucitelj { background: var(--card); background: color-mix(in srgb, var(--barva) 10%, #fff); border: 1px solid var(--line); border-top: 3px solid var(--barva); border-radius: 8px; box-shadow: var(--senca); padding: 22px 24px 24px; /* Izhodišče za nevidni gumb čez celo kartico. Transformacije tu ne sme biti: okno je otrok telesa in ne kartice prav zato, da ga tak zamik ne bi pribil na kartico namesto na zaslon. */ position: relative; } .ucitelj h2 { margin-bottom: .15em; } .ucitelj .vodilo { font-size: 17px; } /* Kartica s portretom je mreža z dvema stolpcema in ne plavajoča slika: portret mora ostati prilepljen na dno, koliko vrstic vzame besedilo. V vrstico šteje le `višina - 104px`, tako da je pregled čez rob vedno enak, ne glede na širino kartice. Zato tudi padding-bottom: 0 — spodnji rob si vzame besedilo, slika stoji na tleh kartice. */ .ucitelj--s-portretom { display: grid; grid-template-columns: 1fr clamp(120px, 34%, 200px); /* Vrsti morata biti napisani: `grid-row: 1 / -1` na portretu se opira na zadnjo črto eksplicitne mreže, in dokler te ni, -1 ni zadnja vrsta, ampak kar prva. Portret je zato stal na dnu prve vrste in lebdel nad spodnjim robom kartice namesto na njem. */ grid-template-rows: auto auto; column-gap: 18px; /* Spodnji rob si vzame besedilo, ne kartica: portret mora stati natanko na spodnji črti okvira, ne 24 px nad njo. */ padding-bottom: 0; } .ucitelj--s-portretom .ucitelj__besedilo { grid-area: 1 / 1; align-self: start; } /* Odprto besedilo ostane v svojem stolpcu, da ne zaide pod portret. */ .ucitelj--s-portretom .ucitelj__vec { grid-column: 1; grid-row: 2; padding-bottom: 22px; } /* Portret stoji na tleh kartice in gleda čez njen zgornji rob. Razteza se čez obe vrsti, ker mora biti prilepljen na dno cele kartice in ne na dno prve vrste — sicer lebdi nad spodnjo črto. V višino šteje le `višina - 132px`, zato je previs enak ne glede na širino kartice. */ .ucitelj__portret { grid-column: 2; grid-row: 1 / -1; align-self: end; width: calc(100% + 16px); height: auto; margin: -132px -16px 0 0; /* Izhodišče je dno in ne sredina: noge stojijo na spodnji črti kartice, zato mora rast iti navzgor — drugače bi se ob povečavi pogreznile skozi rob. */ transform-origin: bottom center; transition: transform .6s ease; } .ucitelj--s-portretom:hover .ucitelj__portret, .ucitelj--s-portretom:focus-within .ucitelj__portret { transform: scale(1.1); } @media (prefers-reduced-motion: reduce) { .ucitelj__portret { transition: none; } .ucitelj--s-portretom:hover .ucitelj__portret, .ucitelj--s-portretom:focus-within .ucitelj__portret { transform: none; } } /* Življenjepis pod povzetkom: zaprt je ena vrstica, odprt cel tekst. To je različica brez JavaScripta. Kadar ga stran ima, se ista vsebina preseli v okno (glej .ucitelj-okno) in
tu izgine — skrit je že pred prvim izrisom, da vrstica "Več o ..." ne utripne in ne izgine. */ .js .ucitelj__vec { display: none; } .ucitelj__vec > summary { cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--baker-600); padding: 4px 0; } .ucitelj__vec > summary::-webkit-details-marker { display: none; } .ucitelj__vec > summary span::after { content: " ↓"; } .ucitelj__vec[open] > summary span::after { content: " ↑"; } .ucitelj__vec > summary:hover span { text-decoration: underline; } .ucitelj__vec > summary:focus-visible { outline: 2px solid var(--barva); outline-offset: 3px; } .ucitelj__vec .besedilo { font-size: 16px; padding-bottom: 4px; } /* Odpiranje z animacijo. ::details-content je vsebina
brez povzetka; `interpolate-size` je tisto, kar dovoli animirati do `auto` — brez njega višine ni mogoče prehajati, ker cilj ni število. Brskalnik, ki tega ne pozna, kartico odpre v hipu. To je slabša različica iste stvari in ne pokvarjena stran, zato brez JavaScripta. */ .ucitelj__vec::details-content { block-size: 0; overflow: hidden; transition: block-size .34s ease, content-visibility .34s allow-discrete; } .ucitelj__vec[open]::details-content { block-size: auto; } @media (prefers-reduced-motion: reduce) { .ucitelj__vec::details-content { transition: none; } } @media (max-width: 38rem) { /* Na ozki kartici ni prostora za svoj stolpec, zato ga besedilo objame. Slika takrat ne seže do tal — mehak rob naredi iz tega namero namesto odrezanega pasu. */ .ucitelji { margin-top: 76px; gap: 84px 16px; } .ucitelj--s-portretom { display: flow-root; padding-bottom: 0; } .ucitelj--s-portretom .ucitelj__besedilo { padding-bottom: 0; } .ucitelj__portret { float: right; width: 42%; margin: -68px -12px 0 14px; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); } } /* ---------- kartica kot gumb in okno z življenjepisom ---------- Kartica ni več ime z vrstico "Več o ..." pod njim, ampak en sam gumb: klik kamorkoli po njej — tudi po glavi, ki gleda čez njen zgornji rob — odpre okno s sliko in celim besedilom. Razred doda JavaScript šele takrat, ko je okno res sestavljeno, zato kartica nikoli ne izgleda klikljiva, ne da bi to tudi bila. Gumb je pravi