vor bild

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;
+  }
+}