From af6df6112813b30ba65924a9457748ffb591ac35 Mon Sep 17 00:00:00 2001 From: stepan Date: Wed, 18 Mar 2026 23:23:52 +0100 Subject: [PATCH] =?UTF-8?q?[ui]=20CSS=20=E2=80=93=20Montserrat=20300/500,?= =?UTF-8?q?=20IBM=20Plex=20Serif=20200/0.875rem,=20h1=20v=C4=9Bt=C5=A1?= =?UTF-8?q?=C3=AD,=20h2=20barevn=C4=9Bj=C5=A1=C3=AD,=20h3=20sv=C4=9Btlej?= =?UTF-8?q?=C5=A1=C3=AD=20pozad=C3=AD,=20inline=20tla=C4=8D=C3=ADtka=20ste?= =?UTF-8?q?jn=C4=9B=20=C5=A1irok=C3=A1,=20odstran=C4=9Bna=20tmav=C3=A1=20?= =?UTF-8?q?=C4=8D=C3=A1ra=20pod=20h1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/auth-styl.css | 84 +++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/css/auth-styl.css b/css/auth-styl.css index 91a363b..705f7c4 100644 --- a/css/auth-styl.css +++ b/css/auth-styl.css @@ -13,20 +13,20 @@ /* ------------------------------------------------------------ GOOGLE FONTS - Montserrat 100 – tři velikosti (viz níže) - IBM Plex Serif 300 – jedna velikost pro veškerý text + Montserrat 300/500 – tři velikosti (viz níže) + IBM Plex Serif 200 – jedna velikost pro veškerý text ------------------------------------------------------------ */ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=IBM+Plex+Serif:ital,wght@0,300;1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&family=IBM+Plex+Serif:ital,wght@0,200;1,200&display=swap'); /* ------------------------------------------------------------ TYPOGRAFICKÁ STUPNICE MONTSERRAT ============================================================ - Velikost A – 2.2rem ... hlavní nadpis stránky (h1), jednou - Velikost B – 0.88rem ... nadpisy sekcí (h2, h3) - Velikost C – 0.78rem ... nejmenší = IBMPlexSerif velikost - (th, button, label, span#heslo-sila) - IBM Plex Serif ... 0.78rem pro veškerý ostatní text + Velikost A – 2.6rem ... hlavní nadpis stránky (h1), jednou, weight 300 + Velikost B – 1.05rem ... nadpisy sekcí (h2, h3), weight 300 + Velikost C – 0.78rem ... nejmenší (th weight 500, button/label weight 300) + = shodná s IBM Plex Serif optickou velikostí + IBM Plex Serif 200 ... 0.875rem pro veškerý ostatní text ------------------------------------------------------------ */ @@ -91,8 +91,8 @@ body { background-color: var(--bg-hlavni); color: var(--text-hlavni); font-family: 'IBM Plex Serif', Georgia, serif; - font-size: 0.78rem; /* jedna velikost pro všechen IBM Plex Serif text */ - font-weight: 300; + font-size: 0.875rem; /* IBM Plex Serif – trochu větší než dřív */ + font-weight: 200; line-height: 1.75; min-height: 100vh; display: flex; @@ -173,15 +173,18 @@ body > h1 + h2 { padding-top: 0; } -/* h1 když za ním následuje h2 – zaoblení jen nahoře */ +/* h1 když za ním následuje h2 – zaoblení jen nahoře, bez čáry dole */ body > h1:has(+ h2) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0.3rem; - box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45); /* stín jen nahoře */ + box-shadow: var(--stin-blok); /* stejný stín jako ostatní bloky, bez čáry */ } -/* Spodní mezera za posledním blokem */ +/* h3 blok má o trochu světlejší pozadí než ostatní bloky */ +body > h3 { + background-color: #292929; +} body > *:last-child { margin-bottom: var(--sekce-mezera); } @@ -205,26 +208,26 @@ section > * { /* === VELIKOST A: hlavní nadpis stránky, jednou === */ h1 { font-family: 'Montserrat', sans-serif; - font-weight: 100; - font-size: 2.2rem; + font-weight: 300; + font-size: 2.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akcent-svetly); - line-height: 1.2; + line-height: 1.15; } /* === VELIKOST B: nadpisy sekcí === */ h2, h3 { font-family: 'Montserrat', sans-serif; - font-weight: 100; - font-size: 0.88rem; - letter-spacing: 0.18em; + font-weight: 300; + font-size: 1.05rem; + letter-spacing: 0.14em; text-transform: uppercase; } h2 { - color: var(--ocel-svetly); + color: #9ab0c8; /* světlejší modrošedá – čitelná na tmavém i světlém */ } h3 { @@ -235,12 +238,12 @@ h3 { (shodná s IBM Plex Serif = 0.78rem, aby text vypadal stejně velký) */ p { - font-size: 0.78rem; /* IBM Plex Serif velikost */ + font-size: 0.875rem; /* IBM Plex Serif velikost */ } strong { color: var(--text-nadpis); - font-weight: 400; /* IBM Plex Serif nemá bold 300→400 */ + font-weight: 300; } p > strong:first-child { @@ -291,7 +294,7 @@ form p { label { display: block; font-family: 'Montserrat', sans-serif; - font-weight: 100; + font-weight: 300; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; @@ -306,8 +309,8 @@ label:has(input[type="checkbox"]) { align-items: center; gap: 0.5rem; font-family: 'IBM Plex Serif', Georgia, serif; - font-weight: 300; - font-size: 0.78rem; + font-weight: 200; + font-size: 0.875rem; text-transform: none; letter-spacing: normal; color: var(--text-hlavni); @@ -328,9 +331,9 @@ input[type="password"] { border: 1px solid var(--ocel); border-radius: var(--polomer-prvek); padding: 0.45rem 0.7rem; - font-size: 0.78rem; + font-size: 0.875rem; font-family: 'IBM Plex Serif', Georgia, serif; - font-weight: 300; + font-weight: 200; box-shadow: var(--stin-input); transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; outline: none; @@ -406,10 +409,9 @@ button[type="button"] { border-radius: var(--polomer-prvek); padding: 0.48rem 1.1rem; font-family: 'Montserrat', sans-serif; - font-weight: 100; + font-weight: 300; font-size: 0.78rem; - letter-spacing: 0.12em; - text-transform: uppercase; + letter-spacing: 0.1em; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; margin-top: 0.3rem; @@ -458,8 +460,10 @@ form[style*="display: inline"] { form[style*="display:inline"] button, form[style*="display: inline"] button { margin-top: 0; - padding: 0.2rem 0.55rem; + padding: 0.2rem 0; font-size: 0.78rem; + min-width: 7rem; /* stejná šířka pro Smazat i Změnit heslo */ + text-align: center; } @@ -470,7 +474,7 @@ form[style*="display: inline"] button { #novy-heslo-sila { display: inline-block; font-family: 'Montserrat', sans-serif; - font-weight: 100; + font-weight: 300; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-jemny); @@ -480,7 +484,7 @@ form[style*="display: inline"] button { #tlacitko-duvod, #novy-tlacitko-duvod { font-family: 'Montserrat', sans-serif; - font-weight: 100; + font-weight: 300; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-jemny); @@ -497,10 +501,10 @@ table { font-size: 0.78rem; } -/* === VELIKOST C: záhlaví tabulky === */ +/* === VELIKOST C: záhlaví tabulky – weight 500 pro lepší čitelnost === */ table th { font-family: 'Montserrat', sans-serif; - font-weight: 100; + font-weight: 500; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; @@ -518,8 +522,8 @@ table td { border: 1px solid var(--ocel); vertical-align: middle; font-family: 'IBM Plex Serif', Georgia, serif; - font-weight: 300; - font-size: 0.78rem; + font-weight: 200; + font-size: 0.875rem; } table tr:nth-child(even) td { @@ -557,8 +561,8 @@ code { ol, ul { padding-left: 1.4rem; font-family: 'IBM Plex Serif', Georgia, serif; - font-weight: 300; - font-size: 0.78rem; + font-weight: 200; + font-size: 0.875rem; } ol li, ul li { @@ -583,7 +587,7 @@ ol li, ul li { } h2, h3 { - font-size: 0.82rem; + font-size: 0.95rem; } table td form[style*="display:inline"],