diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss index 4113b49bee..97ce27fe28 100644 --- a/assets/scss/_base.scss +++ b/assets/scss/_base.scss @@ -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; diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index 20a36b6175..fe870bb6ba 100644 --- a/assets/scss/_custom.scss +++ b/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 { - 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 { diff --git a/assets/scss/_size.scss b/assets/scss/_size.scss index 9f0b7f655f..14d56201c3 100644 --- a/assets/scss/_size.scss +++ b/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)); + } +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 612bddbb2c..456fed5e05 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,26 +6,21 @@
{{ partial "navbar.html" . }} -
- {{ block "announcement" . }} - {{ if .IsHome }} - {{ partial "frontpage-announcement.html" . }} - {{ else }} + {{ block "announcement" . }} {{ partial "announcement.html" . }} {{ end }} - {{ end }} {{ block "hero" . }}

{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}

-
{{ .Params.abstract }}
{{ block "hero-more" . }}{{ end }}
{{ block "post-hero" . }} + {{ block "deprecated" . }} {{ if or .IsHome ( eq .Params.cid "partners" ) ( eq .Params.cid "community" ) }} {{ partial "deprecation-warning.html" . }} @@ -37,8 +32,8 @@
{{ block "main" . }}{{ end }}
- {{ partial "footer.html" . }} + {{ partialCached "footer.html" . }} {{ partialCached "scripts.html" . }} \ No newline at end of file diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 286e476de1..70f14c28d9 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -6,15 +6,15 @@
{{ partial "navbar.html" . }} -
-
- {{ block "announcement" . }} - {{ if .IsHome }} - {{ partial "frontpage-announcement.html" . }} - {{ else }} + {{ block "announcement" . }} {{ partial "announcement.html" . }} {{ end }} - {{ end }} + {{ block "hero" . }} +
+
+ {{ block "hero-more" . }}{{ end }} + {{ end }} +
@@ -48,8 +48,8 @@
- {{ partial "footer.html" . }} + {{ partial "footer.html" . }} {{ partialCached "scripts.html" . }} diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index d801da9d8a..4163c5b474 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -12,6 +12,7 @@
{{ partial "navbar.html" . }} {{ partial "announcement.html" . }} + {{ block "hero" . }}

{{ $sectionHeading := .Site.GetPage "section" .Section }} @@ -20,6 +21,8 @@ {{ end }}

+ {{ block "hero-more" . }}{{ end }} + {{ end }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 7dae9a6e90..846073bcf1 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -8,7 +8,11 @@
{{ partial "navbar.html" . }} {{ partial "announcement.html" . }} -
+ {{ block "hero" . }} +
+
+ {{ block "hero-more" . }}{{ end }} + {{ end }}
@@ -41,8 +45,8 @@
- {{ partial "footer.html" . }}
+ {{ partial "footer.html" . }} {{ partial "scripts.html" . }} diff --git a/layouts/docs/docsportal_home.html b/layouts/docs/docsportal_home.html index 899e648a68..330197ea1c 100644 --- a/layouts/docs/docsportal_home.html +++ b/layouts/docs/docsportal_home.html @@ -1,7 +1,4 @@ {{ define "main" }} - {{ if not .Params.notitle }} -

{{ .Title }}

- {{ end }} {{ template "docs-portal-content" . }} {{ end }} @@ -19,4 +16,11 @@ -{{ end }} \ No newline at end of file +{{ end }} +{{ define "hero" }} +
+ {{ if not .Params.notitle }} +

{{ .Title }}

+ {{ end }} +
+{{ end }} diff --git a/layouts/docs/list.html b/layouts/docs/list.html index 81403b5396..fc02b249af 100644 --- a/layouts/docs/list.html +++ b/layouts/docs/list.html @@ -1,17 +1,43 @@ {{ define "main" }} -
- {{ $hasContent := false }} - {{ with .File }} - {{ if ne .Filename "" }} - {{ $hasContent = (ge (len $.RawContent) 100) }} - {{ end }} - {{ end }} - {{ if $hasContent }} - {{ partial "docs/content-page" (dict "ctx" $ "page" $ ) }} - {{ else }} -

{{ .Title }}

- {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} - {{ end }} - {{ partial "section-index.html" . }} -
+{{- $child_of_first_section := false -}} +{{- with .Parent -}} +{{- if eq .CurrentSection .FirstSection -}} +{{- $child_of_first_section = true -}} +{{- end -}} +{{- end -}} +
+ {{ $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 }} +

{{ .Title }}

+ {{ with .Params.description }}
{{ . | markdownify }}
{{ end }} + {{ end }} + {{ partial "section-index.html" . }} +
+{{ 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 -}} +
+

{{ .Title }}

+
+{{- else -}} +
+
+{{- end -}} {{ end }} diff --git a/layouts/docs/single.html b/layouts/docs/single.html index dec5eb46b6..935b7fd051 100644 --- a/layouts/docs/single.html +++ b/layouts/docs/single.html @@ -1,4 +1,12 @@ {{ define "main" }}
{{ partial "docs/content-page" (dict "ctx" . "page" .) }} +
+{{ end }} +{{ define "hero-more" }} +{{ if .IsHome }} +{{ with site.GetPage "section" "docs/tutorials/kubernetes-basics" }} +{{ .LinkTitle }} +{{ end }} +{{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/announcement.html b/layouts/partials/announcement.html index b1d68292db..bff71bfe4c 100644 --- a/layouts/partials/announcement.html +++ b/layouts/partials/announcement.html @@ -15,18 +15,18 @@ {{- if or (eq .endTime nil ) (gt ( time .endTime ) now ) -}} {{- if not $announcementShown -}} {{- $announcementShown = true -}} -
+
-
+ {{- end -}} {{- end -}} {{- end -}} diff --git a/layouts/partials/docs/top-section-page.html b/layouts/partials/docs/top-section-page.html new file mode 100644 index 0000000000..69834b3c53 --- /dev/null +++ b/layouts/partials/docs/top-section-page.html @@ -0,0 +1 @@ +{{ .page.Content }} diff --git a/layouts/partials/frontpage-announcement.html b/layouts/partials/frontpage-announcement.html deleted file mode 100644 index e70a387301..0000000000 --- a/layouts/partials/frontpage-announcement.html +++ /dev/null @@ -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 -}} -
- -
- {{- end -}} - {{- end -}} - {{- end -}} - {{ end }} -{{ end }} \ No newline at end of file diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index 63726a0f7e..ed269dc6b0 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -1,5 +1,5 @@ {{ $cover := .HasShortcode "blocks/cover" }} -