maud formatting

src/game.rs

@@ -30,28 +30,34 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
 
         form {
             fieldset role="group" {
-            input name="name" placeholder=(format!("Rename {}", client.get_display_name())) aria-label="Name";
+                input
+                    name="name"
+                    placeholder=(format!("Rename {}", client.get_display_name()))
+                    aria-label="Name";
                 input type="submit" value="Save";
             }
         }
 
-        p { "You have found " (sightings.len()) "/" (amount_total_cameras) " cameras." }
+        p {
+            "You have found "
+            (sightings.len())
+            "/"
+            (amount_total_cameras)
+            " cameras."
+            progress value=(sightings.len()) max=(amount_total_cameras);
+        }
         p {
             h2 { "Highscore" }
             ul.iterated {
                 @for rank in highscore {
                     li.card {
                         span {
-                          span.font-headline.rank.text-muted {
+                            span.font-headline.rank.text-muted { (rank.rank) "." }
-                            (rank.rank)"."
-                          }
                             @if rank.client == client { (PreEscaped("<mark>")) }
                             (rank.client.get_display_name())
-                          @if rank.client == client{ (PreEscaped("</mark>")) }
+                            @if rank.client == client { (PreEscaped("</mark>")) }
-                        }
-                        span.font-headline.cam {
-                          (rank.amount)(PreEscaped("&nbsp;"))"📸"
                         }
+                        span.font-headline.cam { (rank.amount) (PreEscaped("&nbsp;")) "📸" }
                     }
                 }
             }

src/index.rs

@@ -3,9 +3,7 @@ use maud::{html, Markup};
 
 pub(super) async fn index() -> Markup {
     new(html! {
-        h1 { 
+        h1 { "Digital Shadows" }
-              "Digital Shadows"
-        }
         hgroup {
             h2 {
                 "Who owns your "
@@ -22,9 +20,7 @@ pub(super) async fn index() -> Markup {
         blockquote {
             "Digital Shadows confronts visitors with their digital self – copied, measured, analyzed. An experiment on data power, visibility, and control in the digital age."
             footer {
-              cite {
+                cite { "— René Mayrhofer" }
-                "— René Mayrhofer" 
-              }
             }
         }
         p {

src/page.rs

@@ -10,40 +10,38 @@ 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 { 
+            title { "Digital Shadows" }
-              "Digital Shadows"
-            }
         }
         body {
             header.container {
                 nav {
                     ul {
-                            li {  a href="/" { strong { "Digital Shadows" } } }
+                        li {
+                            a href="/" {
+                                strong { "Digital Shadows" }
+                            }
+                        }
                     }
                     ul {
                         li {
-                              a href="/"{ 
+                            a href="/" {
-                                span role="img" aria-label="home" {
+                                span role="img" aria-label="home" { "🏠" }
-                                  "🏠" 
-                                }
                             }
                         }
                         li {
                             a href="/game" {
-                                span role="img" aria-label="camera" {
+                                span role="img" aria-label="camera" { "📸" }
-                                  "📸" 
                             }
                         }
+                        li {
+                            span id="theme_switcher" {}
                         }
-                            li { span id="theme_switcher" {} }
                     }
                 }
             }
 
             main.container {
-                    section {
+                section { (content) }
-                        (content)
-                    }
             }
 
             footer.container {