/* =========================================================================== gamingguru.eu — dizajnové tokeny --------------------------------------------------------------------------- Jediné miesto, kde sú zapísané hodnoty rozostupov, veľkostí písma, farieb, tieňov a rámov. Stránky sú písané inline štýlmi, ale inline štýl smie používať var(), takže sa na tieto tokeny vie odvolať odkiaľkoľvek. Pravidlo: v stránkach nemá byť natvrdo zapísaná žiadna hodnota, ktorá tu má svoj token. Keď treba niečo doladiť, mení sa to tu — nie sedemkrát. =========================================================================== */ :root { /* --- Rozostupy --------------------------------------------------------- Pozadie má mriežku 24 × 24 px. Škála je jej delenie a násobky, takže hrany obsahu padajú na linky mriežky namiesto vedľa nich. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; /* Rozostupy sekcií listu — vodorovne rovnako vľavo aj vpravo, zvisle menej hore a viac dole, aby sekcie mali spoločný rytmus. */ --pad-x: var(--s-6); --pad-top: var(--s-6); --pad-bottom: var(--s-8); --pad-first: var(--s-8); /* --- Veľkosti písma ---------------------------------------------------- Bez polpixelov: renderujú sa nekonzistentne a rozdiel medzi 13 a 13.5 nenesie žiadnu informáciu. */ --t-micro: 11px; /* mono, len verzálky, nikdy vetný text */ --t-meta: 12px; /* mono meta, popisky */ --t-ui: 13px; /* tlačidlá, drobné popisy */ --t-body: 15px; /* bežný text */ --t-lead: 17px; /* názvy kariet, úvodné vety */ --t-h2: 22px; /* nadpis sekcie */ --t-claim-s: 30px; /* hlavný claim na mobile */ --t-claim: 38px; /* hlavný claim na desktope */ --t-h1: 44px; /* --- Riadkovanie ------------------------------------------------------- Tri hodnoty stačia. Display tesne, názvy stredne, čítaný text voľne. */ --lh-display: 1.1; --lh-title: 1.3; --lh-body: 1.5; /* --- Písma ------------------------------------------------------------- */ --f-display: 'Jersey 25', 'Instrument Sans', sans-serif; --f-text: 'Instrument Sans', Helvetica, Arial, sans-serif; --f-mono: 'JetBrains Mono', monospace; /* Jersey 25 je pixelové písmo — v malých veľkostiach potrebuje viac preloženia než vo veľkých, inak sa písmená zlievajú. */ --ls-display-s: 0.06em; /* ≤ 14px */ --ls-display-m: 0.03em; /* 20–24px */ --ls-display-l: 0.01em; /* ≥ 38px */ --ls-mono: 0.06em; /* Veľký claim je v Instrument Sans, nie v pixelovom písme — tam je naopak žiaduce mierne stiahnutie. */ --ls-claim: -0.01em; /* --- Plochy ------------------------------------------------------------ */ --paper: #FAFAF7; /* list */ --paper-hi: #FFFFFF; /* nadvihnutá plocha a text na tmavom */ --ground: #EEF0EE; /* pozadie stránky s mriežkou */ --fill: #EFF1EE; /* najjemnejšia výplň vnútri listu */ --fill-2: #E9ECE8; /* výraznejšia výplň (bočná lišta, hlavičky tabuliek) */ /* --- Text -------------------------------------------------------------- Chladná škála, aby text nebol voči #EEF0EE a #FAFAF7 dohneda. Všetky štyri stupne majú na papieri aspoň 4.5:1. */ --ink: #14161C; /* 17.3:1 */ --ink-2: #3A3E45; /* 10.3:1 */ --ink-3: #5E636B; /* 5.8:1 */ --ink-4: #6B7078; /* 4.8:1 — najslabší, ktorý ešte prejde */ /* --- Delenie ----------------------------------------------------------- Tri hrúbky a nič medzi tým. */ --line: #D5D9D3; /* delenie vnútri sekcie */ --line-strong: var(--ink); /* delenie sekcií a rám listu */ --hair: 1px; --rule: 1.5px; /* rám listu */ --accent-bar: 4px; /* akcentový pruh — jediná „hrubá" hodnota */ /* --- Akcent a stavy ---------------------------------------------------- Purpurová je jediná interaktívna farba: odkaz, hover, focus, aktívny stav. Sekčné farby nesmú byť použité na interakciu, inak sa tento signál stratí. */ --accent: #5937C8; --accent-fill: #F0EDFB; /* --- Sekčné farby ------------------------------------------------------ Každá má dva varianty. `ink` je stmavená na kontrast aspoň 4.5:1 na papieri a používa sa na text (mono label `// 0X`). `fill` je pôvodný svetlejší odtieň a používa sa len ako plocha alebo pruh, kde na kontraste textu nezáleží. */ --sluzby-ink: #C2410C; /* 4.95:1 */ --sluzby-fill: #E8571E; --projekty-ink: #5937C8; /* 7.16:1 */ --projekty-fill: #5937C8; --vyskum-ink: #B02463; /* 6.13:1 */ --vyskum-fill: #D63A7A; --studenti-ink: #1D4FB8; /* 7.01:1 */ --studenti-fill: #2B6CE6; --omne-ink: #5937C8; /* zjednotené s akcentom, bolo #6541b5 */ --omne-fill: #6541b5; --kontakt-ink: #8A6300; /* 5.20:1 */ --kontakt-fill: #E0A800; --lab-ink: #2E7D3A; /* 4.89:1 */ --lab-fill: #3FA34D; /* --- Sémantické farby -------------------------------------------------- Nie sú to jednorazové odchýlky, ale nositelia významu: stav publikácie vo Výskume a potvrdenie po skopírovaní kontaktu. Obidve textové hodnoty na papieri prechádzajú, takže sa zachovávajú tak, ako sú. */ --status-research: #0B796F; /* umelecký výskum · 5.05:1 */ --status-service: #816116; /* akademická služba · 5.49:1 */ --ok-fill: #CFE8D4; /* plocha po úspešnom skopírovaní */ /* --- Tiene ------------------------------------------------------------- Dva stupne, oba tvrdé bez rozostrenia. Kruhové prstence (0 0 0 Npx) patria stavom, nie dekorácii. */ --shadow-card: 4px 4px 0 var(--ink); --shadow-sheet: 8px 8px 0 var(--accent); /* --- Zaoblenie --------------------------------------------------------- Estetika je ostrohranná a pixelová. Nula všade; výnimkou sú kruhové indikátory, ktoré si 50 % nesú samy. */ --radius: 0; /* --- Hlavička a odsadenie kotiev --------------------------------------- Jedna hodnota výšky a jeden bezpečný odstup, aby skok na kotvu neskončil pod lepiacou hlavičkou. --hdr prepisuje JavaScript podľa skutočnej výšky, lebo na úzkych displejoch sa hlavička zalamuje. */ --hdr: 60px; --safe: calc(var(--hdr) + var(--s-3)); /* --- Dotykové ciele ---------------------------------------------------- O veľkosti rozhoduje typ ukazovateľa, nie šírka okna: aj na veľkom dotykovom displeji treba prstom 44 px. */ --tap: 40px; } @media (pointer: coarse) { :root { --tap: 44px; } } /* --------------------------------------------------------------------------- Zalomenia — spoločné pre všetky stránky --------------------------------------------------------------------------- Mriežky kariet sa zužujú v rovnakých bodoch, nech je karta štvorica alebo trojica. Predtým išli služby na jeden stĺpec už pri 1100 px, kým štvorpoložkové mriežky zostávali dvojstĺpcové až po 640 px. --------------------------------------------------------------------------- */ @media (max-width: 900px) { [data-four] { grid-template-columns: repeat(2, 1fr) !important; } [data-three] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { [data-four] { grid-template-columns: 1fr !important; } [data-three] { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------------- Navigácia na úzkych displejoch --------------------------------------------------------------------------- Namiesto zalamovania pod logo sa navigácia posúva vodorovne. Mono labely („Inventory", „Quest log") pritom zostávajú — sú to hlavné rozlišovacie znaky sekcií a ich skrytie robilo z navigácie obyčajný zoznam slov. --------------------------------------------------------------------------- */ @media (max-width: 1100px) { [data-nav] { margin-left: 0 !important; width: 100%; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } [data-nav]::-webkit-scrollbar { display: none; } [data-nav] > a { flex: 0 0 auto; } [data-nav] [data-sub] { display: block !important; font-size: var(--t-micro); } } /* --------------------------------------------------------------------------- Univerzálne správanie, ktoré patrí k tokenom --------------------------------------------------------------------------- */ /* Čísla nesmú pri prepínaní poskakovať — roky, počty, počítadlá. */ [data-num], [data-reel-foot], time { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- Hlavička listu — meno a atribúty postavy --------------------------------------------------------------------------- Päť atribútov sa vedľa mena zmestí len na širokej obrazovke. Nižšie idú pod meno a lámu sa na tri stĺpce, nie na dva — pri dvoch zostávala piata položka sama v treťom riadku a celá pravá strana bola asymetrická. --------------------------------------------------------------------------- */ @media (max-width: 1100px) { [data-head] { grid-template-columns: minmax(0, 1fr) !important; gap: var(--s-4) !important; } [data-head] dl { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--s-3) var(--s-4) !important; } } @media (max-width: 640px) { [data-head] dl { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* --------------------------------------------------------------------------- Preskočenie na obsah --------------------------------------------------------------------------- Pri lepiacej hlavičke a dlhej bočnej lište je to prvá vec, ktorú klávesnicový návštevník potrebuje. Odkaz je skrytý nad okrajom okna a vysunie sa, až keď naň príde tabulátor. --------------------------------------------------------------------------- */ .gg-skip { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 100; transform: translateY(calc(-100% - var(--s-4))); background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4); font-family: var(--f-text); font-size: var(--t-ui); font-weight: 500; text-decoration: none; transition: transform 0.15s; } .gg-skip:focus { transform: translateY(0); color: var(--paper); } #obsah:focus { outline: none; } /* --------------------------------------------------------------------------- Tlač --------------------------------------------------------------------------- Profil a portfólio sa tlačí a exportuje do PDF častejšie, než sa zdá. Na papieri nemá zmysel mriežka pozadia, lepiaca hlavička, navigácia ani tlačidlá — a adresy odkazov treba vypísať, lebo sa na ne nedá kliknúť. --------------------------------------------------------------------------- */ @media print { :root { --ground: #FFFFFF; --paper: #FFFFFF; } html, body { background: #FFFFFF !important; background-image: none !important; color: #000000; } header, nav, .gg-skip, [data-drum-foot], [data-side-toc], [data-drum-rail] button, [data-reel-foot] { display: none !important; } main { margin: 0 !important; padding: 0 !important; max-width: none !important; } /* Tvrdý tieň a farebné plochy len míňajú toner. */ * { box-shadow: none !important; } /* Adresa odkazu za textom, ale len pri odkazoch mimo webu — interné kotvy by na papieri boli len šum. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--f-mono); font-size: 10px; word-break: break-all; } /* Karty a sekcie sa nemajú lámať cez stranu. */ article, section, figure, li { break-inside: avoid; } h1, h2, h3 { break-after: avoid; } } /* --------------------------------------------------------------------------- Bubon Quest Logu na úzkych displejoch --------------------------------------------------------------------------- Ľavý stĺpec riadku má na telefóne 70 px. Počet rolí a questov sa doň nezmestí a láme sa cez tri riadky cez kartu vedľa. Tá istá informácia je pritom hneď nad bubnom v lište aktívneho roka, takže sa v riadku vypne — nie je čo stratiť, len duplicitu. --------------------------------------------------------------------------- */ @media (max-width: 640px) { [data-drum-count] { display: none; } } /* --------------------------------------------------------------------------- Spoločný základ stránok --------------------------------------------------------------------------- Pravidlá, ktoré mali všetky stránky zhodné a doteraz boli skopírované sedemkrát. Vlastné odchýlky si každá stránka drží naďalej vo svojom bloku