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

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

Make the video section height on the main page flexible
pull/51231/head
Kubernetes Prow Robot 2025-06-10 13:48:55 -07:00 committed by GitHub
parent c2da7e5e86 ff7c22b4f9
commit 3275d09e34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 8 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/scss/_base.scss
View File

@ -11,9 +11,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";
@ -256,9 +253,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
.header-hero { .header-hero {
@ -317,13 +311,10 @@ $video-section-height: 200px;
} }
// 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;
@ -426,6 +417,10 @@ $video-section-height: 200px;
} }
} }
#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

@ -7,9 +7,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;
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////
@ -113,15 +110,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;
} }
} }