From ff7c22b4f97fbd31035519e252fdbffb73ad97f4 Mon Sep 17 00:00:00 2001
From: Dmitry Shurupov <dmitry.shurupov@palark.com>
Date: Wed, 15 Jan 2025 15:31:09 +0700
Subject: [PATCH] Make video section height flexible

Signed-off-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
---
 assets/scss/_base.scss    | 17 ++++++-----------
 assets/scss/_desktop.scss |  6 ++----
 assets/scss/_tablet.scss  |  7 +------
 3 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 177885a114d39..39556345756d8 100644
--- a/assets/scss/_base.scss
+++ b/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);
diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss
index 8ae9bf2dfbb1a..056d5d81dc818 100644
--- a/assets/scss/_desktop.scss
+++ b/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;
     }
   }
 
diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss
index 89b05ce86f7b4..d40fcf56ddaf0 100644
--- a/assets/scss/_tablet.scss
+++ b/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;
     }
   }