From abf563a830c20479e31b1d47faa369a26afd24e4 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sat, 2 Aug 2025 20:18:35 +0200
Subject: [PATCH] [TASK] style highscore list

---
 src/game.rs            | 20 +++++++++++++-------
 src/index.rs           |  2 +-
 static/serve/style.css | 27 +++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/game.rs b/src/game.rs
index 4117484..73f9a9d 100644
--- a/src/game.rs
+++ b/src/game.rs
@@ -33,14 +33,20 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
         p { "You have found " (sightings.len()) "/" (amount_total_cameras) " cameras." }
         p {
             h2 { "Highscore" }
-            ul {
+            ul.iterated {
                 @for rank in highscore {
-                    li {
-                        @if rank.uuid == client.uuid { (PreEscaped("<mark>")) }
-                        @if let Some(name) = rank.name { (name) } @else { "Anonymer Bär" }
-                        @if rank.uuid == client.uuid { (PreEscaped("</mark>")) }
-                        (PreEscaped("&rarr;"))
-                        (rank.amount)
+                    li.card {
+                        span {
+                          span.font-headline.rank {
+                            (rank.rank)
+                          }
+                          @if rank.uuid == client.uuid { (PreEscaped("<mark>")) }
+                          @if let Some(name) = rank.name { (name) } @else { "Anonymer Bär" }
+                          @if rank.uuid == client.uuid { (PreEscaped("</mark>")) }
+                        }
+                        span {
+                          (rank.amount)
+                        }                        
                     }
                 }
             }
diff --git a/src/index.rs b/src/index.rs
index 2a0b832..d965943 100644
--- a/src/index.rs
+++ b/src/index.rs
@@ -16,7 +16,7 @@ pub(super) async fn index() -> Markup {
                 "What happens when your digital shadow takes shape: tangible, interrogative, observant?"
             }
         }
-        blockquote {
+        p {
             "Artists: René Mayrhofer(AT), Philipp Hofer (AT), Laura Poulbot (FR), Airan Berg (AT), Andrea Hummer (AT), Ilona Roth (DE/AT), Linda Huber (AT), Gisela Klammsteiner (AT), Sara Koniarek (AT), Simon Sharkey (GB), Valerio Iurato (IT), Doris Roth (DE), Alina Lugovskaya (UA/RU), Selina Nowak (AT), JeanClaude Grieco (AR/AT), Florian Böttcher (AT), Ethem Saygieder-Fischer (AT)"
         }
         article {
diff --git a/static/serve/style.css b/static/serve/style.css
index 400a1ec..501c3b4 100644
--- a/static/serve/style.css
+++ b/static/serve/style.css
@@ -19,6 +19,33 @@ h1 {
   text-align: center;
 }
 
+.font-headline {
+  font-family: 'Rubik Doodle Shadow', sans-serif;
+}
+
+.rank {
+  font-size: clamp(2rem, 1.875rem + 2vw, 3rem);
+  margin-right: 1rem;
+}
+
+ul.iterated {
+  padding-left: unset;
+}
+
+ul.iterated > li {
+  list-style-type: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  border-bottom: 3px solid white;
+}
+
+ul.iterated > li:nth-of-type(even) {
+}
+
+ul.iterated > li:nth-of-type(odd) {
+}
+
 header a {
 	padding: 0.5rem;
 	line-height: 1.75;