[TASK] add content and style homepage

src/game.rs

@@ -62,7 +62,7 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
                             (rank.client.get_display_name())
                             @if rank.client == client { (PreEscaped("</mark>")) }
                         }
-                        span.font-headline.cam { (rank.amount) (PreEscaped("&nbsp;")) "📸" }
+                        span.font-headline.font-lg { (rank.amount) (PreEscaped("&nbsp;")) "📸" }
                     }
                 }
             }

src/index.rs

@@ -23,7 +23,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 { "— René Mayrhofer" }
+                cite { "— Digital Shadow Team" }
             }
         }
         p {
@@ -31,72 +31,32 @@ pub(super) async fn index() -> Markup {
         }
 
         h2 {
-            mark { "TODO: Hier weitermachen" }
+            "What to do with this information?"
         }
 
-        h2 { "Features" }
-        h3 { "Sample Form" }
-        form {
-            fieldset {
-                label for="name" {
-                    "Name"
-                    input type="text" id="name" name="name" placeholder="Your name" required;
-                }
-
-                label for="email" {
-                    "Email"
-                    input
-                        type="email"
-                        id="email"
-                        name="email"
-                        placeholder="your@email.com"
-                        required;
-                }
-
-                label for="message" {
-                    "Message"
-                    textarea
-                        id="message"
-                        name="message"
-                        placeholder="Your message here..."
-                        rows="4" {}
-                }
-            }
-
-            input type="submit" value="Send Message";
-        }
-
-        h3 { "Sample Grid" }
-        div.grid {
-            div {
+        div.grid.gap-lg {
           article {
-                    header { "Card 1" }
-                    p { "This is the first card in a responsive grid layout." }
-                }
-            }
-            div {
-                article {
-                    header { "Card 2" }
-                    p {
-                        "This is the second card. Pico CSS handles the responsive behavior automatically."
-                    }
-                }
-            }
-            div {
-                article {
-                    header { "Card 3" }
-                    p { "Third card completes our example grid layout." }
-                }
-            }
+            header {
+                "Visit our booth"
             }
 
-        h3 { "Sample Buttons" }
-        p {
-            button { "Primary Button" }
-            " "
-            button.secondary { "Secondary Button" }
-            " "
-            button.contrast { "Contrast Button" }
+            "We will be delighted to see you at our booth in the Post City Linz, where our team will show you, what happens when your Digital Shadow becomes allmighty."
+
+            footer {
+              "Where: Postcity Linz"
+            }
+          }
+          article {
+            header {
+                "Play our game"
+            }
+
+            "Ever wandered through Linz with the aim to find (hidden) cameras? Well, if you are that kind of person than our 'Discover cameras' game will be ideal for you!"
+
+            footer {
+              "Where: all over Linz"
+            }
+          }
         }
     })
 }

static/serve/style.css

@@ -10,10 +10,17 @@
   --pico-font-family: 'Arial', sans-serif;
   --pico-form-element-spacing-vertical: .3rem;
   --pico-form-element-spacing-horizontal: .8rem;
+  --pico-box-shadow: unset;
+  --pico-card-sectioning-background-color: unset;
+}
+
+h2 {
+    --pico-typography-spacing-top: 4rem;
 }
 
 h1 {
   font-family: 'Rubik Doodle Shadow', sans-serif;
+  text-transform: uppercase;
   font-size: clamp(3rem, 1.875rem + 2vw, 4.5rem);
   letter-spacing: 0.33rem;
   margin-top: clamp(3rem, 1.875rem + 2vw, 5rem);
@@ -56,6 +63,7 @@ input[type="submit"]:active {
 
 .font-headline {
   font-family: 'Rubik Doodle Shadow', sans-serif;
+  text-transform: uppercase;
 }
 
 .rank {
@@ -65,10 +73,16 @@ input[type="submit"]:active {
   letter-spacing: 0.33rem;
 }
 
-.cam {
+.font-lg {
   font-size: 1.3rem;
 }
 
+@media (min-width: 768px) {
+  .gap-lg {
+    grid-gap: 5rem;
+  }
+}
+
 ul.iterated {
   padding-left: unset;
 }
@@ -78,14 +92,24 @@ ul.iterated > li {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  border-bottom: 3px solid white;
-}
+  border-bottom: 2px solid var(--pico-color);
+  border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
+  position: relative;
 
-:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] ul.iterated > li {
-  border-bottom: 3px solid black;
+  &::before {
+      content: '';
+      border-bottom: 1px solid var(--pico-color);
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
+      border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+  }
 }
 
-
 /* Header */
 #theme_switcher {
   width: 20px; 
@@ -102,3 +126,52 @@ header a {
 .easteregg {
   color: var(--pico-background-color);
 }
+
+blockquote {
+    text-align: center;
+    font-size: 1.3rem;
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+    font-family: 'Courier New', monospace;
+    border: none;
+}
+
+/** Style article*/
+
+article {
+    display: inline-block;
+    border: 2px solid var(--pico-color);
+    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
+    position: relative;
+    padding: clamp(1rem, 1.875rem + 2vw, 3rem);
+    
+    &::before {
+        content: '';
+        border: 1px solid var(--pico-color);
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
+        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+    }
+}
+
+article>header {
+  font-family: 'Rubik Doodle Shadow', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+  color: var(--pico-primary);
+  font-size: 1.8rem;
+  text-align: center;
+  border: unset;
+  background-color: unset;
+}
+
+article>footer {
+  font-family: 'Courier New', monospace;
+  border: unset;
+  background-color: unset;
+}