[TASK] style found cams

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 {

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;