From 631b1a9bb6b44acf8b0ad43256fb80c2012fd70f Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Sun, 3 Aug 2025 11:00:52 +0200
Subject: [PATCH] [TASK] style found cams

---
 src/game.rs            | 20 ++++++++------------
 static/serve/style.css | 27 +++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/game.rs b/src/game.rs
index 5c15d75..f937926 100644
--- a/src/game.rs
+++ b/src/game.rs
@@ -36,7 +36,7 @@ async fn index(
                 mark { "TODO: Show optional SUCC message" }
             }
 
-            div {
+            div.mb-sm {
                 (client.get_display_name())
                 ", do you want to be named something different? No worries, change here 👇"
             }
@@ -51,7 +51,7 @@ async fn index(
                 }
             }
 
-            p {
+            p.mb-0 {
                 "You have found "
                 (sightings.len())
                 "/"
@@ -59,19 +59,15 @@ async fn index(
                 " cameras:"
                 progress value=(sightings.len()) max=(amount_total_cameras);
             }
-            p {
-                ul.iterated {
-                    @for (idx, sighting) in sightings.iter().enumerate() {
-                        li.card {
-                            span {
-                                span.font-headline.rank.text-muted { (idx+1) }
-                                (sighting.camera.name)
-                            }
-                        }
+
+            ol.flex.small {
+                @for (idx, sighting) in sightings.iter().enumerate() {
+                    li {
+                        (sighting.camera.name)
                     }
                 }
-
             }
+
             p {
                 h2 { "Highscore" }
                 ul.iterated {
diff --git a/static/serve/style.css b/static/serve/style.css
index de0ada9..841c1b6 100644
--- a/static/serve/style.css
+++ b/static/serve/style.css
@@ -82,12 +82,39 @@ input[type="submit"]:active {
   font-size: 1.3rem;
 }
 
+.mb-sm {
+   margin-bottom: .5rem;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.small {
+  font-size: .8rem;
+}
+
 @media (min-width: 768px) {
   .gap-lg {
     grid-gap: 5rem;
   }
 }
 
+/** custom ol style */
+ol.small.flex {
+  padding-left: 1rem;
+  font-family: 'Courier New', monospace;
+}
+
+ol.small.flex>li {
+  margin-right: 3rem;
+}
+
 /* custom ul style */
 ul.iterated {
   padding-left: unset;