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

src/game.rs

@@ -28,11 +28,16 @@ async fn index(State(backend): State<Arc<Backend>>, cookies: CookieJar) -> Respo
             mark { "TODO: Show optional SUCC message" }
         }
 
+        div {
+            (client.get_display_name())
+            ", do you want to be named something different? No worries, change here 👇"
+        }
+
         form {
             fieldset role="group" {
                 input
                     name="name"
-                    placeholder=(format!("Rename {}", client.get_display_name()))
+                    placeholder="✨ Your new name starts here ✨"
                     aria-label="Name";
                 input type="submit" value="Save";
             }

src/index.rs

@@ -19,6 +19,9 @@ pub(super) async fn index(cookies: CookieJar, headers: HeaderMap) -> Markup {
         }
         p {
             "Artists: René Mayrhofer (AT), Philipp Hofer (AT), Laura Poulbot (FR), Airan Berg (AT), Andrea Hummer (AT), Ilona Roth (DE/AT), Linda Huber (AT), Gisela Klammsteiner (AT), Sara Koniarek (AT), Simon Sharkey (GB), Valerio Iurato (IT), Doris Roth (DE), Alina Lugovskaya (UA/RU), Selina Nowak (AT), JeanClaude Grieco (AR/AT), Florian Böttcher (AT), Ethem Saygieder-Fischer (AT)"
+            span.easteregg {
+               ", Marie Birner (Couch)"
+            }
         }
         blockquote {
             "Digital Shadows confronts visitors with their digital self – copied, measured, analyzed. An experiment on data power, visibility, and control in the digital age."

static/serve/style.css

@@ -8,6 +8,8 @@
 :root {
   --pico-typography-spacing-vertical: 2rem;
   --pico-font-family: 'Arial', sans-serif;
+  --pico-form-element-spacing-vertical: .3rem;
+  --pico-form-element-spacing-horizontal: .8rem;
 }
 
 h1 {
@@ -19,6 +21,39 @@ h1 {
   text-align: center;
 }
 
+input[type="submit"], 
+button:not([class="secondary"]) {
+    transition: margin-top 0.3s ease,
+    margin-left 0.3s ease,
+    box-shadow 0.3s ease;
+
+    background: var(--pico-primary);
+    border: solid 1px var(--pico-primary-hover-background);
+
+    box-shadow: 1px 0px 0px var(--pico-primary-hover-background),0px 1px 0px var(--pico-primary-hover-background),
+    2px 1px 0px var(--pico-primary-hover-background),1px 2px 0px var(--pico-primary-hover-background),
+    3px 2px 0px var(--pico-primary-hover-background),2px 3px 0px var(--pico-primary-hover-background),
+    4px 3px 0px var(--pico-primary-hover-background),3px 4px 0px var(--pico-primary-hover-background),
+    5px 4px 0px var(--pico-primary-hover-background),4px 5px 0px var(--pico-primary-hover-background),
+    6px 5px 0px var(--pico-primary-hover-background),5px 6px 0px var(--pico-primary-hover-background),
+    7px 6px 0px var(--pico-primary-hover-background),6px 7px 0px var(--pico-primary-hover-background),
+    8px 7px 0px var(--pico-primary-hover-background),7px 8px 0px var(--pico-primary-hover-background),
+    9px 8px 0px var(--pico-primary-hover-background),8px 9px 0px var(--pico-primary-hover-background);
+}
+
+/* When the button is clicked */
+button:not([class="secondary"]):active,
+input[type="submit"]:active {
+    transition: margin-top 0.3s ease;
+    margin-left 0.3s ease;
+    box-shadow 0.3s ease;
+
+    margin-left:9px;
+    margin-top:9px;
+
+    box-shadow: 0px 0px 0px var(--pico-primary-hover-background);
+}
+
 .font-headline {
   font-family: 'Rubik Doodle Shadow', sans-serif;
 }
@@ -26,6 +61,8 @@ h1 {
 .rank {
   font-size: clamp(2rem, 1.875rem + 2vw, 2.5rem);
   margin-right: 1rem;
+  color: var(--pico-primary);
+  letter-spacing: 0.33rem;
 }
 
 .cam {
@@ -61,3 +98,7 @@ header a {
 	line-height: 1.75;
 	font-size: 1.25em;
 }
+
+.easteregg {
+  color: var(--pico-background-color);
+}