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

assets/scss/_base.scss

@@ -810,11 +810,10 @@ section#cncf {
   }
 }
 
-.td-search {
+// Header filler size adjustment
-  header > .header-filler {
+
-    height: $hero-padding-top;
+.header-hero.filler {
-    background-color: black;
+  height: $hero-padding-top;
-  }
 }
 
 // Docs specific
@@ -859,17 +858,6 @@ section#cncf {
 
 /* DOCUMENTATION */
 
-body.td-documentation {
-    header > .header-filler {
-      height: $hero-padding-top;
-      background-color: black;
-    }
-    /* Special case for if an announcement is active */
-    header section#announcement ~ .header-filler {
-      display: none;
-    }
-}
-
 // nav-tabs and tab-content
 .nav-tabs {
   border-bottom: none !important;

assets/scss/_custom.scss

@@ -26,6 +26,10 @@ $announcement-size-adjustment: 8px;
   }
 }
 
+.header-hero #quickstartButton.button {
+  margin-top: 1em;
+}
+
 section {
   .main-section {
     @media only screen and (min-width: 1024px) {
@@ -34,8 +38,14 @@ section {
   }
 }
 
-.td-outer {
+body {
-  padding: 0 !important;
+  display: grid;
+  grid-column-template: auto;
+
+  header + .td-outer {
+    min-height: 50vh;
+    height: auto;
+  }
 }
 
 
@@ -548,34 +558,6 @@ 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;
-    }
-}
-
 /* DOCUMENTATION */
 
 /* Don't show lead text */
@@ -601,12 +583,12 @@ body.td-documentation {
 
 @media print {
   /* Do not print announcements */
-  #announcement, section#announcement, #fp-announcement, section#fp-announcement {
+  #announcement {
     display: none;
   }
 }
 
-#announcement, #fp-announcement {
+#announcement {
   > * {
     color: inherit;
     background: inherit;
@@ -623,42 +605,90 @@ body.td-documentation {
   }
 }
 
-#announcement {
-  padding-top: 105px;
-  padding-bottom: 25px;
-}
-
 .header-hero {
   padding-top: 40px;
 }
 
