Add faust

lolevbeer · Dec 8, 2024 · 23817b3 · 23817b3
1 parent 87e4c84
commit 23817b3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/_layouts/promo.html b/_layouts/promo.html
@@ -16,13 +16,16 @@
         padding: 0;
       }
       header {
-        height: 100vh;
+        height: auto;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        align-items: center;
         color: white;
         text-align: center;
         position: relative;
+        margin-top: 150px;
+        z-index: 3;
       }
       header .slide {
         background-position-y: -135px;
@@ -42,23 +45,61 @@
         font-size: 6rem;
         color: white;
         letter-spacing: 3px;
+        margin: 0;
         text-transform: uppercase;
-        z-index: 1;
-        transform: translateY(160px);
         text-shadow: 0 0 50px black;
       }
+      h2 {
+        font-size: 2rem;
+        color: white;
+        margin-top: 20px;
+        text-shadow: 0 0 30px black;
+      }
+      h3 {
+        font-size: 1.5rem;
+        color: white;
+        margin-top: 10px;
+        text-shadow: 0 0 20px black;
+      }
     </style>
   </head>
-  <body style="margin: 0" class="{{ page.class }} {% if page.price != true %}no-price{% endif %}">
+  <!-- add the faust image as a background image to the body but cover the whole background and blur it, but dont blur the children -->
+  <body style="margin: 0;" class="{{ page.class }} {% if page.price != true %}no-price{% endif %}">
+    <style>
+      body::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('/promo/faust.jpg');
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+        filter: blur(10px) brightness(0.5);
+        z-index: -1; /* Ensure the pseudo-element is behind the content */
+      }
+      .slide {
+        position: absolute; /* Ensure it covers the header */
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('/promo/faust.jpg');
+        background-position: center;
+        background-size: contain;
+        background-repeat: no-repeat;
+        z-index: 0; /* Ensure the slide is above the blurred background */
+        opacity: 1; /* Ensure it is fully visible */
+      }
+    </style>
     <header>
-      <div class="slide active" style="background-image: url('/promo/lolev-lot.jpg');">
-        <h1>Check out our Beer Garden</h1>
-      </div>
-      <div class="slide" style="background-image: url('/promo/shirts.jpg');">
-        <h1>Shirts Available</h1>
-      </div>
+      <h1>Faust</h1>
+      <h2>Imperial Plum Saison</h2>
+      <h3>$12 bottles</h3>
     </header>
-
+    <div class="slide active"></div>
     <script>
       const slides = document.querySelectorAll('.slide');
       let currentSlide = 0;

diff --git a/promo/faust.jpg b/promo/faust.jpg