Skip to content

Commit 098501e

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #30082 from sftim/20211013_revise_header_style
Revise page header styles
2 parents d9a041e + 23b677d commit 098501e

File tree

15 files changed

+181
-145
lines changed

15 files changed

+181
-145
lines changed

‎assets/scss/_base.scss

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -810,11 +810,10 @@ section#cncf {
810810
}
811811
}
812812

813-
.td-search {
814-
header > .header-filler {
815-
height: $hero-padding-top;
816-
background-color: black;
817-
}
813+
// Header filler size adjustment
814+
815+
.header-hero.filler {
816+
height: $hero-padding-top;
818817
}
819818

820819
// Docs specific
@@ -859,17 +858,6 @@ section#cncf {
859858

860859
/* DOCUMENTATION */
861860

862-
body.td-documentation {
863-
header > .header-filler {
864-
height: $hero-padding-top;
865-
background-color: black;
866-
}
867-
/* Special case for if an announcement is active */
868-
header section#announcement ~ .header-filler {
869-
display: none;
870-
}
871-
}
872-
873861
// nav-tabs and tab-content
874862
.nav-tabs {
875863
border-bottom: none !important;

‎assets/scss/_custom.scss

Lines changed: 82 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ $announcement-size-adjustment: 8px;
2626
}
2727
}
2828

29+
.header-hero #quickstartButton.button {
30+
margin-top: 1em;
31+
}
32+
2933
section {
3034
.main-section {
3135
@media only screen and (min-width: 1024px) {
@@ -34,8 +38,14 @@ section {
3438
}
3539
}
3640

37-
.td-outer {
38-
padding: 0 !important;
41+
body {
42+
display: grid;
43+
grid-column-template: auto;
44+
45+
header + .td-outer {
46+
min-height: 50vh;
47+
height: auto;
48+
}
3949
}
4050

4151

@@ -561,34 +571,6 @@ main.content {
561571
}
562572
}
563573

564-
/* ANNOUNCEMENTS */
565-
section#fp-announcement ~ .header-hero {
566-
padding: $announcement-size-adjustment 0;
567-
568-
> div {
569-
margin-top: $announcement-size-adjustment;
570-
margin-bottom: $announcement-size-adjustment;
571-
}
572-
573-
h1, h2, h3, h4, h5 {
574-
margin: $announcement-size-adjustment 0;
575-
}
576-
}
577-
578-
section#announcement ~ .header-hero {
579-
padding: #{$announcement-size-adjustment / 2} 0;
580-
581-
> div {
582-
margin-top: #{$announcement-size-adjustment / 2};
583-
margin-bottom: #{$announcement-size-adjustment / 2};
584-
padding-bottom: #{$announcement-size-adjustment / 2};
585-
}
586-
587-
h1, h2, h3, h4, h5 {
588-
margin: #{$announcement-size-adjustment / 2} 0;
589-
}
590-
}
591-
592574
/* DOCUMENTATION */
593575

594576
/* Don't show lead text */
@@ -614,12 +596,12 @@ body.td-documentation {
614596

615597
@media print {
616598
/* Do not print announcements */
617-
#announcement, section#announcement, #fp-announcement, section#fp-announcement {
599+
#announcement {
618600
display: none;
619601
}
620602
}
621603

622-
#announcement, #fp-announcement {
604+
#announcement {
623605
> * {
624606
color: inherit;
625607
background: inherit;
@@ -636,42 +618,90 @@ body.td-documentation {
636618
}
637619
}
638620

639-
#announcement {
640-
padding-top: 105px;
641-
padding-bottom: 25px;
642-
}
643-
644621
.header-hero {
645622
padding-top: 40px;
646623
}
647624