-/* Extra announcement height only for landscape viewports */
+#announcement {
-@media (min-aspect-ratio: 8/9) {
+  .announcement-main {
-  #fp-announcement {
+    margin-left: auto;
-    min-height: 25vh;
+    margin-right: auto;
-  }
-}
-
-#fp-announcement aside {
-  padding-top: 115px;
-  padding-bottom: 25px;
-}
-
-.announcement {
-  .content {
     margin-bottom: 0px;
+
+    // for padding-top see _size.scss
+    padding-bottom: calc(max(2em, 2rem));
+
+    max-width: calc(min(1200px - 8em, 80vw));
   }
 
 
-  > p {
+  /* always white */
-    .gridPage #announcement .content p,
+  h1, h2, h3, h4, h5, h6, p * {
-    .announcement > h4,
+    color: #ffffff;
-    .announcement > h3 {
+    background: transparent;
-      color: #ffffff;
+
+    img.event-logo {
+      display: inline-block;
+      max-height: calc(min(80px, 8em));
+      max-width: calc(min(240px, 33vw));
+      float: right;
     }
   }
 }
 
+#announcement + .header-hero {
+  padding-top: 2em;
+}
+
+// Extra padding for anything except wide viewports
+@media (min-width: 992px) {
+  #announcement aside { // more specific
+    .announcement-main {
+      padding-top: calc(max(8em, 8rem));
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  #announcement {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+    .announcement-main, aside .announcement-main {
+      padding-top: calc(min(2rem,2em));
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  #announcement {
+    padding-bottom: 0.5em;
+  }
+  #announcement aside {
+    h1, h2, h3, h4, h5, h6 {
+      img.event-logo {
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 0.75em;
+        display: block;
+        max-height: initial;
+        max-width: calc(min(calc(100vw - 2em), 240px));
+        float: initial;
+      }
+    }
+  }
+}
+
+#announcement + .header-hero.filler {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  #announcement + .header-hero {
+    display: none;
+  }
+}
+
+
 // Match Docsy-imposed max width on text body
 @media (min-width: 1200px) {
   body.td-blog main .td-content > figure {

assets/scss/_size.scss

@@ -18,3 +18,11 @@ section,
   line-height: $vendor-strip-height;
   font-size: $vendor-strip-font-size;
 }
+
+#announcement {
+  min-height: $hero-padding-top;
+
+  .announcement-main {
+    padding-top: calc(max(8em, 8rem, #{$hero-padding-top} / 3));
+  }
+}

layouts/_default/baseof.html

@@ -6,26 +6,21 @@
   <body class="td-{{ .Kind }}{{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
     <header>
       {{ partial "navbar.html" . }}
-    </header>
+      {{ block "announcement" . }}
-    {{ block "announcement" . }}
-      {{ if .IsHome }}
-        {{ partial "frontpage-announcement.html" . }}
-      {{ else }}
         {{ partial "announcement.html" . }}
       {{ end }}
-    {{ end }}
 		{{ block "hero" . }}
 		<!--  HERO  -->
 		<section class="header-hero text-white pb-4 light-text">
 			<div class="main-section">
 				<div id="headlineWrapper">
 					<h1>{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}</h1>
-					<h5>{{ .Params.abstract }}</h5>
 				</div>
 				{{ block "hero-more" . }}{{ end }}
 			</div>
 		</section>
 		{{ block "post-hero" . }}
+    </header>
       {{ block "deprecated" . }}
         {{ if or .IsHome ( eq .Params.cid "partners" ) ( eq .Params.cid "community" ) }}
           {{ partial "deprecation-warning.html" . }}
@@ -37,8 +32,8 @@
       <main role="main" class="td-main">
         {{ block "main" . }}{{ end }}
       </main>
-      {{ partial "footer.html" . }}
     </div>
+    {{ partialCached "footer.html" . }}
     {{ partialCached "scripts.html" . }}
   </body>
 </html>

layouts/_default/search.html

@@ -6,15 +6,15 @@
   <body class="td-search {{- if ne .Params.cid "" -}}{{- printf " cid-%s" (lower .Params.cid) -}}{{- end -}}">
     <header>
       {{ partial "navbar.html" . }}
-      <div class="header-filler"></div>
+      {{ block "announcement" . }}
-    </header>
-    {{ block "announcement" . }}
-      {{ if .IsHome }}
-        {{ partial "frontpage-announcement.html" . }}
-      {{ else }}
         {{ partial "announcement.html" . }}
       {{ end }}
-    {{ end }}
+      {{ block "hero" . }}
+        <section class="header-hero filler">
+        </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
+    </header>
     <div class="td-outer">
       <main role="main" class="td-main">
         <section class="row td-search-result">
@@ -48,8 +48,8 @@
           </div>
         </section>
       </main>
-    {{ partial "footer.html" . }}
     </div>
+    {{ partial "footer.html" . }}
     {{ partialCached "scripts.html" . }}
   </body>
 </html>

layouts/blog/baseof.html

@@ -12,6 +12,7 @@
     <header>
       {{ partial "navbar.html" . }}
       {{ partial "announcement.html" . }}
+      {{ block "hero" . }}
       <section class="header-hero text-center text-white font-bold pb-4">
         <h1>
           {{ $sectionHeading := .Site.GetPage "section" .Section }}
@@ -20,6 +21,8 @@
           {{ end }}
         </h1>
       </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">

layouts/docs/baseof.html

@@ -8,7 +8,11 @@
     <header>
       {{ partial "navbar.html" . }}
       {{ partial "announcement.html" . }}
-      <div class="header-filler"></div>
+      {{ block "hero" . }}
+        <section class="header-hero filler">
+        </section>
+         {{ block "hero-more" . }}{{ end }}
+      {{ end }}
     </header>
     <div class="container-fluid td-outer">
       <div class="td-main">
@@ -41,8 +45,8 @@
           </div>
         </div>
       </div>
-      {{ partial "footer.html" . }}
     </div>
+    {{ partial "footer.html" . }}
     {{ partial "scripts.html" . }}
   </body>
 </html>

layouts/docs/docsportal_home.html

@@ -1,7 +1,4 @@
 {{ define "main" }}
-    {{ if not .Params.notitle }}
-	 <h1>{{ .Title }}</h1>
-    {{ end }}
     {{ template "docs-portal-content" . }}
 {{ end }}
 
@@ -19,4 +16,11 @@
     </div>
   </div>
 </section>
-{{ end }}
+{{ end }}
+{{ define "hero" }}
+    <section class="header-hero text-white pb-4 light-text ">
+    {{ if not .Params.notitle }}
+    <h1>{{ .Title }}</h1>
+    {{ end }}
+    </section>
+{{ end }}

layouts/docs/list.html

@@ -1,17 +1,43 @@
 {{ define "main" }}
-	<div class="td-content">
+{{- $child_of_first_section := false -}}
-		{{ $hasContent := false }}
+{{- with .Parent -}}
-		{{ with .File }}
+{{- if eq .CurrentSection .FirstSection -}}
-			{{ if ne .Filename "" }}
+{{- $child_of_first_section = true -}}
-				{{ $hasContent =  (ge (len $.RawContent) 100) }}
+{{- end -}}
-			{{ end }}
+{{- end -}}
-		{{ end }}
+    <div class="td-content">
-		{{ if $hasContent }}
+        {{ $hasContent := false }}
-			{{ partial "docs/content-page" (dict "ctx" $ "page" $ ) }}
+        {{ with .File }}
-		{{ else }}
+            {{ if ne .Filename "" }}
-			<h1>{{ .Title }}</h1>
+                {{ $hasContent =  (ge (len $.RawContent) 100) }}
-			{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+            {{ end }}
-		{{ end }}
+        {{ end }}
-		{{ partial "section-index.html" . }}
+        {{ if $hasContent }}
-	</div>
+            {{- if $child_of_first_section -}}
+            {{ partial "docs/top-section-page" (dict "ctx" $ "page" $ ) }}
+            {{- else -}}
+            {{ partial "docs/content-page" (dict "ctx" $ "page" $ ) }}
+            {{- end -}}
+        {{ else }}
+            <h1>{{ .Title }}</h1>
+            {{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+        {{ end }}
+        {{ partial "section-index.html" . }}
+    </div>
+{{ end }}
+{{ define "hero" }}
+{{- $child_of_first_section := false -}}
+{{- with .Parent -}}
+{{- if eq .CurrentSection .FirstSection -}}
+{{- $child_of_first_section = true -}}
+{{- end -}}
+{{- end -}}
+{{- if $child_of_first_section -}}
+        <section class="header-hero text-white pb-4 light-text ">
+           <h1>{{ .Title }}</h1>
+        </section>
+{{- else -}}
+        <section class="header-hero filler">
+        </section>
+{{- end -}}
 {{ end }}

layouts/docs/single.html

@@ -1,4 +1,12 @@
 {{ define "main" }}
     <div class="td-content">
     {{ partial "docs/content-page" (dict "ctx" . "page" .) }}
+    </div>
+{{ end }}
+{{ define "hero-more" }}
+{{ if .IsHome }}
+{{ with site.GetPage "section" "docs/tutorials/kubernetes-basics" }}
+<a href="{{ .RelPermalink }}" id="quickstartButton" class="button">{{ .LinkTitle }}</a>
+{{ end }}
+{{ end }}
 {{ end }}

layouts/partials/announcement.html

@@ -15,18 +15,18 @@
     {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
       {{- if not $announcementShown -}}
       {{- $announcementShown = true -}}
-  <section lang="en" id="announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
+  <div lang="en" id="announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
     <aside>
-      <div class="content announcement main-section" data-nosnippet>
+      <div class="announcement-main" data-nosnippet>
         {{ if .title }}
-        <h4 class="announcement">
+        <h4>
             {{ .title | markdownify }}
         </h4>
         {{ end }}
-        <p class="announcement">{{ .message | markdownify }}</p>
+        <p>{{ .message | markdownify }}</p>
       </div>
     </aside>
-  </section>
+  </div>
       {{- end -}}
       {{- end -}}
     {{- end -}}

layouts/partials/docs/top-section-page.html

@@ -0,0 +1 @@
+{{ .page.Content }}

layouts/partials/frontpage-announcement.html

@@ -1,34 +0,0 @@
-{{ $dateRegExp := "^[0-9]{4}-1[0-2]|0[1-9]-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:60|[0-5][0-9])$" }}
-{{ $announcementShown := false }}
-{{ range $.Site.Data.announcements }}
-  {{ range .announcements }}
-  {{ if or ( eq .endTime nil ) ( eq .message nil ) }}
-    {{ errorf "Invalid announcement: %#v" . }}
-  {{ end }}
-  {{ if and (ne .startTime nil ) (lt ( len ( findRE $dateRegExp .startTime ) ) 1 ) }}
-    {{ errorf "Invalid announcement start time: %#v" .startTime }}
-  {{ end }}
-  {{ if lt ( len ( findRE $dateRegExp .endTime ) ) 1 }}
-    {{ errorf "Invalid announcement end time: %#v" .endTime }}
-  {{ end }}
-  {{ if or (eq .startTime nil ) (lt ( time .startTime ) now ) }}
-    {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}}
-      {{- if not $announcementShown -}}
-      {{- $announcementShown = true -}}
-  <section lang="en" id="fp-announcement" style="background-color: #3371e3; color: #fff; {{ .style | safeCSS }}">
-    <aside>
-      <div class="content announcement main-section" data-nosnippet>
-        {{ if .title }}
-        <h4 class="announcement">
-            {{ .title | markdownify }}
-        </h4>
-        {{ end }}
-        <p class="announcement">{{ .message | markdownify }}</p>
-      </div>
-    </aside>
-  </section>
-      {{- end -}}
-      {{- end -}}
-    {{- end -}}
-  {{ end }}
-{{ end }}

layouts/partials/navbar.html

@@ -1,5 +1,5 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} flex-row td-navbar" data-auto-burger="primary">
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} flex-column flex-md-row td-navbar" data-auto-burger="primary">
         <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}"></a>
 	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">