add bio by rms

Makefile

@@ -1,16 +1,19 @@
-PAGES := index.html 404.html javascript.html contact.html
+PAGES := index.html 404.html javascript.html contact.html downloads.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.jpg word_cloud_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 \
-				jetbrains_mono.ttf
+				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:
@@ -53,6 +56,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/background.jpg: images/background.jpg
+	@mkdir -p $(@D)
+	magick $< -quality 80 $@
+
 dst/%.jpg: images/%.jpg
 	@mkdir -p $(@D)
 	ln -f $< $@
@@ -61,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 $< $@
@@ -69,6 +84,9 @@ dst/favicon.ico: images/favicon.ico
 	@mkdir -p $(@D)
 	ln -f $< $@
 
-dst/%.ttf: fonts/%.ttf
+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/header.html

@@ -1,10 +1,9 @@
 <header>
 	<div>
-		<div class="header-title">Dr. Richard Stallman</div>
+		<div class="header-title">Dr Richard Stallman</div>
 		<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/cz/nav.html

@@ -1,8 +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=".">Domů</a></li>
 			<li><a href="contact">Kontakt</a></li>
+			<li><a href="downloads">Ke stažení</a></li>
 			<li><a href="javascript">JavaScript</a></li>
 		</ul>
 	</div>

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,10 +1,9 @@
 <header>
 	<div>
-		<div class="header-title">Dr. Richard Stallman</div>
-		<div class="header-subtitle">at the Technical University in Liberec</div>
+		<div class="header-title">Dr Richard Stallman</div>
+		<div class="header-subtitle">at the Technical University of 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>

components/en/nav.html

@@ -1,8 +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">For Download</a></li>
 			<li><a href="javascript">JavaScript</a></li>
 		</ul>
 	</div>

doc/01_notes.md

@@ -13,13 +13,18 @@
 - Bio Stallman blíž info packet (jak to chtěl Stallman)
 - Vstup zdarma
 - Budova G
+- Text blíž webu
+- Mnoha dalšího pryč
+- Bio Stallmana pryč
+- FSF do word cloudu
 
 # Web
-- Úvod nad ~~plakátem~~ fotkou s word cloudem
-- Odpočet dole (pod textem, nad fotkou)
+<!-- Úvod nad ~~plakátem~~ fotkou s word cloudem -->
+<!-- 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č -->
+- Ke stažení
 
 ### Index
 <!-- - Úvod (fakulta mechatroniky Vás zve...) -->
@@ -29,7 +34,7 @@
 - Design plakátu (hlavně **obrázek Stallmana, word cloud**)
 <!-- - Hodiny pod text (před fotku) -->
 <!-- - Nad hodinama "Vstup zdarma" -->
-<!-- - Pro koho je přednáška (FAQ) - každý si tam najde to svoje -->
+- Pro koho je přednáška (FAQ) - každý si tam najde to svoje
 <!-- - Obsah přednášky (co po přednášce - fotky, suvenýry) -->
 
 Sekce indexu:

doc/02_notes.md

@@ -0,0 +1,2 @@
+# Pro Ondru (hlavně neříkat nahlas)
+- Ztučnit O přednášce

pages/cz/downloads.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="cs">
+	<head>
+		<!--#include virtual="components/head.html" -->
+		<title>Ke stažení - Svobodný software Liberec</title>
+		<meta name="description" content="Materiály ke stažení ohledně této stránky.">
+	</head>
+	<body>
+		<!--#include virtual="components/header.html" -->
+		<!--#include virtual="components/nav.html" -->
+		<main>
+			<h1>Ke stažení</h1>
+
+			<p>
+				Všechny obrázky ke stažení podléhají licenci <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a>.
+			</p>
+
+			<h2>Plakát v češtině</h2>
+
+			<p><a href="/poster_cz.png" download>
+				Plakát v češtině (4960x7016 PNG - určeno pro tisk)
+			</a></p>
+
+			<p><a href="/poster_cz.jpg" download>
+				Plakát v češtině (1414x2000 JPG - určeno pro webovou distribuci)
+			</a></p>
+
+			<h2>Plakát v angličtině</h2>
+
+			<p><a href="/poster_en.png" download>
+				Plakát v angličtině (4960x7016 PNG - určeno pro tisk)
+			</a></p>
+
+			<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>
+</html>
+

pages/cz/index.html

