From 52bb0208a992bdc4fbb37b515f90ffc4106e06bd Mon Sep 17 00:00:00 2001 From: stepan Date: Wed, 18 Mar 2026 22:32:49 +0100 Subject: [PATCH] =?UTF-8?q?[ui]=20CSS=20=E2=80=93=20Montserrat=20+=20IBM?= =?UTF-8?q?=20Plex=20Serif,=20odd=C4=9Blova=C4=8De=20jako=20mezery=20#1414?= =?UTF-8?q?14,=20symetrick=C3=A9=20padding=20blok=C5=AF,=20odstran=C4=9Bny?= =?UTF-8?q?=20ve=C5=A1ker=C3=A9=20hr=20=C4=8D=C3=A1ry?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/auth-styl.css | 63 +++++++++++++++++++---------------------------- 1 file changed, 26 insertions(+), 37 deletions(-) diff --git a/css/auth-styl.css b/css/auth-styl.css index 1989d6f..9da0475 100644 --- a/css/auth-styl.css +++ b/css/auth-styl.css @@ -13,10 +13,10 @@ /* ------------------------------------------------------------ GOOGLE FONTS - Barlow Condensed – moderní bezpatkové, kapitálky pro nadpisy - Source Serif 4 – moderní patkové pro tělo textu + Montserrat – moderní bezpatkové, kapitálky pro nadpisy + IBM Plex Serif – moderní patkové pro tělo textu ------------------------------------------------------------ */ -@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=IBM+Plex+Serif:ital,wght@0,300;0,400;1,300&display=swap'); /* ------------------------------------------------------------ @@ -24,7 +24,7 @@ ------------------------------------------------------------ */ :root { /* Pozadí */ - --bg-hlavni: #141414; /* hlavní pozadí stránky – tmavší = "mezera" mezi sekcemi */ + --bg-hlavni: #141414; /* hlavní pozadí stránky = barva oddělovačů mezi bloky */ --bg-obsah: #222222; /* pozadí obsahových bloků (světlejší) */ --bg-prvek: #2c2c2c; /* pozadí inputů, tabulek, textarea */ --bg-prvek-focus: #333333; /* inputy při focusu */ @@ -73,7 +73,7 @@ html { body { background-color: var(--bg-hlavni); color: var(--text-hlavni); - font-family: 'Source Serif 4', Georgia, serif; + font-family: 'IBM Plex Serif', Georgia, serif; font-size: 1rem; font-weight: 300; line-height: 1.7; @@ -91,7 +91,7 @@ body { h1, h2, h3, table th, label { - font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; + font-family: 'Montserrat', 'Arial Narrow', sans-serif; } @@ -125,17 +125,17 @@ body > textarea { padding-right: var(--sekce-padding); } -body > h1 { padding-top: var(--sekce-padding); } -body > h2 { padding-top: 0.4rem; } -body > h3 { padding-top: var(--sekce-padding); } -body > p { padding-top: 0.5rem; } -body > form { padding-top: 0.5rem; padding-bottom: var(--sekce-padding); } -body > table { padding-top: 0.5rem; padding-bottom: var(--sekce-padding); +body > h1 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > h2 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > h3 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > p { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > form { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > table { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); padding-left: 0; padding-right: 0; } body > section { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } body > ol, -body > ul { padding-top: 0.5rem; padding-bottom: 0.7rem; } -body > textarea { padding-top: 0.3rem; padding-bottom: var(--sekce-padding); } +body > ul { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } +body > textarea { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } /* Nadpisy h1/h2 začínají nový vizuální blok – mezera nahoře */ body > h1 { @@ -166,9 +166,10 @@ body > hr { /* hr nemá bg-obsah, takže tvoří "tmavou mezeru" */ } -/* h2 hned za h1 patří ke stejné hlavičce – bez mezery */ +/* h2 hned za h1 patří ke stejné hlavičce – bez mezery nahoře */ body > h1 + h2 { margin-top: 0; + padding-top: 0; padding-bottom: var(--sekce-padding); } @@ -188,8 +189,6 @@ h1 { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; - border: none; - padding-bottom: 0; } h2 { @@ -206,8 +205,6 @@ h3 { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; - padding-bottom: 0.5rem; - border-bottom: 1px solid var(--akcent-okraj); } p { @@ -285,7 +282,7 @@ label:has(input[type="checkbox"]) { font-weight: 300; color: var(--text-hlavni); cursor: pointer; - font-family: 'Source Serif 4', Georgia, serif; + font-family: 'IBM Plex Serif', Georgia, serif; } @@ -303,7 +300,7 @@ input[type="password"] { border-radius: var(--polomer); padding: 0.45rem 0.7rem; font-size: 1rem; - font-family: 'Source Serif 4', Georgia, serif; + font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; transition: border-color 0.15s, background-color 0.15s; outline: none; @@ -378,7 +375,7 @@ button[type="button"] { border-radius: var(--polomer); padding: 0.5rem 1.2rem; font-size: 0.9rem; - font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; + font-family: 'Montserrat', 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; @@ -436,7 +433,7 @@ form[style*="display: inline"] button { #novy-heslo-sila { display: inline-block; font-size: 0.8rem; - font-family: 'Barlow Condensed', sans-serif; + font-family: 'Montserrat', sans-serif; letter-spacing: 0.04em; color: var(--text-jemny); margin-top: 0.25rem; @@ -445,7 +442,7 @@ form[style*="display: inline"] button { #tlacitko-duvod, #novy-tlacitko-duvod { font-size: 0.8rem; - font-family: 'Barlow Condensed', sans-serif; + font-family: 'Montserrat', sans-serif; color: var(--text-jemny); margin-left: 0.4rem; letter-spacing: 0.02em; @@ -480,7 +477,7 @@ table td { padding: 0.4rem 0.7rem; border: 1px solid var(--ocel); vertical-align: middle; - font-family: 'Source Serif 4', Georgia, serif; + font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; } @@ -520,7 +517,7 @@ ol, ul { padding-left: 1.5rem; margin-top: 0.3rem; margin-bottom: 0.3rem; - font-family: 'Source Serif 4', Georgia, serif; + font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 300; } @@ -592,17 +589,9 @@ ol li, ul li { /* ------------------------------------------------------------ ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách ------------------------------------------------------------ */ -@media (min-width: 700px) { - body { - background-image: - linear-gradient(to right, - var(--bg-hlavni) calc(50% - 340px), - #1c1c1c calc(50% - 340px), - #1c1c1c calc(50% + 340px), - var(--bg-hlavni) calc(50% + 340px) - ); - } -} +/* Na širších obrazovkách je body #141414 po celé šířce. + Světlejší bloky obsahu jsou omezeny na --pruh-max šířku, + takže po stranách přirozeně zůstává tmavé pozadí. */ /* ------------------------------------------------------------