Merge branch 'main' of ssh://git.hofer.link:2222/philipp/aef-website

src/game.rs

@@ -27,9 +27,18 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
         p {
             mark { "TODO: Show optional SUCC message" }
         }
+
+        form {
+          fieldset role="group" {
+            input name="name" placeholder="Replace Name" aria-label="Name";
+            input type="submit" value="Save";
+          }
+        }
+
         p {
             mark { "TODO: Show optional REGISTER-NAME message" }
         }
+
         p { "You have found " (sightings.len()) "/" (amount_total_cameras) " cameras." }
         p {
             h2 { "Highscore" }
@@ -37,15 +46,15 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
                 @for rank in highscore {
                     li.card {
                         span {
-                          span.font-headline.rank {
-                            (rank.rank)
+                          span.font-headline.rank.text-muted {
+                            (rank.rank)"."
                           }
                           @if rank.uuid == client.uuid { (PreEscaped("<mark>")) }
                           (rank.name)
                           @if rank.uuid == client.uuid { (PreEscaped("</mark>")) }
                         }
-                        span {
-                          (rank.amount)
+                        span.font-headline.cam {
+                          (rank.amount)(PreEscaped("&nbsp;"))"📸" 
                         }                        
                     }
                 }

src/page.rs

@@ -1,5 +1,7 @@
 use maud::{html, Markup, DOCTYPE};
 
+// TODO: set dynamic meta lang attribute
+
 pub fn new(content: Markup) -> Markup {
     html! {
         (DOCTYPE)
@@ -8,6 +10,9 @@ pub fn new(content: Markup) -> Markup {
             meta name="viewport" content="width=device-width, initial-scale=1.0";
             link rel="stylesheet" href="/static/pico.min.css";
             link rel="stylesheet" href="/static/style.css";
+            title { 
+              "Digital Shadows"
+            }
         }
         body {
             header.container {
@@ -30,7 +35,7 @@ pub fn new(content: Markup) -> Markup {
                                 } 
                               }
                             }
-                            li { span id="theme_switcher" style="width: 20px; height: 20px;" {} }
+                            li { span id="theme_switcher" {} }
                         }
                     }
                 }

static/serve/style.css

@@ -24,10 +24,14 @@ h1 {
 }
 
 .rank {
-  font-size: clamp(2rem, 1.875rem + 2vw, 3rem);
+  font-size: clamp(2rem, 1.875rem + 2vw, 2.5rem);
   margin-right: 1rem;
 }
 
+.cam {
+  font-size: 1.3rem;
+}
+
 ul.iterated {
   padding-left: unset;
 }
@@ -40,10 +44,16 @@ ul.iterated > li {
   border-bottom: 3px solid white;
 }
 
-ul.iterated > li:nth-of-type(even) {
+:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] ul.iterated > li {
+  border-bottom: 3px solid black;
 }
 
-ul.iterated > li:nth-of-type(odd) {
+
+/* Header */
+#theme_switcher {
+  width: 20px; 
+  height: 20px;
+  display: inline-block;
 }
 
 header a {