@@ -10,22 +10,12 @@
 		<!--#include virtual="components/nav.html" -->
 		<main>
 			<p>
-				<!--
-				Omlouvám se všem vedoucím fakulty, ale její plný název je skutečně odporný.
-				Klidně si odkomentujte následující řádek.
-				Původně jsem chtěl plný název fakulty zachovat, ale tento první odstavec
-				(aneb první věc, kterou všichni uvidí) vypadal skutečně příšerně.
-
-				S pozdravem
-				Michal Procházka
-				-->
-				<!-- Fakulta mechatroniky, informatiky a mezioborových studií Technické univerzity v Liberci -->
-				<b><a href="https://www.fm.tul.cz">FM TUL</a></b>
-				Vás zve na na přednášku o <b>svobodě</b> v digitální společnosti s <b>Richardem Stallmanem</b>.
+				<b><a href="https://www.fm.tul.cz">Fakulta mechatroniky</a></b>
+				Vás zve na na přednášku o <b>svobodném softwaru</b> a <b>svobodě</b> v digitální společnosti s <b>Richardem Stallmanem</b>.
 			</p>
 
 			<p>
-				Zjistěte, jak si můžete <b>vzít zpět svou svobodu</b>.
+				Zjistěte, jak si můžete <b>vzít zpět svou digitální svobodu</b>.
 			</p>
 
 			<p>
@@ -34,42 +24,48 @@
 
 			<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.jpg" 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>
 
-			<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc1.jpg">
-				<figure class="aside">
-					<img src="../stallman.webp" alt="Richard Stallman">
-					<figcaption>Richard Stallman, 2024</figcaption>
-				</figure>
-			</a>
-
 			<p>
-				Dr. Richard Stallman v roce 1983 založil hnutí svobodného softwaru
-				a následující rok započal vývoj operačního systému GNU
+				Dr Richard Stallman v roce 1983 založil <b>hnutí svobodného softwaru</b>
+				a následující rok započal vývoj <b>operačního systému GNU</b>
 				(vizte <a href="https://www.gnu.org">www.gnu.org</a>).
 				GNU je svobodný software, každý má možnost ho množit
 				a šířit dál, bez změn nebo i se změnami.
-				GNU/Linux (operační systém GNU s jádrem <a href="https://kernel.org/">Linux</a>)
-				se dnes využívá na desítkách milionů osobních počítačů.
+				<b>GNU/Linux</b> (operační systém GNU s jádrem <a href="https://kernel.org/">Linux</a>)
+				se dnes využívá na <b>desítkách milionů osobních počítačů</b>.
 			</p>
 
 			<p>
-				Stallmanovi byla udělena <i>Cena Grace Hopperové</i> a <i>Cena Softwarových Systémů</i>
+				Stallmanovi byla udělena <b>Cena Grace Hopperové</b> a <b>Cena Softwarových Systémů</b>
 				neziskovou organizací Association for Computing Machinery,
-				<i>Cena za sociální/ekonomické zlepšení</i> organizací Takeda Foundation a
-				<i>Cena Electronic Frontier Foundation</i> a mnoho čestných doktorátů.
-				Stallman je členem programu <i>MacArthur Fellowship</i>
-				a je členem <i><a href="https://www.internethalloffame.org/">Síně slávy Internetu</a></i>.
+				<b>Cena za sociální/ekonomické zlepšení</b> organizací Takeda Foundation a
+				<b>Cena Electronic Frontier Foundation</b> a mnoho čestných doktorátů.
+				Stallman je členem programu <b>MacArthur Fellowship</b>
+				a je členem <a href="https://www.internethalloffame.org/">Síně slávy Internetu</a>.
 				Pokud vás zajímají i další jeho projekty nebo myšlenky, můžete navštívit jeho
-				<i><a href="https://stallman.org">osobní stránky</a></i>, kam pravidelně přidává nový obsah.
+				<a href="https://stallman.org">osobní stránky</a>, kam pravidelně přidává nový obsah.
 			</p>
 
 			<p>
-				Dr. Richard Stallman<br>
+				Dr <b>Richard Stallman</b><br>
 				Zakladatel <a href="https://www.fsf.org/">Free Software Foundation</a><br>
 				Zakladatel a vedoucí vývoje <a href="https://www.gnu.org/">operačního systému GNU</a>
 			</p>
@@ -77,32 +73,40 @@
 			<h1>O přednášce</h1>
 
 			<p>
