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

locales/de.yml

@@ -1,6 +1,5 @@
 _version: 1
 digital_shadows: "Digitaler Schatten"
-icon_home: "🏠"
 icon_camera: "📸"
 found_camera_title: "Kamera '%{name}' gefunden"
 found_camera_body: "✨ Du bist #%{amount} der/die diese Kamera gefunden hat ✨"

locales/en.yml

@@ -1,6 +1,5 @@
 _version: 1
 digital_shadows: "Digital Shadows"
-icon_home: "🏠"
 icon_camera: "📸"
 found_camera_title: "Camera '%{name}' found"
 found_camera_body: "✨ You are #%{amount} who has found this camera ✨"

src/page.rs

@@ -75,11 +75,6 @@ impl Page {
                                 }
                             }
                             ul {
-                                li {
-                                    a href="/" {
-                                        span role="img" aria-label="home" { (t!("icon_home")) }
-                                    }
-                                }
                                 li {
                                     a href="/game" {
                                         span role="img" aria-label="camera" { (t!("icon_camera")) }
@@ -100,25 +95,31 @@ impl Page {
 
                     main.container {
                         @if let Some(found_camera) = &self.found_camera {
-                            article class="succ w-full" {
+                            div.flex {
+                                article class="succ msg" {
                                     header { (t!("found_camera_title", name = found_camera.0)) }
                                     (t!("found_camera_body", amount = found_camera.1))
                                     footer { a href="#ranking" { "See your ranking" } }
                                 }
                             }
+                        }
                         @if self.new_name {
-                            article class="name w-full" {
+                          div.flex {
+                            article class="name msg" {
                                 header { "New name!" }
                                 "Does it feel much different?"
                             }
                           }
+                        }
                         @if let Some(err) = &self.err {
-                            article class="error w-full" {
+                          div.flex {
+                            article class="error msg" {
                                 header { (err.0) }
                                 (err.1)
                                 footer { (err.2) }
                             }
                           }
+                        }
 
                         section { (content) }
                     }

static/serve/style.css

@@ -16,6 +16,7 @@
   --pico-card-sectioning-background-color: unset;
   --pico-mark-background-color: yellow !important;
   --pico-mark-color: black !important;
+  --custom-box-shadow: #015886;
 }
 
 /** Headline Styles */
@@ -29,6 +30,10 @@ h1 {
   text-align: center;
 }
 
+hgroup>:not(:first-child):last-child {
+  --pico-color: var(--pico-color);
+}
+
 h2 {
     --pico-typography-spacing-top: 4rem;
 }
@@ -36,34 +41,31 @@ h2 {
 /** Button Styles */
 input[type="submit"], 
 button:not([class="secondary"]) {
-    transition: margin-top 0.3s ease,
+    transition: box-shadow 0.3s ease;
-    margin-left 0.3s ease,
-    box-shadow 0.3s ease;
 
-    background: var(--pico-primary);
+    background: var(--pico-primary-background);
-    border: solid 1px var(--pico-primary-hover-background);
+    border: solid 1px var(--custom-box-shadow);
 
-    box-shadow: 1px 0px 0px var(--pico-primary-hover-background),0px 1px 0px var(--pico-primary-hover-background),
+    box-shadow: 1px 0px 0px var(--custom-box-shadow),0px 1px 0px var(--custom-box-shadow),
-    2px 1px 0px var(--pico-primary-hover-background),1px 2px 0px var(--pico-primary-hover-background),
+    2px 1px 0px var(--custom-box-shadow),1px 2px 0px var(--custom-box-shadow),
-    3px 2px 0px var(--pico-primary-hover-background),2px 3px 0px var(--pico-primary-hover-background),
+    3px 2px 0px var(--custom-box-shadow),2px 3px 0px var(--custom-box-shadow),
-    4px 3px 0px var(--pico-primary-hover-background),3px 4px 0px var(--pico-primary-hover-background),
+    4px 3px 0px var(--custom-box-shadow),3px 4px 0px var(--custom-box-shadow),
-    5px 4px 0px var(--pico-primary-hover-background),4px 5px 0px var(--pico-primary-hover-background),
+    5px 4px 0px var(--custom-box-shadow),4px 5px 0px var(--custom-box-shadow),
-    6px 5px 0px var(--pico-primary-hover-background),5px 6px 0px var(--pico-primary-hover-background),
+    6px 5px 0px var(--custom-box-shadow),5px 6px 0px var(--custom-box-shadow),
-    7px 6px 0px var(--pico-primary-hover-background),6px 7px 0px var(--pico-primary-hover-background),
+    7px 6px 0px var(--custom-box-shadow),6px 7px 0px var(--custom-box-shadow),
-    8px 7px 0px var(--pico-primary-hover-background),7px 8px 0px var(--pico-primary-hover-background),
+    8px 7px 0px var(--custom-box-shadow),7px 8px 0px var(--custom-box-shadow),
-    9px 8px 0px var(--pico-primary-hover-background),8px 9px 0px var(--pico-primary-hover-background);
+    9px 8px 0px var(--custom-box-shadow),8px 9px 0px var(--custom-box-shadow);
+}
+
+input[type="submit"]:focus,
+button:not([class="secondary"]):focus {
+    outline: 3px solid yellow;
 }
 
 /* When the button is clicked */
 button:not([class="secondary"]):active,
 input[type="submit"]:active {
-    transition: margin-top 0.3s ease;
+    transition: box-shadow 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);
 }
 
@@ -97,10 +99,11 @@ input[type="submit"]:active {
   flex-wrap: wrap;
 }
 
-.w-full {
+.msg {
   width: 100%;
   max-width: 40rem;
   text-align: center;
+  margin: auto;
 }
 
 .small {