fix menu button misalign on mobile

Makefile

@@ -4,13 +4,16 @@ SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico \
 				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 \
-				jetbrains_mono.woff2
+				countdown.js theme.js lang.js
+STATIC_ASSETS := jetbrains_mono.woff2 poster_cz.png poster_en.png
 SEARCH_REPLACE := lib/search_and_replace/target/release/search_and_replace
 COMPONENTS := head.html header.html nav.html footer.html
 
 .PHONY: build
-build: $(PAGES:%=dst/cz/%) $(PAGES:%=dst/en/%) $(SHARED_FILES:%=dst/%)
+build: $(PAGES:%=dst/cz/%) $(PAGES:%=dst/en/%) $(SHARED_FILES:%=dst/%) $(STATIC_ASSETS:%=dst/%)
+
+.PHONY: pack
+pack: dst/libre_liberec.tar.gz
 
 .PHONY: clean
 clean:
@@ -69,6 +72,10 @@ dst/%.webp: images/%.jpg
 	@mkdir -p $(@D)
 	magick $< $@
 
+dst/%.png: images/%.png
+	@mkdir -p $(@D)
+	ln -f $< $@
+
 dst/%.svg: icons/%.svg
 	@mkdir -p $(@D)
 	ln -f $< $@
@@ -80,3 +87,6 @@ dst/favicon.ico: images/favicon.ico
 dst/%.woff2: fonts/%.woff2
 	@mkdir -p $(@D)
 	ln -f $< $@
+
+dst/libre_liberec.tar.gz: $(PAGES:%=dst/cz/%) $(PAGES:%=dst/en/%) $(SHARED_FILES:%=dst/%)
+	tar --transform='s,^dst/,libre_liberec/,' -czvf $@ $^ --owner=0 --group=0

components/cz/nav.html

@@ -1,3 +1,11 @@
+<input type="checkbox" id="menu-trigger">
+<label class="menu-button" for="menu-trigger">
+	<div class="inner">
+		<div class="upper"></div>
+		<div class="center"></div>
+		<div class="lower"></div>
+	</div>
+</label>
 <nav>
 	<div>
 		<ul>

components/en/footer.html

@@ -1,5 +1,5 @@
 <footer>
-	<p>This lecture is organized by the <a href="https://www.fm.tul.cz">Faculty of mechatronics, informatics and interdisciplinary studies</a> at the <a href="https://www.tul.cz">Technical university in Liberec</a>.</p>
+	<p>This lecture is organized by the <a href="https://www.fm.tul.cz">Faculty of mechatronics, informatics and interdisciplinary studies</a> at the <a href="https://www.tul.cz">Technical University of Liberec</a>.</p>
 	<p>This website falls under the GNU Free Documentation License v1.3.</p>
 	<p>&copy; <a href="https://zumepro.cz/">Zumepro</a>, 2025</p>
 </footer>

components/en/header.html

@@ -1,7 +1,7 @@
 <header>
 	<div>
 		<div class="header-title">Dr Richard Stallman</div>
-		<div class="header-subtitle">at the Technical University in Liberec</div>
+		<div class="header-subtitle">at the Technical University of Liberec</div>
 	</div>
 	<div class="buttons">
 		<img src="data:," alt="Wide/short layout switch" class="layout-switch" onclick="switch_layout();">

components/en/nav.html

@@ -1,9 +1,17 @@
+<input type="checkbox" id="menu-trigger">
+<label class="menu-button" for="menu-trigger">
+	<div class="inner">
+		<div class="upper"></div>
+		<div class="center"></div>
+		<div class="lower"></div>
+	</div>
+</label>
 <nav>
 	<div>
 		<ul>
 			<li><a href=".">Home</a></li>
 			<li><a href="contact">Contact</a></li>
-			<li><a href="downloads">Ke stažení</a></li>
+			<li><a href="downloads">For Download</a></li>
 			<li><a href="javascript">JavaScript</a></li>
 		</ul>
 	</div>