-				Přednáška se bude konat v anglickém jazyce s automaticky generovanými českými titulky.
+				Přednáška se bude konat v <b>anglickém jazyce</b> s automaticky generovanými českými titulky.
 			</p>
 			<p>
-				Samotná přednáška pana Stallmana bude zhruba hodinu dlouhá.
+				Samotná přednáška pana Stallmana bude <b>zhruba hodinu dlouhá</b>.
 				Bude zaměřena na etické otázky v oboru digitálních technologií.
-				Bude se rovněž týkat svobodného softwaru &ndash;
+				Bude se rovněž týkat <b>svobodného softwaru</b> &ndash;
 				hnutí, které sám pan Stallman založil.
-				Zaměří se na nebezpečí neustálého rozšiřování nesvobodného softwaru v naší digitální společnosti,
-				jak nás jako uživatele takový software omezuje a jak proti němu můžeme pomocí svobodného softwaru bojovat.
+				Zaměří se na nebezpečí neustálého rozšiřování <b>nesvobodného softwaru</b> v naší digitální společnosti,
+				jak nás jako uživatele <b>takový software omezuje</b> a jak proti němu můžeme pomocí svobodného softwaru bojovat.
 			</p>
 			<p>
-				Po přednášce bude následovat další zhruba hodinový blok s interaktivní diskuzí.
+				Po přednášce bude následovat další zhruba <b>hodinový blok s interaktivní diskuzí</b>.
 				Pokud tedy máte na pana Stallmana dotazy blízké tématům přednášky,
 				určitě si je předem rozmyslete. K dispozici bude možnost
 				psaní otázek na papírky, nebo je zadávat pomocí webové stránky.
-				Po diskuzi bude možné se s panem Stallmanem vyfotit,
-				nechat si od něj podepsat upomínkové předměty
-				či zakoupit předměty s tematikou operačního systému GNU
-				a Free Software Foundation.
+				Po diskuzi bude možné se <b>s panem Stallmanem vyfotit</b>,
+				nechat si od něj podepsat <b>upomínkové předměty</b>
+				či zakoupit <b>předměty s tematikou operačního systému GNU</b>
+				a <b>Free Software Foundation</b>.
 			</p>
 
 			<h1>FAQ</h1>
+			<div>
+				<h2>Pro koho je přednáška určená?</h2>
+				<p style="margin: 0 0 15px 15px;">
+					Přednáška je určená pro odbornou i širší veřejnost se zájmem o etické otázky v 
+					digitální společnosti.
+				</p>
+			</div>
+
 			<div>
 				<h2>Kolik je vstupné?</h2>
 				<p style="margin: 0 0 15px 15px;">
-					Vstup je zcela zdarma pro všechny.
+					Vstup je zdarma pro všechny.
 				</p>
 			</div>
 
@@ -120,8 +124,8 @@
 					Přesněji řečeno, její souřadnice jsou <a href="geo:50.773395,15.076628?z=19">50.773395,15.076628</a>.
 				</p>
 				<p style="margin: 0 0 15px 15px;">A níže je mapa s její lokací.</p>
-				<iframe width="100%" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=15.07552742958069%2C50.772642861904984%2C15.077729523181917%2C50.7741473910174&amp;layer=mapnik&amp;marker=50.77339513251057%2C15.076628476381302" style="border: 1px solid black"></iframe><br/>
-				<small><a href="https://www.openstreetmap.org/?mlat=50.773395&amp;mlon=15.076628#map=19/50.773395/15.076628&amp;layers=N" target="_blank">Otevřít mapu</a></small>
+				<iframe class="map" width="100%" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=15.07552742958069%2C50.772642861904984%2C15.077729523181917%2C50.7741473910174&amp;layer=mapnik&amp;marker=50.77339513251057%2C15.076628476381302" style="border: 1px solid black"></iframe><br/>
+				<small><a class="map-open" href="https://www.openstreetmap.org/?mlat=50.773395&amp;mlon=15.076628#map=19/50.773395/15.076628&amp;layers=N" target="_blank">Otevřít mapu</a></small>
 			</div>
 		</main>
 		<script src="../countdown.js"></script>

pages/cz/javascript.html

@@ -12,11 +12,11 @@
 			<h1>Použitý JavaScript na tomto webu</h1>
 
 			<p>
-				Pro tvorbu tohoto webu jsme použili stopové množství JavaScriptu.
+				Pro tvorbu tohoto webu jsme použili stopové množství <b>JavaScriptu</b>.
 			</p>
 			<p>
