Make video section height flexible

Signed-off-by: Dmitry Shurupov <[email protected]>

Author: shurup

assets/scss/_base.scss

@@ -32,9 +32,6 @@ $quickstart-button-padding: 0 50px;
 $vendor-strip-height: 88px;
 $vendor-strip-font-size: 16px;
 
-// video
-$video-section-height: 200px;
-
 @import "size";
 @import "documentation";
 
@@ -434,9 +431,6 @@ $ocean-nodes-padding-Y: 60px;
 $ocean-nodes-main-margin-bottom: 60px;
 $ocean-nodes-h3-margin-bottom: 30px;
 
-// video
-$video-section-height: 200px;
-
 // Home-specific
 
 .td-home {
@@ -514,13 +508,10 @@ section#cncf {
 }
 
 // Video thingy
-#video {
-  height: $video-section-height;
-}
-
 #video {
   width: 100%;
   position: relative;
+  overflow: hidden;
   background-position: center center;
   background-size: cover;
 
@@ -557,7 +548,7 @@ section#cncf {
     padding: 2px 8px;
     margin: 5px;
   }
-  
+
   #desktopKCButton {
     display: inline;
     position: absolute;
@@ -623,6 +614,10 @@ section#cncf {
   }
 }
 
+#video:has(#desktopKCButton) {
+  height: 580px;
+}
+
 #videoPlayer {
   @include fullScreen;
   background-color: rgba(0, 0, 0, 0.9);

assets/scss/_desktop.scss

@@ -1,6 +1,5 @@
 $main-max-width: 1200px;
 $vendor-strip-height: 44px;
-$video-section-height: 580px;
 
 @media screen and (min-width: 1024px) {
 
@@ -50,13 +49,12 @@ $video-section-height: 580px;
   }
 
   #video {
-    height: $video-section-height;
     position: relative;
-    background-position: center center;
+    background-position: top center;
     background-size: cover;
 
     &>.light-text {
-      margin-right: 10%;
+      margin: 0 10% 15px 0;
     }
   }
 

assets/scss/_tablet.scss

@@ -28,9 +28,6 @@ $headline-wrapper-margin-bottom: 40px;
 $quickstart-button-padding: 0 50px;
 $vendor-strip-font-size: 16px;
 
-//video
-$video-section-height: 400px;
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -134,15 +131,13 @@ $video-section-height: 400px;
   }
 
   #video {
-    height: $video-section-height;
     display: block;
-    height: 550px;
 
     & > .light-text {
       display: block;
       float: right;
       text-align: left;
-      margin-right: 5%;
+      margin: 0 5% 15px 0;
     }
   }