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

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
pull/30082/head
Tim Bannister 2021-10-13 22:47:29 +01:00
parent 85d3fb9900
commit 1e436f4587
14 changed files with 182 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/scss/_base.scss
View File

@ -810,11 +810,10 @@ section#cncf {
}
}
.td-search {
header > .header-filler {
height: $hero-padding-top;
background-color: black;
}
// Header filler size adjustment
.header-hero.filler {
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;

142
assets/scss/_custom.scss
View File

@ -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 {
padding: 0 !important;
body {
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 */
@media (min-aspect-ratio: 8/9) {
#fp-announcement {
min-height: 25vh;
}
}
#fp-announcement aside {
padding-top: 115px;
padding-bottom: 25px;
}
.announcement {
.content {
#announcement {
.announcement-main {
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
// for padding-top see _size.scss
padding-bottom: calc(max(2em, 2rem));
max-width: calc(min(1200px - 8em, 80vw));
}
> p {
.gridPage #announcement .content p,
.announcement > h4,
.announcement > h3 {
color: #ffffff;
/* always white */
h1, h2, h3, h4, h5, h6, p * {
color: #ffffff;
background: transparent;
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 {

8
assets/scss/_size.scss
View File

@ -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));
}
}

11
layouts/_default/baseof.html
View File

@ -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" . }}
{{ if .IsHome }}
{{ partial "frontpage-announcement.html" . }}
{{ else }}
{{ block "announcement" . }}
{{ 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>

16
layouts/_default/search.html
View File

@ -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>
</header>
{{ block "announcement" . }}
{{ if .IsHome }}
{{ partial "frontpage-announcement.html" . }}
{{ else }}
{{ block "announcement" . }}
{{ 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>

3
layouts/blog/baseof.html
View File

@ -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">

8
layouts/docs/baseof.html
View File

@ -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>

12
layouts/docs/docsportal_home.html
View File

@ -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 }}

56
layouts/docs/list.html
View File

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

8
layouts/docs/single.html
View File

@ -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 }}

10
layouts/partials/announcement.html
View File

@ -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 -}}

1
layouts/partials/docs/top-section-page.html Normal file
View File

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

34
layouts/partials/frontpage-announcement.html
View File

@ -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 }}

2
layouts/partials/navbar.html
View File

@ -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">