diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 177885a114..3955634575 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 8ae9bf2dfb..056d5d81dc 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 89b05ce86f..d40fcf56dd 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; } }