redesign countdown

Makefile

@@ -3,7 +3,8 @@ SHARED_FILES := stallman.webp stallman_2024.webp favicon.ico \
 				poster_cz.webp poster_en.webp poster_cz.jpg poster_en.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
+				countdown.js theme.js lang.js \
+				doto.ttf
 SEARCH_REPLACE := lib/search_and_replace/target/release/search_and_replace
 COMPONENTS := head.html header.html nav.html footer.html
 
@@ -62,3 +63,7 @@ dst/%.svg: icons/%.svg
 dst/favicon.ico: images/favicon.ico
 	@mkdir -p $(@D)
 	ln -f $< $@
+
+dst/%.ttf: fonts/%.ttf
+	@mkdir -p $(@D)
+	ln -f $< $@

pages/cz/index.html

@@ -11,7 +11,7 @@
 		<main>
 			<div class="countdown">--:--:--:--</div>
 
-			<figure>
+			<figure class="poster">
 				<img src="../poster_cz.webp" alt="Plakát na akci s Richardem Stallmanem">
 			</figure>
 

pages/en/index.html

@@ -11,8 +11,8 @@
 		<main>
 			<div class="countdown">--:--:--:--</div>
 
-			<figure>
-				<img src="../poster_en.webp" alt="Poster with Richard Stallman describing the event">
+			<figure class="poster">
+				<img src="../poster_cz.webp" alt="Plakát na akci s Richardem Stallmanem">
 			</figure>
 
 			<p>

styles/styles.css

@@ -110,6 +110,11 @@
 	--layout-switch-icon: var(--wide-layout-switch-icon)
 }
 
+@font-face {
+	font-family: doto;
+	src: url("doto.ttf");
+}
+
 html {
 	background-color: var(--bg-color);
 	min-height: calc(100% - 32px);
@@ -209,8 +214,22 @@ header * {
 .countdown {
 	font-family: monospace;
 	font-weight: bold;
-	font-size: 48px;
+	font-size: 2.5em;
 	text-align: center;
+	margin: 1.5em auto;
+	padding: 0 .5em;
+	outline: 1px dotted black;
+	font-family: doto, monospace;
+	background-color: var(--fg-color);
+	color: var(--bg-color);
+	width: fit-content;
+	font-weight: bold;
+}
+
+@media only screen and (min-width: 50rem) {
+	.countdown {
+		font-size: 4em;
+	}
 }
 
 nav {
@@ -302,6 +321,10 @@ figcaption {
 	font-style: italic;
 }
 
+.poster {
+	margin: 0 !important;
+}
+
 nav ul {
 	width: 100%;
 	height: 100%;
@@ -394,4 +417,3 @@ nav ul li a:visited {
 		display: none;
 	}
 }
-