redesign base

Makefile

@@ -1,6 +1,7 @@
-PAGES := index.html 404.html info.html javascript.html contact.html
+PAGES := index.html 404.html javascript.html contact.html
 SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico \
 				poster_cz.webp poster_en.webp poster_cz.jpg poster_en.jpg \
+				word_cloud_cz.png word_cloud_en.png background.jpg \
 				moon.svg sun.svg narrow_light.svg narrow_dark.svg wide_light.svg wide_dark.svg lang_cz.svg lang_en.svg \
 				styles.css icons.css \
 				countdown.js theme.js lang.js \
@@ -52,6 +53,14 @@ dst/poster_%.jpg: images/poster_%.png
 	@mkdir -p $(@D)
 	magick $< -resize 2000x2000 $@
 
+dst/word_cloud_%.png: images/word_cloud_%.png
+	@mkdir -p $(@D)
+	magick $< -resize 2000x2000 $@
+
+dst/%.jpg: images/%.jpg
+	@mkdir -p $(@D)
+	ln -f $< $@
+
 dst/%.webp: images/%.jpg
 	@mkdir -p $(@D)
 	magick $< $@

components/cz/header.html

@@ -4,7 +4,6 @@
 		<div class="header-subtitle">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();">
 		<img src="data:," alt="Přepínač jazyka" class="lang-switch" onclick="switch_lang();">
 	</div>

components/en/header.html

@@ -4,7 +4,6 @@
 		<div class="header-subtitle">at the Technical University in Liberec</div>
 	</div>
 	<div class="buttons">
-		<img src="data:," alt="Lightmode/darkmode switch" class="light-dark-switch" onclick="switch_theme();">
 		<img src="data:," alt="Wide/short layout switch" class="layout-switch" onclick="switch_layout();">
 		<img src="data:," alt="Language selector" class="lang-switch" onclick="switch_lang();">
 	</div>

doc/01_notes.md

@@ -15,8 +15,8 @@
 - Budova G
 
 # Web
-- Úvod nad ~~plakátem~~ fotkou s word cloudem
+<!-- Úvod nad ~~plakátem~~ fotkou s word cloudem -->
-- Odpočet dole (pod textem, nad fotkou)
+<!-- Odpočet dole (pod textem, nad fotkou) -->
 - Předělat index stránku do podoby plakátu
 <!-- - Info dopryč (spojit s indexem) -->
 <!-- - PDF s budovou G pryč -->

pages/cz/index.html

@@ -35,7 +35,7 @@
 			<div class="countdown">--:--:--:--</div>
 
 			<figure class="poster">
-				<img src="../poster_cz.webp" alt="Plakát na přednášku s Richardem Stallmanem">
+				<img src="../word_cloud_cz.png" alt="Plakát na přednášku s Richardem Stallmanem">
 			</figure>
 
 			<h1>Kdo je Richard Stallman?</h1>

pages/en/index.html

@@ -24,7 +24,7 @@
 			<div class="countdown">--:--:--:--</div>
 
 			<figure class="poster">
-				<img src="../poster_en.webp" alt="Poster for Richard Stallman's lecture">
+				<img src="../word_cloud_en.png" alt="Poster for Richard Stallman's lecture">
 			</figure>
 
 			<h1>Who is Richard Stallman?</h1>

styles/styles.css

@@ -1,14 +1,6 @@
 :root {
-	--light-fg-color: black;
-	--light-bg-color: white;
-	--light-alt-bg-color: #FFFFD0;
-	--light-field-hover-bg-color: #F0F0F0;
-	--light-field-active-bg-color: #E0E0E0;
-	--light-link-idle-color: darkred;
-	--light-sep-color: gainsboro;
-	
 	--dark-fg-color: white;
-	--dark-bg-color: #202020;
+	--dark-bg-color: black;
 	--dark-alt-bg-color: #101010;
 	--dark-field-hover-bg-color: #000000;
 	--dark-field-active-bg-color: #404040;
@@ -25,76 +17,38 @@
 	--text-subtle-color: gray;
 }
 
