kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make video section height flexible 

Signed-off-by: Dmitry Shurupov <dmitry.shurupov@palark.com>
pull/49443/head
Dmitry Shurupov 2025-01-15 15:31:09 +07:00
parent 99d7743668
commit ff7c22b4f9
No known key found for this signature in database
3 changed files with 9 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/scss/_base.scss
View File

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

6
assets/scss/_desktop.scss
View File

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

7
assets/scss/_tablet.scss
View File

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