Merge pull request #49443 from shurup/upgrade-kubecon-section-fix

Make the video section height on the main page flexible

Author: k8s-ci-robot

assets/scss/_base.scss

@@ -11,9 +11,6 @@ $quickstart-button-padding: 0 50px;
 $vendor-strip-height: 88px;
 $vendor-strip-font-size: 16px;
 
-// video
-$video-section-height: 200px;
-
 @import "size";
 @import "documentation";
 
@@ -256,9 +253,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
 
 .header-hero {
@@ -317,13 +311,10 @@ $video-section-height: 200px;
 }
 
 // Video thingy
-#video {
-  height: $video-section-height;
-}
-
 #video {
   width: 100%;
   position: relative;
+  overflow: hidden;
   background-position: center center;
   background-size: cover;
 
@@ -426,6 +417,10 @@ $video-section-height: 200px;
   }
 }
 
+#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

@@ -7,9 +7,6 @@ $headline-wrapper-margin-bottom: 40px;
 $quickstart-button-padding: 0 50px;
 $vendor-strip-font-size: 16px;
 
-//video
-$video-section-height: 400px;
-
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -113,15 +110,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;
     }
   }