pages/cz/downloads.html

@@ -34,6 +34,9 @@
 			<p><a href="/poster_en.jpg" download>
 				Plakát v angličtině (1414x2000 JPG - určeno pro webovou distribuci)
 			</a></p>
+
+			<h2>Zdrojové soubory webu</h2>
+			<p><a href="/libre_liberec.tar.gz">Kód a soubory (.tar.gz)</a></p>
 		</main>
 		<!--#include virtual="components/footer.html" -->
 	</body>

pages/cz/index.html

@@ -24,6 +24,19 @@
 
 			<div class="countdown">--:--:--:--</div>
 
+			<h1>Představení tématu</h1>
+			<p>
+				V digitální společnosti existuje celá řada <b>hrozeb pro svobodu</b>. Patří mezi ně <b>nesvobodný software</b>, <b>masivní dohled</b> a <b>cenzura</b>.
+				<br><br>
+				Nesvobodné programy jsou často navrženy tak, aby <b>omezovaly uživatele</b>, <b>ovládaly je</b> nebo s <b>nimi manipulovaly</b>. Cílem války proti sdílení je zabránit uživatelům ve sdílení kopií publikovaných autorských děl. Počítače pro hlasování činí <b>výsledky voleb nedůvěryhodnými</b>.
+				<br><br>
+				Další hrozby pocházejí z používání webových služeb, které zavádějí společnosti, jež mohou <b>stanovit jakékoli podmínky</b>.
+				<br><br>
+				A konečně, většina internetových činností (kromě těch, které existovaly před rokem 2000) je nejistá, <b>závislá na povolení jedné společnosti</b>.
+				<br><br>
+				Všechny tyto hrozby mají více nebo méně původ v používání nesvobodného softwaru. Proto je svobodný software první boj na cestě k <b>osvobození digitální společnosti</b>.
+			</p>
+
 			<figure class="poster">
 				<img src="../word_cloud_cz.png" alt="Plakát na přednášku s Richardem Stallmanem">
 			</figure>

pages/en/downloads.html

@@ -34,6 +34,9 @@
 			<p><a href="/poster_cz.jpg" download>
 				Poster in Czech (1414x2000 JPG - for web distribution)
 			</a></p>
+
+			<h2>Web source files</h2>
+			<p><a href="/libre_liberec.tar.gz">Source code and files (.tar.gz)</a></p>
 		</main>
 		<!--#include virtual="components/footer.html" -->
 	</body>

pages/en/index.html

@@ -11,18 +11,37 @@
 		<main>
 			<p>
 				The <b><a href="https://www.fm.tul.cz">Faculty of Mechatronics</a></b>
-				invites you to a lecture about <b>freedom</b> in the digital society with <b>Richard Stallman</b>.
-			</p>
-			<p>
-				Find out how to <b>take your digital freedom back</b>.
+				invites you to a lecture about <b>free software</b> and <b>freedom</b> in the digital society with <b>Richard Stallman</b>.
 			</p>
 
 			<p>
-				The lecture will take place on the <b>7th of May 2025 from 16:30</b> in the auditorium of building G at the Technical university of Liberec.
+				The lecture will take place on the <b>7th of May 2025 from 16:30</b> in the auditorium of building G at the Technical University of Liberec.
 			</p>
 
+
 			<div class="countdown">--:--:--:--</div>
 
