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

Reduce header height when announcement shown 

If there's an announcement showing, adjust the page header to use less
vertical space.

Also reduce the height of the announcement itself.
pull/21884/head
Tim Bannister 2020-06-18 13:10:24 +01:00
parent c63154c176
commit 8dc0106ac3
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/scss/_custom.scss
View File

@ -1,3 +1,5 @@
$announcement-size-adjustment: 8px;
/* GLOBAL */ /* GLOBAL */
.td-main { .td-main {
.row { .row {
@ -382,4 +384,32 @@ main.content {
} }
} }
} }
} }
/* ANNOUNCEMENTS */
section#fp-announcement ~ .header-hero {
padding: $announcement-size-adjustment 0;
> div {
margin-top: $announcement-size-adjustment;
margin-bottom: $announcement-size-adjustment;
}
h1, h2, h3, h4, h5 {
margin: $announcement-size-adjustment 0;
}
}
section#announcement ~ .header-hero {
padding: #{$announcement-size-adjustment / 2} 0;
> div {
margin-top: #{$announcement-size-adjustment / 2};
margin-bottom: #{$announcement-size-adjustment / 2};
padding-bottom: #{$announcement-size-adjustment / 2};
}
h1, h2, h3, h4, h5 {
margin: #{$announcement-size-adjustment / 2} 0;
}
}

2
assets/scss/_tablet.scss
View File

@ -23,7 +23,7 @@ $main-nav-left-button-size: 50px;
$main-nav-left-button-font-size: 18px; $main-nav-left-button-font-size: 18px;
// hero // hero
$hero-padding-top: 136px; $hero-padding-top: 116px;
$headline-wrapper-margin-bottom: 40px; $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;

13
static/css/announcement.css
View File

@ -21,7 +21,7 @@
} }
#announcement { #announcement {
padding-top: 125px; padding-top: 105px;
padding-bottom: 25px; padding-bottom: 25px;
} }
@ -29,11 +29,14 @@
padding-top: 40px; padding-top: 40px;
} }
#fp-announcement { /* Extra announcement height only for landscape viewports */
min-height: 30vh; @media (min-aspect-ratio: 8/9) {
#fp-announcement {
min-height: 25vh;
}
} }
#fp-announcement aside { #fp-announcement aside {
padding-top: 125px; padding-top: 115px;
padding-bottom: 35px; padding-bottom: 25px;
} }