Skip to content

Commit 1e436f4

Browse files
author
Tim Bannister
committed
Revise page header styles
- more compact headers when announcements are showing - when no announcement showing, top level docs sections (eg Concepts, Tasks, Reference) have a heading in the top nav - when announcement is showing, rely on the breadcrumb trail plus page introduction text for each top level section - switch from plain black docs header to match other sections
1 parent 85d3fb9 commit 1e436f4

File tree

14 files changed

+178
-145
lines changed

14 files changed

+178
-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

@@ -548,34 +558,6 @@ main.content {
548558
}
549559
}
550560

551-
/* ANNOUNCEMENTS */
552-
section#fp-announcement ~ .header-hero {
553-
padding: $announcement-size-adjustment 0;
554-
555-
> div {
556-
margin-top: $announcement-size-adjustment;
557-
margin-bottom: $announcement-size-adjustment;
558-
}
559-
560-
h1, h2, h3, h4, h5 {
561-
margin: $announcement-size-adjustment 0;
562-
}
563-
}
564-
565-
section#announcement ~ .header-hero {
566-
padding: #{$announcement-size-adjustment / 2} 0;
567-
568-
> div {
569-
margin-top: #{$announcement-size-adjustment / 2};
570-
margin-bottom: #{$announcement-size-adjustment / 2};
571-
padding-bottom: #{$announcement-size-adjustment / 2};
572-
}
573-
574-
h1, h2, h3, h4, h5 {
575-
margin: #{$announcement-size-adjustment / 2} 0;
576-
}
577-
}
578-
579561
/* DOCUMENTATION */
580562

581563
/* Don't show lead text */
@@ -601,12 +583,12 @@ body.td-documentation {
601583

602584
@media print {
603585
/* Do not print announcements */
604-
#announcement, section#announcement, #fp-announcement, section#fp-announcement {
586+
#announcement {
605587
display: none;
606588
}
607589
}
608590

609-
#announcement, #fp-announcement {
591+
#announcement {
610592
> * {
611593
color: inherit;
612594
background: inherit;
@@ -623,42 +605,90 @@ body.td-documentation {
623605
}
624606
}
625607

626-
#announcement {
627-
padding-top: 105px;
628-
padding-bottom: 25px;
629-
}
630-
631608
.header-hero {
632609
padding-top: 40px;
633610
}
634611

635-
/* Extra announcement height only for landscape viewports */
636-
@media (min-aspect-ratio: 8/9) {
637-
#fp-announcement {
638-
min-height: 25vh;
612+
#announcement {
613+
.announcement-main {
614+
margin-left: auto;
615+
margin-right: auto;
616+
margin-bottom: 0px;
617+
618+
// for padding-top see _size.scss
619+
padding-bottom: calc(max(2em, 2rem));
620+
621+
max-width: calc(min(1200px - 8em, 80vw));
622+
}
623+
624+
625+
/* always white */
626+
h1, h2, h3, h4, h5, h6, p * {
627+
color: #ffffff;
628+
background: transparent;
629+
630+
img.event-logo {
631+
display: inline-block;
632+
max-height: calc(min(80px, 8em));
633+
max-width: calc(min(240px, 33vw));
634+
float: right;
635+
}
639636
}
640637
}
641638

642-
#fp-announcement aside {
643-
padding-top: 115px;
644-
padding-bottom: 25px;
639+
#announcement + .header-hero {
640+
padding-top: 2em;
645641
}
646642

647-
.announcement {
648-
.content {
649-
margin-bottom: 0px;
643+
// Extra padding for anything except wide viewports
644+
@media (min-width: 992px) {
645+
#announcement aside { // more specific
646+
.announcement-main {
647+
padding-top: calc(max(8em, 8rem));
648+
}
650649
}
650+
}
651651

652+
@media (max-width: 768px) {
653+
#announcement {
654+
padding-top: 4rem;
655+
padding-bottom: 4rem;
656+
.announcement-main, aside .announcement-main {
657+
padding-top: calc(min(2rem,2em));
658+
}
659+
}
660+
}
652661

653-
> p {
654-
.gridPage #announcement .content p,
655-
.announcement > h4,
656-
.announcement > h3 {
657-
color: #ffffff;
662+
@media (max-width: 480px) {
663+
#announcement {
664+
padding-bottom: 0.5em;
665+
}
666+
#announcement aside {
667+
h1, h2, h3, h4, h5, h6 {
668+
img.event-logo {
669+
margin-left: auto;
670+
margin-right: auto;
671+
margin-bottom: 0.75em;
672+
display: block;
673+
max-height: initial;
674+
max-width: calc(min(calc(100vw - 2em), 240px));
675+
float: initial;
676+
}
658677
}
659678
}
660679
}
661680

681+
#announcement + .header-hero.filler {
682+
display: none;
683+
}
684+
685+
@media (min-width: 768px) {
686+
#announcement + .header-hero {
687+
display: none;
688+
}
689+
}
690+
691+
662692
// Match Docsy-imposed max width on text body
663693
@media (min-width: 1200px) {
664694
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/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)