clean-up the design a bit

components/cz/header.html

@@ -1,6 +1,10 @@
 <header>
+	<div>
 		<div class="header-title">Svobodný software Liberec</div>
 		<div class="header-subtitle">Richard Stallman na Technické univerzitě v Liberci</div>
+	</div>
+	<div class="buttons">
 		<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
 		<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
+	</div>
 </header>

components/cz/nav.html

@@ -1,8 +1,10 @@
 <nav>
+	<div>
 		<ul>
 			<li><a href=".">Domovská stránka</a></li>
 			<li><a href="stallman">Richard Stallman</a></li>
 			<li><a href="free">Svobodný software</a></li>
 			<li><a href="javascript">JavaScript</a></li>
 		</ul>
+	</div>
 </nav>

components/en/header.html

@@ -1,6 +1,10 @@
 <header>
+	<div>
 		<div class="header-title">Software Libre Liberec</div>
 		<div class="header-subtitle">Richard Stallman at Technical University of Liberec</div>
+	</div>
+	<div class="buttons">
 		<img src="data:," alt="Přepínač světlého a tmavého režimu" class="light-dark-switch" onclick="switch_theme();">
 		<img src="data:," alt="Přepínač širokého a úzkého rozvržení" class="layout-switch" onclick="switch_layout();">
+	</div>
 </header>

components/en/nav.html

@@ -1,8 +1,10 @@
 <nav>
+	<div>
 		<ul>
 			<li><a href=".">Homepage</a></li>
 			<li><a href="stallman">Richard Stallman</a></li>
 			<li><a href="free">Software Libre</a></li>
 			<li><a href="javascript">JavaScript</a></li>
 		</ul>
+	</div>
 </nav>

styles.css

@@ -1,21 +1,19 @@
 :root {
 	--light-fg-color: black;
 	--light-bg-color: white;
-	--light-outer-shadow-color: #BBBBBB;
-	--light-outer-bg-color: #E4E4E4;
 	--light-alt-bg-color: #FFFFD0;
 	--light-field-hover-bg-color: #F0F0F0;
 	--light-field-active-bg-color: #E0E0E0;
-	--light-link-idle-color: blue;
+	--light-link-idle-color: darkred;
+	--light-sep-color: gainsboro;
 	
 	--dark-fg-color: white;
 	--dark-bg-color: #202020;
-	--dark-outer-shadow-color: #000000;
-	--dark-outer-bg-color: black;
 	--dark-alt-bg-color: #101010;
 	--dark-field-hover-bg-color: #000000;
 	--dark-field-active-bg-color: #404040;
-	--dark-link-idle-color: lightblue;
+	--dark-link-idle-color: #ff8e8e;
+	--dark-sep-color: #2e2e2e;
 }
 
 :root {
@@ -24,16 +22,13 @@
 	--nav-fg-color: white;
 	--nav-bg-color: darkred;
 	--nav-bg-color-selected: #C00000;
-	--sep-color: gray;
+	--text-subtle-color: gray;
 }
 
-/* Vím, že by se dalo použít light-dark(...). Ale to funguje jen v nejnovějších prohlížečích. */
 @media (prefers-color-scheme: light) {
 	:root {
 		--fg-color: var(--light-fg-color);
 		--bg-color: var(--light-bg-color);
-		--outer-shadow-color: var(--light-outer-shadow-color);
-		--outer-bg-color: var(--light-outer-bg-color);
 		--alt-bg-color: var(--light-alt-bg-color);
 		--field-hover-bg-color: var(--light-field-hover-bg-color);
 		--field-active-bg-color: var(--light-field-active-bg-color);
@@ -44,13 +39,13 @@
 		--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
 		--fg-gnu-head: var(--dark-gnu-head);
 		--bg-gnu-head: var(--light-gnu-head);
+
+		--sep-color: var(--light-sep-color);
 	}
 
 	[data-color-scheme="invert"] {
 		--fg-color: var(--dark-fg-color);
 		--bg-color: var(--dark-bg-color);
-		--outer-shadow-color: var(--dark-outer-shadow-color);
-		--outer-bg-color: var(--dark-outer-bg-color);
 		--alt-bg-color: var(--dark-alt-bg-color);
 		--field-hover-bg-color: var(--dark-field-hover-bg-color);
 		--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -61,6 +56,8 @@
 		--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
 		--fg-gnu-head: var(--light-gnu-head);
 		--bg-gnu-head: var(--dark-gnu-head);
+
+		--sep-color: var(--dark-sep-color);
 	}
 }
 
@@ -68,8 +65,6 @@
 	:root {
 		--fg-color: var(--dark-fg-color);
 		--bg-color: var(--dark-bg-color);
-		--outer-shadow-color: var(--dark-outer-shadow-color);
-		--outer-bg-color: var(--dark-outer-bg-color);
 		--alt-bg-color: var(--dark-alt-bg-color);
 		--field-hover-bg-color: var(--dark-field-hover-bg-color);
 		--field-active-bg-color: var(--dark-field-active-bg-color);
@@ -80,13 +75,13 @@
 		--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
 		--fg-gnu-head: var(--light-gnu-head);
 		--bg-gnu-head: var(--dark-gnu-head);
+
+		--sep-color: var(--dark-sep-color);
 	}
 	
 	[data-color-scheme="invert"] {
 		--fg-color: var(--light-fg-color);
 		--bg-color: var(--light-bg-color);
-		--outer-shadow-color: var(--light-outer-shadow-color);
-		--outer-bg-color: var(--light-outer-bg-color);
 		--alt-bg-color: var(--light-alt-bg-color);
 		--field-hover-bg-color: var(--light-field-hover-bg-color);
 		--field-active-bg-color: var(--light-field-active-bg-color);
@@ -97,6 +92,8 @@
 		--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
 		--fg-gnu-head: var(--dark-gnu-head);
 		--bg-gnu-head: var(--light-gnu-head);
+
+		--sep-color: var(--light-sep-color);
 	}
 }
 
