[TASK] style highscore list

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 {
+                    li.card {
-                        @if rank.uuid == client.uuid { (PreEscaped("<mark>")) }
+                        span {
-                        @if let Some(name) = rank.name { (name) } @else { "Anonymer Bär" }
+                          span.font-headline.rank {
-                        @if rank.uuid == client.uuid { (PreEscaped("</mark>")) }
+                            (rank.rank)
-                        (PreEscaped("&rarr;"))
+                          }
-                        (rank.amount)
+                          @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)
+                        }                        
                     }
                 }
             }

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 {

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;