-				Tato stránka Vám zajišťuje, že návštěva tohoto webu nenačítá žádný nesvobodný software
-				(tzn. tento web načtete i s rozšířením LibreJS).
+			Tato stránka Vám zajišťuje, že návštěva tohoto webu načítá <b>pouze svobodný software</b>
+			(tzn. tento web načtete i s rozšířením <b>LibreJS</b>).
 			</p>
 			<p>Zkontrolujte si prosím níže uvedené skripty a jejich licence.</p>
 			

pages/en/downloads.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!--#include virtual="components/head.html" -->
+		<title>Downloads - Software Libre Liberec</title>
+		<meta name="description" content="Downloads for content on this site.">
+	</head>
+	<body>
+		<!--#include virtual="components/header.html" -->
+		<!--#include virtual="components/nav.html" -->
+		<main>
+			<h1>Downloads</h1>
+
+			<p>
+				All images for download are licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International</a> license.
+			</p>
+
+			<h2>Poster in English</h2>
+
+			<p><a href="/poster_en.png" download>
+				Poster in English (4960x7016 PNG - for printing)
+			</a></p>
+
+			<p><a href="/poster_en.jpg" download>
+				Poster in English (1414x2000 JPG - for web distribution)
+			</a></p>
+
+			<h2>Poster in Czech</h2>
+
+			<p><a href="/poster_cz.png" download>
+				Poster in Czech (4960x7016 PNG - for printing)
+			</a></p>
+
+			<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>
+</html>
+

pages/en/index.html

@@ -10,51 +10,63 @@
 		<!--#include virtual="components/nav.html" -->
 		<main>
 			<p>
-				<b><a href="https://www.fm.tul.cz">FM TUL</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 freedom back</b>.
+				The <b><a href="https://www.fm.tul.cz">Faculty of Mechatronics</a></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.jpg" 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>
 
-			<a href="https://commons.wikimedia.org/wiki/File:Richard_Stallman_Bologna_2024_abc1.jpg">
-				<figure class="aside">
-					<img src="../stallman.webp" alt="Richard Stallman">
-					<figcaption>Richard Stallman, 2024</figcaption>
-				</figure>
-			</a>
-
 			<p>
-				Dr. Richard Stallman launched the free software movement in 1983 and
-				started the development of the GNU operating system
+				Dr Richard Stallman launched the <b>free software movement</b> in 1983 and
+				started the development of the <b>GNU operating system</b>
 				(see <a href="https://www.gnu.org">www.gnu.org</a>) in 1984.
 				GNU is free software: everyone has the freedom to copy it
-				and redistribute it, with or without changes.  The GNU/Linux system,
+				and redistribute it, with or without changes. The <b>GNU/Linux</b> system,
 				basically the GNU operating system with <a href="https://kernel.org/">Linux</a>
-				as the kernel, is used on tens of millions of computers today.
+				as the kernel, is used on <b>tens of millions of computers today</b>.
 			</p>
 
 			<p>
-				Stallman has received the ACM Grace
-				Hopper Award and the ACM Software and Systems Award, a MacArthur
-				Foundation fellowship, the Electronic Frontier Foundation's Pioneer
-				Award, and the the Takeda Award for Social/Economic Betterment, as
+				Stallman has received the <b>ACM Grace
+				Hopper Award</b> and the <b>ACM Software and Systems Award</b>, a <b>MacArthur
+				Foundation fellowship</b>, the <b>Electronic Frontier Foundation's Pioneer
+				Award</b>, and the the <b>Takeda Award for Social/Economic Betterment</b>, as
 				well as many doctorates honoris causa, and has been inducted into the
 				<a href="https://www.internethalloffame.org/">Internet Hall of Fame</a>.
 				If you are also interested in his other projects or ideas, you can visit his
-				<i><a href="https://stallman.org">personal website</a></i>, where he regularly adds new content.
+				<a href="https://stallman.org">personal website</a>, where he regularly adds new content.
 			</p>
 
 			<p>
@@ -66,32 +78,39 @@
 			<h1>About the lecture</h1>
 
 			<p>
-				The lecture will be held in English with automatically generated Czech subtitles.
+				The lecture will be held <b>in English</b> with automatically generated Czech subtitles.
 			</p>
 			<p>
