diff --git a/.vscode/settings.json b/.vscode/settings.json index 96790fb51..14f714ecc 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 ea9343863..eafb386ec 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 cb200cf46..c50d73236 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 dffbc7d98..f2692c8ce 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 37f7c7f89..b061b00d0 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 d787e8808..ed22806f9 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 3a53ca3c1..acb0334e7 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 1351cb63d..90e742425 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 1e53bdef8..3398ed2b3 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 000000000..104ee9d47 --- /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) + }) +})