vor bild

backend/app.py

@@ -215,7 +215,7 @@ TEXTS = {
         "guest_area": "Gästebereich",
         "hello_guest": "Hallo {name}.",
         "logout": "Abmelden",
-        "rsvp": "RSVP",
+        "rsvp": "Zu-/Absage",
         "upload": "Upload",
         "upload_intro": "Hier könnt ihr Fotos von der Hochzeit hochladen.",
         "gallery": "Galerie",

backend/static/styles.css

@@ -36,6 +36,8 @@ h3 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
+  z-index: 60;
   padding: 0.75rem 1rem;
   border-bottom: 1px solid rgba(178, 137, 70, 0.24);
   background:
@@ -91,6 +93,7 @@ h3 {
   background-position: center 24%;
   background-color: #f2eee3;
   background-blend-mode: normal;
+  image-rendering: -webkit-optimize-contrast;
   box-shadow: 0 14px 38px rgba(39, 66, 53, 0.18);
 }
 
@@ -553,6 +556,7 @@ input[type="file"]:focus {
 
 .toolbar-timer {
   position: relative;
+  z-index: 1201;
 }
 
 .toolbar-timer-btn {
@@ -577,7 +581,7 @@ input[type="file"]:focus {
   border: 1px solid rgba(39, 66, 53, 0.14);
   background: rgba(255, 255, 255, 0.98);
   box-shadow: 0 10px 26px rgba(39, 66, 53, 0.14);
-  z-index: 25;
+  z-index: 1200;
 }
 
 .toolbar-timer-label {
@@ -970,8 +974,12 @@ input[type="file"]:focus {
 }
 
 @media (max-width: 640px) {
+  .container {
+    margin: 1.15rem auto 1.25rem;
+  }
+
   .toolbar-timer-popover {
-    right: -0.1rem;
+    right: 0;
     min-width: 11.5rem;
     padding: 0.5rem 0.6rem;
   }
@@ -1054,3 +1062,17 @@ input[type="file"]:focus {
     margin-top: 0.45rem;
   }
 }
+
+@media (min-width: 1200px) {
+  .hero-banner {
+    max-width: 820px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 62vh;
+    background-position: center 20%;
+  }
+
+  .hero-overlay {
+    max-width: 44ch;
+  }
+}

backend/templates/guest_area.html

@@ -1,10 +1,5 @@
 {% extends 'base.html' %}
 {% block content %}
-<section class="card">
-  <h1>{{ t('guest_area') }}</h1>
-  <p>{{ t('hello_guest').format(name=guest_name) }}</p>
-</section>
-
 <section class="card-grid dashboard-grid">
   <a class="card link-card dashboard-link-card" href="{{ url_for('rsvp') }}">{{ t('rsvp') }}</a>
   <a class="card link-card dashboard-link-card" href="{{ url_for('upload') }}">{{ t('upload') }}</a>