-				Mr Stallman's actual lecture will be about an hour in length.
+				Mr Stallman's actual lecture will be about an <b>hour in length</b>.
 				Its main focus will be ethical issues in the field of digital technology.
-				It will also cover free software &ndash;
+				It will also cover <b>free software</b> &ndash;
 				a movement that Mr. Stallman himself founded.
-				It will focus on the dangers of the constant proliferation of non-free software in our digital society,
-				how such software limits us as users, and how we can fight against it with free software.
+				It will focus on the dangers of the constant proliferation of <b>non-free software</b> in our digital society,
+				how such software <b>limits us as users</b>, and how we can fight against it with free software.
 			</p>
 			<p>
-				An intractive Q&amp;A session will follow after the lecture, also being about an hour
+				An <b>intractive Q&amp;A</b> session will follow after the lecture, also being <b>about an hour</b>
 				in length. If you have questions for Mr. Stallman related to the lecture
 				topics, we would recommend to prepare them in advance.
 				Questions can be submitted either on paper or through a dedicated website.
 				Following the discussion, attendees will have the opportunity to
-				take photographs with Mr. Stallman,
-				have memorabilia signed or purchase items related to the
-				GNU operating system or the Free Software Foundation.
+				<b>take photographs with Mr. Stallman</b>,
+				have <b>memorabilia signed</b> or <b>purchase items related to the
+				GNU operating system</b> or the <b>Free Software Foundation</b>.
 			</p>
 
 			<h1>FAQ</h1>
+			<div>
+				<h2>Who is this lecture for?</h2>
+				<p style="margin: 0 0 15px 15px;">
+					The lecture is aimed both at the technical as well as the broader audience with
+					interests in ethical issues in the digital society.
+				</p>
+			</div>
 			<div>
 				<h2>What is the admission fee?</h2>
 				<p style="margin: 0 0 15px 15px;">
-					Admission is completely free for everyone.
+					Admission is free for everyone.
 				</p>
 			</div>
 			<div>
@@ -103,12 +122,12 @@
 			<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>
-				<iframe width="100%" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=15.07552742958069%2C50.772642861904984%2C15.077729523181917%2C50.7741473910174&amp;layer=mapnik&amp;marker=50.77339513251057%2C15.076628476381302" style="border: 1px solid black"></iframe><br/>
-				<small><a href="https://www.openstreetmap.org/?mlat=50.773395&amp;mlon=15.076628#map=19/50.773395/15.076628&amp;layers=N" target="_blank">Open map</a></small>
+				<iframe class="map" width="100%" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=15.07552742958069%2C50.772642861904984%2C15.077729523181917%2C50.7741473910174&amp;layer=mapnik&amp;marker=50.77339513251057%2C15.076628476381302" style="border: 1px solid black"></iframe><br/>
+				<small><a class="map-open" href="https://www.openstreetmap.org/?mlat=50.773395&amp;mlon=15.076628#map=19/50.773395/15.076628&amp;layers=N" target="_blank">Open map</a></small>
 			</div>
 		</main>
 		<script src="../countdown.js"></script>

pages/en/javascript.html

@@ -12,12 +12,12 @@
 			<h1>JavaScript used on this website</h1>
 
 			<p>
-				This website is enhanced with few short snippets of JavaScript.
+				This website is enhanced with few short snippets of <b>JavaScript</b>.
 			</p>
 
 			<p>
-				This page insures that visiting any page of this website does not load any non-free software
-				(which means that it will properly function on browsers with LibreJS).
+				This page insures that visiting any page of this website <b>only loads free software</b>
+				(which means that it will properly function on browsers with <b>LibreJS</b>).
 			</p>
 
 			<p>Please verify the following scripts and their licences.</p>

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 {
-		--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);
+:root {
+	--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(--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);
+	--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(--light-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);
-	}
+	--sep-color: var(--dark-sep-color);
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--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);
+[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(--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);
+	--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(--dark-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);
-	}
+	--sep-color: var(--light-sep-color);
 }
 
 :root {
@@ -111,8 +65,8 @@
 }
 
 @font-face {
-	font-family: jetbrains_mono;
-	src: url("jetbrains_mono.ttf");
+	font-family: JetBrains Mono;
+	src: url("jetbrains_mono.woff2") format("woff2");
 }
 
 html {
@@ -122,26 +76,37 @@ html {
 }
 
 body {
-	font-family: "Noto Sans", sans-serif;
-	font-size: 16px;
+	background-image: url("background.jpg");
+	background-attachment: fixed;
+	background-size: cover;
+	background-position: center;
+	font-family: JetBrains Mono, "Noto Sans", sans-serif;
+	line-height: 1.8em;
+	word-spacing: .1em;
+	font-weight: 150;
+	letter-spacing: -.05ch;
 	display: flex;
 	flex-direction: column;
 	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);
 	margin: auto;
 }
 