-@media (prefers-color-scheme: light) {
+:root {
-	:root {
+	--fg-color: var(--dark-fg-color);
-		--fg-color: var(--light-fg-color);
+	--bg-color: var(--dark-bg-color);
-		--bg-color: var(--light-bg-color);
+	--alt-bg-color: var(--dark-alt-bg-color);
-		--alt-bg-color: var(--light-alt-bg-color);
+	--field-hover-bg-color: var(--dark-field-hover-bg-color);
-		--field-hover-bg-color: var(--light-field-hover-bg-color);
+	--field-active-bg-color: var(--dark-field-active-bg-color);
-		--field-active-bg-color: var(--light-field-active-bg-color);
+	--link-idle-color: var(--dark-link-idle-color);
-		--link-idle-color: var(--light-link-idle-color);
 
-		--theme-switch-icon: var(--light-theme-switch-icon);
+	--theme-switch-icon: var(--dark-theme-switch-icon);
-		--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
+	--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
-		--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
+	--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
-		--fg-gnu-head: var(--dark-gnu-head);
+	--fg-gnu-head: var(--light-gnu-head);
-		--bg-gnu-head: var(--light-gnu-head);
+	--bg-gnu-head: var(--dark-gnu-head);
 
-		--sep-color: var(--light-sep-color);
+	--sep-color: var(--dark-sep-color);
-	}
-
-	[data-color-scheme="invert"] {
-		--fg-color: var(--dark-fg-color);
-		--bg-color: var(--dark-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);
-		--link-idle-color: var(--dark-link-idle-color);
-
-		--theme-switch-icon: var(--dark-theme-switch-icon);
-		--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
-		--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);
-	}
 }
 
-@media (prefers-color-scheme: dark) {
+[data-color-scheme="invert"] {
-	:root {
+	--fg-color: var(--light-fg-color);
-		--fg-color: var(--dark-fg-color);
+	--bg-color: var(--light-bg-color);
-		--bg-color: var(--dark-bg-color);
+	--alt-bg-color: var(--light-alt-bg-color);
-		--alt-bg-color: var(--dark-alt-bg-color);
+	--field-hover-bg-color: var(--light-field-hover-bg-color);
-		--field-hover-bg-color: var(--dark-field-hover-bg-color);
+	--field-active-bg-color: var(--light-field-active-bg-color);
-		--field-active-bg-color: var(--dark-field-active-bg-color);
+	--link-idle-color: var(--light-link-idle-color);
-		--link-idle-color: var(--dark-link-idle-color);
 
-		--theme-switch-icon: var(--dark-theme-switch-icon);
+	--theme-switch-icon: var(--light-theme-switch-icon);
-		--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
+	--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
-		--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
+	--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
-		--fg-gnu-head: var(--light-gnu-head);
+	--fg-gnu-head: var(--dark-gnu-head);
-		--bg-gnu-head: var(--dark-gnu-head);
+	--bg-gnu-head: var(--light-gnu-head);
 
-		--sep-color: var(--dark-sep-color);
+	--sep-color: var(--light-sep-color);
-	}
-	
-	[data-color-scheme="invert"] {
-		--fg-color: var(--light-fg-color);
-		--bg-color: var(--light-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);
-		--link-idle-color: var(--light-link-idle-color);
-
-		--theme-switch-icon: var(--light-theme-switch-icon);
-		--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
-		--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);
-	}
 }
 
 :root {
@@ -122,6 +76,10 @@ html {
 }
 
 body {
+	background-image: url("background.jpg");
+	background-attachment: fixed;
+	background-size: cover;
+	background-position: center;
 	font-family: "Noto Sans", sans-serif;
 	font-size: 16px;
 	display: flex;
@@ -129,13 +87,13 @@ body {
 	color: var(--fg-color);
 	background-color: var(--bg-color);
 	margin: 0;
+	min-height: 100vh;
 }
 
 header {
 	display: flex;
 	padding: 1.5em 0;
 	position: relative;
-	background-color: var(--bg-color);
 	align-items: center;
 	justify-content: space-between;
 	width: min(90%, 50em);
@@ -214,7 +172,7 @@ header * {
 .countdown {
 	font-family: monospace;
 	font-weight: bold;
-	font-size: 2.5em;
+	font-size: 2em;
 	text-align: center;
 	margin: 1em auto;
 	padding: 0 .5em;
@@ -225,7 +183,7 @@ header * {
 
 @media only screen and (min-width: 50rem) {
 	.countdown {
-		font-size: 4em;
+		font-size: 3em;
 	}
 }
 
@@ -277,6 +235,7 @@ footer>* {
 }
 
 h1 {
+	margin: 2em 0;
 	font-size: 1.5em;
 }
 
@@ -328,7 +287,7 @@ figcaption {
 
 .poster {
 	margin: 0 auto !important;
-	max-width: 50rem;
+	max-width: 40rem;
 }
 
 nav ul {