From 8846f516f0052dc2b830ff0f5ad26e545fd6ae63 Mon Sep 17 00:00:00 2001 From: Steven Zimmer Date: Wed, 7 Sep 2022 10:53:00 -0700 Subject: [PATCH] Homepage hero updates (#238) --- .vscode/settings.json | 6 +- README.md | 12 +-- assets/scss/_styles_project.scss | 113 +++++++++------------------ config.toml | 2 +- content/en/_index.md | 4 +- layouts/index.html | 4 +- layouts/partials/head.html | 40 +++++----- layouts/partials/hero-homepage.html | 73 ++++++++++------- layouts/partials/hooks/body-end.html | 1 + static/js/ga-events.js | 8 ++ 10 files changed, 127 insertions(+), 136 deletions(-) create mode 100644 static/js/ga-events.js diff --git a/.vscode/settings.json b/.vscode/settings.json index 96790fb5..14f714ec 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "editor.formatOnSave": true, - "editor.formatOnType": true -} \ No newline at end of file + "editor.formatOnSave": true, + "editor.formatOnType": true +} diff --git a/README.md b/README.md index ea934386..eafb386e 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ type: 'en' is_index: true layout: 'index' has_carousel: true -news_banner: true +news_banner: false news_text: 'Testing news banner' news_link: 'https://google.com' ... @@ -136,8 +136,8 @@ The internal YouTube embed template provided by Hugo does not allow for the sett The promo bannder across the top of the home page is displayed depending on a parameter in config.toml and also configured there: [params.promoBanner] - show = true - text = "Spinnaker Summit is co-located with KubeCon this year! Join us on Oct 23-24 in Detroit." - ctaLink = "http://go.armory.io/ss22" - ctaText = "Register" - label = "UPCOMING EVENT" +show = true +text = "Spinnaker Summit is co-located with KubeCon this year! Join us on Oct 23-24 in Detroit." +ctaLink = "http://go.armory.io/ss22" +ctaText = "Register" +label = "UPCOMING EVENT" diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index cb200cf4..c50d7323 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -8,13 +8,15 @@ h3 { margin-bottom: 1.6rem; } -.jumbotron > * { + +.jumbotron>* { margin: 0 3rem; h3 { margin-bottom: 1.6rem; } } + header { margin: 0; background-color: $secondary; @@ -22,14 +24,17 @@ header { table.core-services { width: 100%; + td { width: max-content; + img { height: 25px; object-fit: contain; } } } + th.status-th { @media (max-width: 575.98px) { width: 50vw; @@ -40,6 +45,7 @@ th.status-th { display: flex; flex-wrap: wrap; justify-content: space-around; + .card { margin-bottom: 1rem; @@ -48,36 +54,45 @@ th.status-th { } } } + .cards { display: flex; flex-wrap: wrap; justify-content: space-around; + .card { margin-bottom: 1rem; + @include media-breakpoint-only(xl) { width: 19%; } + @include media-breakpoint-between(sm, lg) { width: 49%; } + @include media-breakpoint-between(xs, sm) { width: 100%; } } } + .card-deck { margin-right: 0; margin-left: 0; } + .td-home { .row { margin-right: 0; margin-left: 0; } } + .td-default main section:first-of-type { padding-top: 117px; } + main { .single-section { padding-top: 0; @@ -89,18 +104,22 @@ figure.captains-log { display: flex; justify-content: center; align-items: center; + img { max-width: 60vw; } } + .hero.home { @include media-breakpoint-between(lg, xl) { - height: calc(100vh - 45px); + // height: calc(100vh - 45px); + padding: 60px 0; margin: auto; margin-top: 50px; - justify-content: space-evenly; + // justify-content: space-evenly; } } + .hero { width: 100%; display: flex; @@ -113,16 +132,11 @@ figure.captains-log { background-position: center bottom; .intro-text { - display: flex; - justify-content: center; - align-items: center; - .intro-text-panel { background: $transparent-secondary; - display: flex; + flex-direction: column; align-items: flex-start; - justify-content: center; padding: 2rem; color: $white; @@ -147,12 +161,14 @@ figure.captains-log { .vid { padding-right: 0.25rem; padding-left: 0.25rem; + div { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } + iframe { position: absolute; top: 0; @@ -164,59 +180,6 @@ figure.captains-log { } } -.heading-with-text { - background-color: $secondary; - color: #fff; - display: flex; - justify-content: center; - align-items: center; - padding: 2rem; - width: 100%; - p { - margin-bottom: 0; - font-size: 1.2rem; - width: 50%; - } - .slack-container { - display: flex; - justify-content: center; - align-items: center; - a.join-slack { - display: block; - background-color: #fff; - width: 280px; - min-width: 200px; - height: 80px !important; - max-height: 80px; - background-image: url('/images/slack_logo.png'); - background-size: 120px; - background-repeat: no-repeat; - background-position: center; - margin-left: 3rem; - border: 1px solid #ededed; - border-radius: 10px; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); - } - } - @media (max-width: 991.98px) { - p { - width: 100%; - } - .slack-container { - position: relative; - flex-direction: column; - justify-content: center; - align-items: center; - margin: auto; - width: 90%; - - a.join-slack { - margin: 2rem 0; - margin-left: 0; - } - } - } -} .roles-appeal { margin: 2rem auto; padding: 1rem; @@ -227,6 +190,7 @@ figure.captains-log { padding: 1rem; margin: 1rem; } + @media (max-width: 991.98px) { .card-deck { background-color: $transparent-secondary; @@ -235,6 +199,7 @@ figure.captains-log { justify-content: stretch; flex-wrap: wrap; display: flex; + .card { width: 80vw; padding: 1rem; @@ -242,10 +207,12 @@ figure.captains-log { } } } + .logos-list { flex-wrap: wrap; justify-content: center; align-items: center; + img { max-width: 150px; min-width: 150px; @@ -253,6 +220,7 @@ figure.captains-log { padding: 15px; margin: 10px; } + @media (max-width: 575.98px) { img { max-width: 120px; @@ -266,6 +234,7 @@ figure.captains-log { flex-wrap: wrap; justify-content: center; align-items: baseline; + img { max-width: 300px; min-width: 150px; @@ -273,6 +242,7 @@ figure.captains-log { padding: 15px; margin: 10px; } + @media (max-width: 575.98px) { img { max-width: 120px; @@ -307,6 +277,7 @@ div.captains-log { margin-top: 105px; } } + @media (max-width: 991.98px) { .clear-header { padding-top: 117px; @@ -315,31 +286,25 @@ div.captains-log { .hero.home { padding-top: 117px; margin-top: 2rem; - flex-direction: column; - justify-content: center; - align-items: center; .intro-text { margin: auto; - width: 90%; - div.intro-text-panel { - display: flex; - flex-direction: column; - align-items: center; + div.intro-text-panel { border-radius: 5px; - width: 90%; + img { width: 75%; + @media (max-width: 575.98px) { align-self: flex-start; } } - h3 { - font-size: 1.2rem; + h1 { + font-size: 1.5rem; } } } } -} +} \ No newline at end of file diff --git a/config.toml b/config.toml index dffbc7d9..f2692c8c 100644 --- a/config.toml +++ b/config.toml @@ -54,7 +54,7 @@ id = "UA-70174036-1" [languages] [languages.en] title = "Spinnaker" -description = "Cloud Native Continuous Delivery" +description = "Multi-cloud continuous delivery for the enterprise" languageName ="English" # Weight used for sorting. weight = 1 diff --git a/content/en/_index.md b/content/en/_index.md index 37f7c7f8..b061b00d 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -1,6 +1,6 @@ --- title: 'Spinnaker' -subtitle: 'Cloud Native Continuous Delivery' +subtitle: 'Multi-cloud continuous delivery for the enterprise' subtitle_1: 'Fast, safe, repeatable deployments for every enterprise' date: '2020-06-04' type: 'en' @@ -8,7 +8,7 @@ is_index: true layout: 'index' has_carousel: true news_banner: false -news_text: +news_text: news_link: join_slack_text: 'Join Spinnaker Slack, a place for the community to come together. Use this vibrant workspace to ask and answer questions, connect with other operators and users, discuss issues with SIGs, and learn about Spinnaker!' diff --git a/layouts/index.html b/layouts/index.html index d787e880..ed22806f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+ diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 3a53ca3c..acb0334e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -1,37 +1,35 @@ - - {{ hugo.Generator }} {{ if eq (getenv "HUGO_ENV") "production" }} -{{ else }} - -{{ end }} -{{ range .AlternativeOutputFormats -}} - -{{ end -}} -{{ partialCached "favicons.html" . }} -{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }} -{{- template "_internal/opengraph.html" . -}} -{{- template "_internal/google_news.html" . -}} -{{- template "_internal/schema.html" . -}} -{{- template "_internal/twitter_cards.html" . -}} -{{ if eq (getenv "HUGO_ENV") "production" }} -{{ template "_internal/google_analytics_async.html" . }} -{{ end }} -{{ partialCached "head-css.html" . "asdf" }} + {{ end }} + {{ range .AlternativeOutputFormats -}} + + {{ end -}} + {{ partialCached "favicons.html" . }} + {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }} + {{- template "_internal/opengraph.html" . -}} + {{- template "_internal/google_news.html" . -}} + {{- template "_internal/schema.html" . -}} + {{- template "_internal/twitter_cards.html" . -}} + {{ if eq (getenv "HUGO_ENV") "production" }} + {{ template "_internal/google_analytics_async.html" . }} + {{ end }} + {{ partialCached "head-css.html" . "asdf" }} + crossorigin="anonymous" +> {{ if .Site.Params.offlineSearch }} + crossorigin="anonymous" +> {{end}} {{ if eq .Params.mermaid true }} {{ partial "mermaid-script.html" . }} {{ end }} -{{ partial "hooks/head-end.html" . }} +{{ partial "hooks/head-end.html" . }} \ No newline at end of file diff --git a/layouts/partials/hero-homepage.html b/layouts/partials/hero-homepage.html index 1351cb63..90e74242 100644 --- a/layouts/partials/hero-homepage.html +++ b/layouts/partials/hero-homepage.html @@ -1,34 +1,53 @@ -
-
-
- Spinnaker - -

- {{.Params.subtitle}}
- {{.Params.subtitle_1}} -

- {{ if .Params.news_banner }} - -

- {{.Params.news_text}} -

- {{ end }} +
+
+
+ Spinnaker Logo white + +

{{.Params.subtitle}}

- -
-
- {{ range $.Site.Data.roles }} - -
-
{{.name}}
-

- {{.prompt}} +

+
+
+ + Install Spinnaker +
+
+ + Join Slack +

+ Need help? Slack is the fastest way to get your questions answered

- - {{ end }}
diff --git a/layouts/partials/hooks/body-end.html b/layouts/partials/hooks/body-end.html index 1e53bdef..3398ed2b 100644 --- a/layouts/partials/hooks/body-end.html +++ b/layouts/partials/hooks/body-end.html @@ -22,3 +22,4 @@ {{ end }} {{ if .Site.Params.promoBanner.show }} {{end}} + diff --git a/static/js/ga-events.js b/static/js/ga-events.js new file mode 100644 index 00000000..104ee9d4 --- /dev/null +++ b/static/js/ga-events.js @@ -0,0 +1,8 @@ +const gaBtnTrack = Array.prototype.slice.call( + document.querySelectorAll('.ga-btn-track') +) +gaBtnTrack.forEach((btn) => { + btn.addEventListener('click', (e) => { + ga('send', 'event', e.target.role, e.type, e.target.innerText) + }) +})