@@ -109,39 +106,49 @@
 }
 
 html {
-	margin: 0;
+	background-color: var(--bg-color);
-	background-color: var(--outer-bg-color);
 	min-height: calc(100% - 32px);
+	margin: 0;
 }
 
 body {
-	font-family: "Noto Sans", sans-serif; /* Svobodný font. */
+	font-family: "Noto Sans", sans-serif;
 	font-size: 16px;
 	display: flex;
 	flex-direction: column;
 	color: var(--fg-color);
 	background-color: var(--bg-color);
+	margin: 0;
 }
 
 header {
-	padding: calc(16px - 8px) 16px;
+	display: flex;
+	padding: 1.5em 0;
 	position: relative;
 	background-color: var(--bg-color);
+	align-items: center;
+	justify-content: space-between;
+	width: min(90%, 50em);
+	margin: auto;
+}
+
+[data-layout="wide"] header {
+	width: 90%;
+}
+
+header .buttons {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .light-dark-switch {
-	position: absolute;
-	top: 16px;
-	right: 16px;
 	cursor: pointer;
 	content: var(--theme-switch-icon);
 	width: 20px;
 }
 
 .layout-switch {
-	position: absolute;
-	top: 48px;
-	right: 16px;
 	cursor: pointer;
 	content: var(--layout-switch-icon);
 	width: 20px;
@@ -156,11 +163,13 @@ header * {
 }
 
 .header-title {
-	font-size: 32px;
+	font-size: 2em;
+	font-weight: bold;
 }
 
 .header-subtitle {
-	font-size: 24px;
+	color: var(--text-subtle-color);
+	font-size: 1.3em;
 }
 
 .full-width {
@@ -204,9 +213,24 @@ nav {
 	user-select: none;
 }
 
+nav div {
+	width: min(90%, 50em);
+	margin: auto;
+}
+
+[data-layout="wide"] nav div {
+	width: 90%;
+}
+
 main {
 	flex-grow: 1;
 	padding: 16px;
+	width: min(90%, 50em);
+	margin: auto;
+}
+
+[data-layout="wide"] main {
+	width: 90%;
 }
 
 .gnu-head {
@@ -214,8 +238,9 @@ main {
 }
 
 footer {
-	border-top: 2px solid var(--sep-color);
+	border-top: 1px solid var(--sep-color);
-	padding: calc(16px - 8px) 16px;
+	color: gray;
+	padding: 1em;
 	text-align: center;
 }
 
@@ -224,15 +249,15 @@ footer>* {
 }
 
 h1 {
-	font-size: 32px;
+	font-size: 1.5em;
 }
 
 h2 {
-	font-size: 26px;
+	font-size: 1.25em;
 }
 
 h3 {
-	font-size: 20px;
+	font-size: 1em;
 }
 
 table {
@@ -260,8 +285,6 @@ ol li {
 		margin: 0 0 16px 16px;
 		float: right;
 	}
-
-	/* Jinak to neudělá nic. */
 }
 
 figure img,svg,inserted-svg {
@@ -278,36 +301,39 @@ nav ul {
 	height: 100%;
 	display: flex;
 	flex-direction: row;
+	justify-content: center;
+	align-items: center;
 	margin: 0;
 	padding: 0;
 	list-style-type: none;
 }
 
-@media (width < 750px) {
+[data-layout="wide"] nav ul {
+	justify-content: left;
+	margin-left: -1em;
+}
+
+@media (width < 50rem) {
 	nav ul {
 		flex-direction: column;
 	}
 }
 
 nav ul li {
-	flex-grow: 1;
-	flex-basis: 0;
-	display: flex;
 	margin: 0;
 }
 
 nav ul li a {
-	display: flex;
+	display: block;
-	flex-direction: column;
-	justify-content: center;
 	
-	flex-grow: 1;
+	padding: .5em 1em;
-	padding: 8px 16px;
 
 	text-align: center;
 	text-decoration: none;
 	color: var(--nav-fg-color);
 	
+	font-weight: bold;
+
 	transition: background-color .3s;
 }
 
@@ -324,15 +350,9 @@ nav ul li a:visited {
 	color: var(--nav-fg-color);
 }
 
-@media (width >= 900px) {
+@media (width >= 50rem) {
-	html:not([data-layout="wide"]) {
-		padding: 16px 0;
-	}
-
 	:not([data-layout="wide"]) body {
 		margin: 0 auto;
-		max-width: 800px;
-		box-shadow: 0 0 5px 5px var(--outer-shadow-color);
 	}
 	
 	[data-layout="wide"] body {
@@ -340,7 +360,7 @@ nav ul li a:visited {
 	}
 }
 
-@media (width < 900px) {
+@media (width < 50rem) {
 	body {
 		margin: 0;
 	}