+b {
+	font-weight: 600;
+}
+
 [data-layout="wide"] header {
 	width: 90%;
 }
@@ -150,6 +115,8 @@ header .buttons {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	justify-content: center;
+	padding-left: 1em;
 }
 
 .light-dark-switch {
@@ -172,6 +139,7 @@ header .buttons {
 
 a {
 	color: var(--link-idle-color);
+	text-decoration: none;
 }
 
 header * {
@@ -214,37 +182,111 @@ header * {
 .countdown {
 	font-family: monospace;
 	font-weight: bold;
-	font-size: 2.5em;
+	font-size: 2em;
 	text-align: center;
-	margin: 1em auto;
+	margin: 2em auto;
 	padding: 0 .5em;
-	font-family: jetbrains_mono, monospace;
+	font-family: JetBrains Mono, monospace;
 	width: fit-content;
 	font-weight: bold;
 }
 
 @media only screen and (min-width: 50rem) {
 	.countdown {
-		font-size: 4em;
+		font-size: 3em;
 	}
 }
 
 nav {
-	background-color: var(--nav-bg-color);
 	color: var(--nav-fg-color);
+	background-color: var(--nav-bg-color);
 	user-select: none;
+	text-transform: uppercase;
+	width: min(90%, 50em);
+	margin: auto;
+	margin-bottom: 2em;
+	border-radius: .5em;
+	box-shadow: .5em .5em 1em rgba(0, 0, 0, 0.2);
+	overflow: hidden;
 }
 
 nav div {
-	width: min(90%, 50em);
-	margin: auto;
+	width: 100%;
+}
+
+[data-layout="wide"] nav {
+	width: 90%;
 }
 
 [data-layout="wide"] 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: .2em;
+	width: 2em;
+	background-color: white;
+	border-radius: .1em;
+	margin: .2em 0;
+}
+
+#menu-trigger:checked + .menu-button .center {
+	width: 0;
+	transform: translateX(.3em);
+}
+
+#menu-trigger:checked + .menu-button .upper {
+	transform: translateY(.625em) rotate(45deg);
+}
+
+#menu-trigger:checked + .menu-button .lower {
+	transform: translateY(-.625em) 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 {
 		width: 100% !important;
 	}
@@ -269,7 +311,12 @@ footer {
 	border-top: 1px solid var(--sep-color);
 	color: gray;
 	padding: 1em;
-	text-align: center;
+	width: fit-content;
+	margin: 2em auto;
+	margin-top: 4em;
+	font-size: .9em;
+	word-spacing: 0em;
+	line-height: 1em;
 }
 
 footer>* {
@@ -277,11 +324,16 @@ footer>* {
 }
 
 h1 {
+	margin: 2em 0;
+	margin-top: 4em;
 	font-size: 1.5em;
+	font-weight: bold;
 }
 
 h2 {
 	font-size: 1.25em;
+	font-weight: bolder;
+	margin-top: 3em;
 }
 
 h3 {
@@ -289,6 +341,8 @@ h3 {
 }
 
 table {
+	margin: 2em auto;
+	margin-top: 4em;
 	border-spacing: 0;
 	border: 1px solid var(--sep-color);
 }
@@ -327,8 +381,9 @@ figcaption {
 }
 
 .poster {
-	margin: 0 auto !important;
-	max-width: 50rem;
+	margin: 5em auto !important;
+	max-width: 40rem;
+	filter: drop-shadow(0 0 5em black);
 }
 
 nav ul {
@@ -345,7 +400,6 @@ nav ul {
 
 [data-layout="wide"] nav ul {
 	justify-content: left;
-	margin-left: -1em;
 }
 
 @media (width < 50rem) {
@@ -427,3 +481,16 @@ nav ul li a:visited {
 		display: none;
 	}
 }
+
+.map {
+	display: block;
+	width: 90%;
+	margin: 0 auto;
+	margin-top: 4em;
+}
+
+.map-open {
+	display: block;
+	width: fit-content;
+	margin: 0 auto;
+}