used fixed positioning values to avoid overlapping

Signed-off-by: flynnduism <[email protected]>
brigadecore · Jan 12, 2022 · c5aef13 · c5aef13
1 parent 3853280
commit c5aef13
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 38 deletions.
diff --git a/assets/scss/brigade-media.scss b/assets/scss/brigade-media.scss
@@ -74,72 +74,61 @@
     .retrobox.retrobox-v2 {
         margin: 0 !important;
     }
-
-    // #kubernetes {
-    //     width: 95vw;
-    //     height: 500px;
-    //     top: 2280px;
-    // }
-
-    // video {
-    //     top: 205vh;
-    //     width: 92vw;
-    // }
-
-    // #community {
-    //     left: 12vw;
-    //     right: 10vw;
-    //     top: 200vh;
-    // }
-
-    // #v2 {
-    //     top: 250vh;
-    // }
 }
 
 /* tablet and up */
 @media screen and (min-width: 769px) {
     .pipe-wrapper {
         margin-top: -37.5vw;
-        min-height: 200vh;
+        min-height: 3550px !important;
     }
 
     .navbar {
         z-index: 1100;
         padding-top: 0 !important;
-        min-height: 12rem !important;
+        min-height: 10rem !important;
 
         .navbar-burger {
             margin-top: -7rem !important;
         }
     }
 
     #intro {
-        padding-top: 22.5vw;
+        padding-top: 15vw !important;
         position: relative;
         min-height: 65vw;
         margin-bottom: -12.5vw;
+
+        h1 {
+            font-size: 5vw !important;
+            padding: 0;
+            max-width: 50vw;
+        }
+    }
+
+    #code {
+        top: 680px !important;
+        left: 5vw !important;
     }
 
     #kubernetes {
-        width: 95vw;
-        height: 500px;
-        top: 2280px;
+        top: 1540px !important;
     }
 
-    video {
-        top: 205vh;
-        width: 92vw;
+    #video {
+        top: 2215px !important;
+        width: 100vw !important;
     }
 
     #community {
-        left: 12vw;
-        right: 10vw;
-        top: 200vh;
+        top: 2140px !important;
     }
 
     #v2 {
-        top: 250vh;
+        left: 0 !important;
+        right: 0 !important;
+        top: 2750px !important;
+        width: 120% !important;
     }
 }
 
@@ -150,16 +139,50 @@
     }
 
     .pipe-wrapper {
-        min-height: 350vh !important;
+        min-height: 3850px !important;
+    }
+
+    #intro {
+        min-height: 668px !important;
+
+        h1 {
+            font-size: 3.5rem !important;
+        }
+    }
+
+    #code {
+        top: 962px !important;
+    }
+
+    #kubernetes {
+        top: 1880px !important;
+    }
+
+    #video {
+        top: 2610px !important;
+    }
+
+    #community {
+        top: 2520px !important;
+    }
+
+    #v2 {
+        top: 3120px !important;
     }
 }
 
 /* widescreen and up */
 @media screen and (min-width: 1216px) {
+    .pipe-wrapper {
+        min-height: 1850px !important;
+    }
 
 }
 
 /* fullhd and up */
 @media screen and (min-width: 1408px) {
+    .pipe-wrapper {
+        min-height: 1850px !important;
+    }
 
 }
diff --git a/index.html b/index.html
@@ -258,7 +258,7 @@ <h4>Example use cases:</h4>
     <section id="kubernetes" class="brigade-cluster content retrobox">
       <div class="row">
         <div class="columns is-mobile">
-          <div class="is-half-tablet column">
+          <div class="is-half-desktop column">
 
             <h2>Runs inside your cluster</h2>
             <p>By running Brigade as a service inside your <a href="https://kubernetes.io/" target="_blank">Kubernetes</a> cluster, you can harness the power of millions of available Docker images.</p>
@@ -273,7 +273,7 @@ <h2>Runs inside your cluster</h2>
             <iframe width="100%" height="315" class="is-hidden-tablet" src="https://www.youtube-nocookie.com/embed/EqJ9_k56Q3U?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           </div>
 
-          <div class="is-half column is-hidden-mobile">
+          <div class="is-half column is-hidden-touch">
             <aside class="cli">
               <pre>
   <em>// install Brigade using Helm v3.7.0+</em>
@@ -317,7 +317,7 @@ <h2>Fast &amp; Flexible</h2>
 
     <div class="row fullwidth" id="v2">
       <div class="columns is-left is-mobile content">
-        <div class="column retrobox retrobox-v2 is-three-quarters-tablet is-full-mobile">
+        <div class="column retrobox retrobox-v2 is-three-quarters-desktop is-full-mobile">
           <h2>What's new in Brigade v2?</h2>
 
           <p>Brigade has been <a href="https://github.com/brigadecore/brigade/tree/master/2.0-PROPOSAL">re-designed</a> from the ground up, bringing some exciting features and notable improvements over v1. However, much of Brigade's core functionality remains the same. We're still focused on cloud-native, event-driven scripting. Here are some of the highlights:</p>