fix menu button misalign on mobile

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,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>

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/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>.
+				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>
-				Find out how to <b>take your digital freedom back</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 {
@@ -319,7 +381,7 @@ figcaption {
 }
 
 .poster {
-	margin: 0 auto !important;
+	margin: 5em auto !important;
 	max-width: 40rem;
 	filter: drop-shadow(0 0 5em black);
 }