648-
/* Extra announcement height only for landscape viewports */
649-
@media (min-aspect-ratio: 8/9) {
650-
#fp-announcement {
651-
min-height: 25vh;
625+
#announcement {
626+
.announcement-main {
627+
margin-left: auto;
628+
margin-right: auto;
629+
margin-bottom: 0px;
630+
631+
// for padding-top see _size.scss
632+
padding-bottom: calc(max(2em, 2rem));
633+
634+
max-width: calc(min(1200px - 8em, 80vw));
635+
}
636+
637+
638+
/* always white */
639+
h1, h2, h3, h4, h5, h6, p * {
640+
color: #ffffff;
641+
background: transparent;
642+
643+
img.event-logo {
644+
display: inline-block;
645+
max-height: calc(min(80px, 8em));
646+
max-width: calc(min(240px, 33vw));
647+
float: right;
648+
}
652649
}
653650
}
654651

655-
#fp-announcement aside {
656-
padding-top: 115px;
657-
padding-bottom: 25px;
652+
#announcement + .header-hero {
653+
padding-top: 2em;
658654
}
659655

660-
.announcement {
661-
.content {
662-
margin-bottom: 0px;
656+
// Extra padding for anything except wide viewports
657+
@media (min-width: 992px) {
658+
#announcement aside { // more specific
659+
.announcement-main {
660+
padding-top: calc(max(8em, 8rem));
661+
}
663662
}
663+
}
664664

665+
@media (max-width: 768px) {
666+
#announcement {
667+
padding-top: 4rem;
668+
padding-bottom: 4rem;
669+
.announcement-main, aside .announcement-main {
670+
padding-top: calc(min(2rem,2em));
671+
}
672+
}
673+
}
665674

666-
> p {
667-
.gridPage #announcement .content p,
668-
.announcement > h4,
669-
.announcement > h3 {
670-
color: #ffffff;
675+
@media (max-width: 480px) {
676+
#announcement {
677+
padding-bottom: 0.5em;
678+
}
679+
#announcement aside {
680+
h1, h2, h3, h4, h5, h6 {
681+
img.event-logo {
682+
margin-left: auto;
683+
margin-right: auto;
684+
margin-bottom: 0.75em;
685+
display: block;
686+
max-height: initial;
687+
max-width: calc(min(calc(100vw - 2em), 240px));
688+
float: initial;
689+
}
671690
}
672691
}
673692
}
674693