+			<h1>Topic introduction</h1>
+			<p>
+				There are many <b>threats to freedom</b> in the digital society.  They
+				include <b>nonfree software</b>, <b>massive surveillance</b>, and <b>censorship</b>.
+				<br><br>
+				Nonfree proprams are often designed to <b>restrict users</b>, <b>control
+				users</b> or <b>manipulate uesers</b>. The War on Sharing aims to stop users
+				from sharing copies of published works. Computers for voting make
+				<b>election results untrustworthy</b>.
+				<br><br>
+				Other threats come from use of web services, implemented by
+				companies that can impose <b>any conditions whatsoever</b>.
+				<br><br>
+				Finally, most internet activities (aside from those which existed
+				before 2000) are precarious, <b>dependent on permission from one company</b>.
+				<br><br>
+				All of these threats originate more or less in the use of nonfree
+				software. That is why free software is the first battle in
+				the <b>liberation of the digital society</b>.
+			</p>
+
 			<figure class="poster">
 				<img src="../word_cloud_en.png" alt="Poster for Richard Stallman's lecture">
 			</figure>
@@ -103,7 +122,7 @@
 			<div>
 				<h2>How do I find the auditorium where the lecture will take place?</h2>
 				<p style="margin: 0 0 15px 15px;">
-					The auditorium is located in building G at the Technical university of Liberec.
+					The auditorium is located in building G at the Technical University of Liberec.
 					More precisely, its coordinates are <a href="geo:50.773395,15.076628?z=19">50.773395,15.076628</a>.
 				</p>
 				<p style="margin: 0 0 15px 15px;">And below is a map with its location.</p>

styles/styles.css

@@ -84,6 +84,7 @@ body {
 	line-height: 1.8em;
 	word-spacing: .1em;
 	font-weight: 150;
+	letter-spacing: -.05ch;
 	display: flex;
 	flex-direction: column;
 	color: var(--fg-color);
@@ -114,6 +115,8 @@ header .buttons {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;
+	padding-left: 1em;
 }
 
 .light-dark-switch {
@@ -181,7 +184,7 @@ header * {
 	font-weight: bold;
 	font-size: 2em;
 	text-align: center;
-	margin: 1em auto;
+	margin: 2em auto;
 	padding: 0 .5em;
 	font-family: JetBrains Mono, monospace;
 	width: fit-content;
@@ -219,10 +222,69 @@ nav div {
 	width: 90%;
 }
 
+.menu-button {
+	display: none;
+	width: 100%;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	margin: 1em 0;
+}
+
+.menu-button .inner {
+	display: flex;
+	flex-direction: column;
+}
+
+.menu-button .inner div {
+	display: block;
+	transition: .2s ease opacity, .2s ease transform, .2s ease width;
+	height: 3px;
+	width: 30px;
+	background-color: white;
+	border-radius: .1em;
+	margin: 3px 0;
+}
+
+#menu-trigger:checked + .menu-button .center {
+	width: 0;
+	transform: translateX(4px);
+}
+
+#menu-trigger:checked + .menu-button .upper {
+	transform: translateY(100%) translateY(6px) rotate(45deg);
+}
+
+#menu-trigger:checked + .menu-button .lower {
+	transform: translateY(-100%) translateY(-6px) rotate(-45deg);
+}
+
+#menu-trigger {
+	display: none;
+}
+
 @media only screen and (max-width: 50rem) {
+	.menu-button {
+		display: flex;
+	}
+
+	#menu-trigger ~ nav {
+		opacity: 0;
+	}
+
+	#menu-trigger:checked ~ nav {
+		opacity: 1;
+		height: 11.25em;
+	}
+
 	nav {
+		transition: .25s ease height, .25s ease opacity;
 		border-radius: 0;
 		width: 100%;
+		height: 0;
+		overflow: hidden;
+		margin-bottom: 0;
 	}
 
 	nav div {
@@ -252,10 +314,9 @@ footer {
 	width: fit-content;
 	margin: 2em auto;
 	margin-top: 4em;
-	font-size: .8em;
+	font-size: .9em;
 	word-spacing: 0em;
 	line-height: 1em;
-	letter-spacing: 0em;
 }
 
 footer>* {
@@ -320,7 +381,7 @@ figcaption {
 }
 
 .poster {
-	margin: 0 auto !important;
+	margin: 5em auto !important;
 	max-width: 40rem;
 	filter: drop-shadow(0 0 5em black);
 }