Update venue.html

esl · Oct 28, 2024 · 6c0acbc · 6c0acbc
1 parent b6b3d5c
commit 6c0acbc
Showing 1 changed file with 82 additions and 29 deletions.
diff --git a/_includes/venue.html b/_includes/venue.html
@@ -1,31 +1,45 @@
-<!-- venue.html -->
-<div class="venue-container">
-    <div class="section venue" id="venue">
-        <div class="row">
-            <div class="left-content">
-                <h2 class="title">VENUE</h2>
-                <hr class="venue-divider" />
-                <p class="venue-subtitle">CodeNode</p>
-                <p class="venue-text">
-                    <i class="fas fa-map-marker-alt"></i> 10 South Place,<br />
-                    EC2M 7EB, <br />
-                    London
-                </p>
-                <a
-                    href="https://codenode.live/about-us/"
-                    class="venue-link"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    VENUE DETAILS
-                </a>
+<div class="venue-wrapper">
+    <div class="venue-container">
+        <div class="section venue" id="venue">
+            <div class="row">
+                <div class="left-content">
+                    <div class="venue-text-container">
+                        <h2 class="title">VENUE</h2>
+                        <hr class="venue-divider" />
+                        <p class="venue-subtitle">CodeNode</p>
+                        <p class="venue-text">
+                            <i class="fas fa-map-marker-alt"></i> 10 South
+                            Place,<br />
+                            EC2M 7EB, <br />
+                            London
+                        </p>
+                        <a
+                            href="https://codenode.live/about-us/"
+                            class="venue-link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            VENUE DETAILS
+                        </a>
+                    </div>
+                </div>
+                <div class="right-content">
+                    <div class="map-container">{% include map.html %}</div>
+                </div>
             </div>
-            <div class="right-content">{% include map.html %}</div>
         </div>
     </div>
 </div>
 
 <style>
+    .venue-wrapper {
+        background-color: #1a1a1a;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden; /* Prevent content overflow */
+    }
+
     .venue-container {
         max-width: 1400px;
         margin: 0 auto;
@@ -39,6 +53,8 @@ <h2 class="title">VENUE</h2>
         background-position: center;
         background-attachment: fixed;
         position: relative;
+        display: flex;
+        align-items: center;
     }
 
     .venue::before {
@@ -58,25 +74,49 @@ <h2 class="title">VENUE</h2>
         gap: 3rem;
         position: relative;
         z-index: 2;
+        width: 100%;
     }
 
     .left-content {
         flex: 1;
-        padding: 2rem;
+        display: flex;
+        align-items: center;
         opacity: 0;
         transform: translateX(-20px);
         animation: slideIn 0.8s ease forwards;
     }
 
+    .venue-text-container {
+        padding: 2rem;
+    }
+
     .right-content {
         flex: 1;
-        min-width: 300px;
-        height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         opacity: 0;
         transform: translateX(20px);
         animation: slideIn 0.8s ease forwards 0.2s;
     }
 
+    .map-container {
+        width: 100%;
+        max-width: 500px;
+        aspect-ratio: 4/3; /* This maintains a consistent ratio */
+        position: relative;
+        overflow: hidden;
+    }
+
+    .map-container iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100% !important;
+        height: 100% !important;
+        border: 0;
+    }
+
     .title {
         font-size: 2.5rem;
         margin-bottom: 1.5rem;
@@ -139,23 +179,30 @@ <h2 class="title">VENUE</h2>
 
     /* For mobile devices */
     @media (max-width: 768px) {
+        .venue {
+            padding: 3rem 0;
+        }
+
         .row {
             flex-direction: column;
             gap: 2rem;
         }
 
         .left-content {
             text-align: center;
+        }
+
+        .venue-text-container {
             padding: 1rem;
         }
 
         .venue-divider {
             margin: 1.5rem auto;
         }
 
-        .right-content {
-            width: 100%;
-            height: 300px;
+        .map-container {
+            max-width: 100%;
+            aspect-ratio: 16/9;
         }
 
         .title {
@@ -165,10 +212,16 @@ <h2 class="title">VENUE</h2>
         .venue-subtitle {
             font-size: 1.5rem;
         }
+    }
 
+    /* For smaller screens */
+    @media (max-width: 480px) {
         .venue {
             padding: 2rem 0;
-            background-attachment: scroll;
+        }
+
+        .map-container {
+            aspect-ratio: 4/3;
         }
     }
 </style>