694+
#announcement + .header-hero.filler {
695+
display: none;
696+
}
697+
698+
@media (min-width: 768px) {
699+
#announcement + .header-hero {
700+
display: none;
701+
}
702+
}
703+
704+
675705
// Match Docsy-imposed max width on text body
676706
@media (min-width: 1200px) {
677707
body.td-blog main .td-content > figure {

‎assets/scss/_size.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,11 @@ section,
1818
line-height: $vendor-strip-height;
1919
font-size: $vendor-strip-font-size;
2020
}
21+
22+
#announcement {
23+
min-height: $hero-padding-top;
24+
25+
.announcement-main {
26+
padding-top: calc(max(8em, 8rem, #{$hero-padding-top} / 3));
27+
}
28+
}

‎layouts/_default/baseof.html

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,21 @@
66
<body class="td-{{ .Kind }}{{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
77
<header>
88
{{ partial "navbar.html" . }}
9-
</header>
10-
{{ block "announcement" . }}
11-
{{ if .IsHome }}
12-
{{ partial "frontpage-announcement.html" . }}
13-
{{ else }}
9+
{{ block "announcement" . }}
1410
{{ partial "announcement.html" . }}
1511
{{ end }}
16-
{{ end }}
1712
{{ block "hero" . }}
1813
<!-- HERO -->
1914
<section class="header-hero text-white pb-4 light-text">
2015
<div class="main-section">
2116
<div id="headlineWrapper">
2217
<h1>{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}</h1>
23-
<h5>{{ .Params.abstract }}</h5>
2418
</div>
2519
{{ block "hero-more" . }}{{ end }}
2620
</div>
2721
</section>
2822
{{ block "post-hero" . }}
23+
</header>
2924
{{ block "deprecated" . }}
3025
{{ if or .IsHome ( eq .Params.cid "partners" ) ( eq .Params.cid "community" ) }}
3126
{{ partial "deprecation-warning.html" . }}
@@ -37,8 +32,8 @@ <h5>{{ .Params.abstract }}</h5>
3732
<main role="main" class="td-main">
3833
{{ block "main" . }}{{ end }}
3934
</main>
40-
{{ partial "footer.html" . }}
4135
</div>
36+
{{ partialCached "footer.html" . }}
4237
{{ partialCached "scripts.html" . }}
4338
</body>
4439
</html>

‎layouts/_default/search.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
<body class="td-search {{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
77
<header>
88
{{ partial "navbar.html" . }}
9-
<div class="header-filler"></div>
10-
</header>
11-
{{ block "announcement" . }}
12-
{{ if .IsHome }}
13-
{{ partial "frontpage-announcement.html" . }}
14-
{{ else }}
9+
{{ block "announcement" . }}
1510
{{ partial "announcement.html" . }}
1611
{{ end }}
17-
{{ end }}
12+
{{ block "hero" . }}
13+
<section class="header-hero filler">
14+
</section>
15+
{{ block "hero-more" . }}{{ end }}
16+
{{ end }}
17+
</header>
1818
<div class="td-outer">
1919
<main role="main" class="td-main">
2020
<section class="row td-search-result">
@@ -48,8 +48,8 @@ <h2 class="ml-4">{{ .Title }}</h2>
4848
</div>
4949
</section>
5050
</main>
51-
{{ partial "footer.html" . }}
5251
</div>
52+
{{ partial "footer.html" . }}
5353
{{ partialCached "scripts.html" . }}
5454
</body>
5555
</html>

‎layouts/blog/baseof.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<header>
1313
{{ partial "navbar.html" . }}
1414
{{ partial "announcement.html" . }}
15+
{{ block "hero" . }}
1516
<section class="header-hero text-center text-white font-bold pb-4">
1617
<h1>
1718
{{ $sectionHeading := .Site.GetPage "section" .Section }}
@@ -20,6 +21,8 @@ <h1>
2021
{{ end }}
2122
</h1>
2223
</section>
24+
{{ block "hero-more" . }}{{ end }}
25+
{{ end }}
2326
</header>
2427
<div class="container-fluid td-outer">
2528
<div class="td-main">

‎layouts/case-studies/list.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,6 @@ <h3>{{ .Title }}</h3>
7676
<a href="{{ .page.RelPermalink }}"{{ if $isForeignLanguage }} target="_blank"{{ end }}>{{ T "main_read_about"}} {{ .page.LinkTitle }}</a>
7777
</div>
7878
{{ end }}
79+
{{ define "announcement" }}
80+
<!-- skip announcement -->
81+
{{ end }}

‎layouts/docs/baseof.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
<header>
99
{{ partial "navbar.html" . }}
1010
{{ partial "announcement.html" . }}
11-
<div class="header-filler"></div>
11+
{{ block "hero" . }}
12+
<section class="header-hero filler">
13+
</section>
14+
{{ block "hero-more" . }}{{ end }}
15+
{{ end }}
1216
</header>
1317
<div class="container-fluid td-outer">
1418
<div class="td-main">
@@ -41,8 +45,8 @@
4145
</div>
4246
</div>
4347
</div>
44-
{{ partial "footer.html" . }}
4548
</div>
49+
{{ partial "footer.html" . }}
4650
{{ partial "scripts.html" . }}
4751
</body>
4852
</html>

‎layouts/docs/docsportal_home.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
{{ define "main" }}
2-
{{ if not .Params.notitle }}
3-
<h1>{{ .Title }}</h1>
4-
{{ end }}
52
{{ template "docs-portal-content" . }}
63
{{ end }}
74

@@ -19,4 +16,11 @@ <h1>{{ .Title }}</h1>
1916
</div>
2017
</div>
2118
</section>
22-
{{ end }}
19+
{{ end }}
20+
{{ define "hero" }}
21+
<section class="header-hero text-white pb-4 light-text ">
22+
{{ if not .Params.notitle }}
23+
<h1>{{ .Title }}</h1>
24+
{{ end }}
25+
</section>
26+
{{ end }}

0 commit comments

Comments
 (0)