stepan/MSPPPPaM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ui] CSS – Montserrat + IBM Plex Serif, oddělovače jako mezery #141414, symetrické padding bloků, odstraněny veškeré hr čáry

Browse Source
This commit is contained in:
stepan
2026-03-18 22:32:49 +01:00
parent f6e5695ef9
commit 52bb0208a9
1 changed files with 26 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/auth-styl.css
+26 -37
View File
@@ -13,10 +13,10 @@
/* ------------------------------------------------------------ /* ------------------------------------------------------------
GOOGLE FONTS GOOGLE FONTS
Barlow Condensed – moderní bezpatkové, kapitálky pro nadpisy Montserrat – moderní bezpatkové, kapitálky pro nadpisy
Source Serif 4 – moderní patkové pro tělo textu 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 { :root {
/* Pozadí */ /* 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-obsah: #222222; /* pozadí obsahových bloků (světlejší) */
--bg-prvek: #2c2c2c; /* pozadí inputů, tabulek, textarea */ --bg-prvek: #2c2c2c; /* pozadí inputů, tabulek, textarea */
--bg-prvek-focus: #333333; /* inputy při focusu */ --bg-prvek-focus: #333333; /* inputy při focusu */
@@ -73,7 +73,7 @@ html {
body { body {
background-color: var(--bg-hlavni); background-color: var(--bg-hlavni);
color: var(--text-hlavni); color: var(--text-hlavni);
font-family: 'Source Serif 4', Georgia, serif; font-family: 'IBM Plex Serif', Georgia, serif;
font-size: 1rem; font-size: 1rem;
font-weight: 300; font-weight: 300;
line-height: 1.7; line-height: 1.7;
@@ -91,7 +91,7 @@ body {
h1, h2, h3, h1, h2, h3,
table th, table th,
label { 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); padding-right: var(--sekce-padding);
} }
body > h1 { padding-top: var(--sekce-padding); } body > h1 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > h2 { padding-top: 0.4rem; } body > h2 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > h3 { padding-top: var(--sekce-padding); } body > h3 { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > p { padding-top: 0.5rem; } body > p { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > form { padding-top: 0.5rem; padding-bottom: var(--sekce-padding); } body > form { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > table { padding-top: 0.5rem; padding-bottom: var(--sekce-padding); body > table { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding);
padding-left: 0; padding-right: 0; } padding-left: 0; padding-right: 0; }
body > section { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); } body > section { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > ol, body > ol,
body > ul { padding-top: 0.5rem; padding-bottom: 0.7rem; } body > ul { padding-top: var(--sekce-padding); padding-bottom: var(--sekce-padding); }
body > textarea { padding-top: 0.3rem; 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 */ /* Nadpisy h1/h2 začínají nový vizuální blok – mezera nahoře */
body > h1 { body > h1 {
@@ -166,9 +166,10 @@ body > hr {
/* hr nemá bg-obsah, takže tvoří "tmavou mezeru" */ /* 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 { body > h1 + h2 {
margin-top: 0; margin-top: 0;
padding-top: 0;
padding-bottom: var(--sekce-padding); padding-bottom: var(--sekce-padding);
} }
@@ -188,8 +189,6 @@ h1 {
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
border: none;
padding-bottom: 0;
} }
h2 { h2 {
@@ -206,8 +205,6 @@ h3 {
font-weight: 700; font-weight: 700;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--akcent-okraj);
} }
p { p {
@@ -285,7 +282,7 @@ label:has(input[type="checkbox"]) {
font-weight: 300; font-weight: 300;
color: var(--text-hlavni); color: var(--text-hlavni);
cursor: pointer; 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); border-radius: var(--polomer);
padding: 0.45rem 0.7rem; padding: 0.45rem 0.7rem;
font-size: 1rem; font-size: 1rem;
font-family: 'Source Serif 4', Georgia, serif; font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300; font-weight: 300;
transition: border-color 0.15s, background-color 0.15s; transition: border-color 0.15s, background-color 0.15s;
outline: none; outline: none;
@@ -378,7 +375,7 @@ button[type="button"] {
border-radius: var(--polomer); border-radius: var(--polomer);
padding: 0.5rem 1.2rem; padding: 0.5rem 1.2rem;
font-size: 0.9rem; font-size: 0.9rem;
font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-family: 'Montserrat', 'Arial Narrow', sans-serif;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@@ -436,7 +433,7 @@ form[style*="display: inline"] button {
#novy-heslo-sila { #novy-heslo-sila {
display: inline-block; display: inline-block;
font-size: 0.8rem; font-size: 0.8rem;
font-family: 'Barlow Condensed', sans-serif; font-family: 'Montserrat', sans-serif;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--text-jemny); color: var(--text-jemny);
margin-top: 0.25rem; margin-top: 0.25rem;
@@ -445,7 +442,7 @@ form[style*="display: inline"] button {
#tlacitko-duvod, #tlacitko-duvod,
#novy-tlacitko-duvod { #novy-tlacitko-duvod {
font-size: 0.8rem; font-size: 0.8rem;
font-family: 'Barlow Condensed', sans-serif; font-family: 'Montserrat', sans-serif;
color: var(--text-jemny); color: var(--text-jemny);
margin-left: 0.4rem; margin-left: 0.4rem;
letter-spacing: 0.02em; letter-spacing: 0.02em;
@@ -480,7 +477,7 @@ table td {
padding: 0.4rem 0.7rem; padding: 0.4rem 0.7rem;
border: 1px solid var(--ocel); border: 1px solid var(--ocel);
vertical-align: middle; vertical-align: middle;
font-family: 'Source Serif 4', Georgia, serif; font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300; font-weight: 300;
} }
@@ -520,7 +517,7 @@ ol, ul {
padding-left: 1.5rem; padding-left: 1.5rem;
margin-top: 0.3rem; margin-top: 0.3rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
font-family: 'Source Serif 4', Georgia, serif; font-family: 'IBM Plex Serif', Georgia, serif;
font-weight: 300; font-weight: 300;
} }
@@ -592,17 +589,9 @@ ol li, ul li {
/* ------------------------------------------------------------ /* ------------------------------------------------------------
ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách ŠÍŘKA OBSAHU – jemný lem na širších obrazovkách
------------------------------------------------------------ */ ------------------------------------------------------------ */
@media (min-width: 700px) { /* Na širších obrazovkách je body #141414 po celé šířce.
body { Světlejší bloky obsahu jsou omezeny na --pruh-max šířku,
background-image: takže po stranách přirozeně zůstává tmavé pozadí. */
linear-gradient(to right,
var(--bg-hlavni) calc(50% - 340px),
#1c1c1c calc(50% - 340px),
#1c1c1c calc(50% + 340px),
var(--bg-hlavni) calc(50% + 340px)
);
}
}
/* ------------------------------------------------------------ /* ------------------------------------------------------------