From 1390e0e07f7cc1e98b31855d6b24c073e9937891 Mon Sep 17 00:00:00 2001 From: Steven Zimmer Date: Tue, 13 Sep 2022 16:30:16 -0700 Subject: [PATCH] Homepage hero section complete (#241) --- assets/scss/_homepage-hero.scss | 51 ++++++++++ assets/scss/_styles_project.scss | 5 +- layouts/index.html | 2 +- layouts/partials/hero-homepage.html | 105 +++++++++++--------- layouts/partials/navbar.html | 9 +- static/images/hero-background.jpg | Bin 0 -> 1007045 bytes static/images/slack-logo-text.png | Bin 0 -> 5430 bytes static/images/slack-logo.png | Bin 0 -> 4531 bytes static/images/spinnaker-logo-horizontal.png | Bin 0 -> 6611 bytes static/images/spinnaker-logo-stacked.png | Bin 0 -> 32430 bytes static/js/ga-events.js | 2 +- 11 files changed, 121 insertions(+), 53 deletions(-) create mode 100644 assets/scss/_homepage-hero.scss create mode 100644 static/images/hero-background.jpg create mode 100644 static/images/slack-logo-text.png create mode 100644 static/images/slack-logo.png create mode 100644 static/images/spinnaker-logo-horizontal.png create mode 100644 static/images/spinnaker-logo-stacked.png diff --git a/assets/scss/_homepage-hero.scss b/assets/scss/_homepage-hero.scss new file mode 100644 index 00000000..65f99245 --- /dev/null +++ b/assets/scss/_homepage-hero.scss @@ -0,0 +1,51 @@ +.homepage-hero { + overflow: hidden; + margin-top: 50px; + @include media-breakpoint-between(xs, md) { + margin-top: 107px; + } + &-background { + top: 0; + left: 0; + right: 0; + bottom: 0; + img { + object-fit: cover; + } + } + + h1 { + font-size: 60px; + + @include media-breakpoint-between(sm, lg) { + font-size: 48px; + } + + @include media-breakpoint-between(xs, sm) { + font-size: 32px; + } + + span { + font-weight: 400; + } + } + + &-btn { + &-group { + .btn-white { + &:hover { + opacity: 0.8; + } + } + .help { + &-text { + font-weight: 300; + font-size: 14px; + span { + font-weight: 700; + } + } + } + } + } +} diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index c50d7323..9ce5d132 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -1,5 +1,6 @@ @import 'success-stories'; @import 'promo-banner'; +@import 'homepage-hero'; @import 'slick-theme'; @import 'slick'; @import 'docs'; @@ -9,7 +10,7 @@ h3 { margin-bottom: 1.6rem; } -.jumbotron>* { +.jumbotron > * { margin: 0 3rem; h3 { @@ -307,4 +308,4 @@ div.captains-log { } } } -} \ No newline at end of file +} diff --git a/layouts/index.html b/layouts/index.html index ed22806f..124702f6 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -15,7 +15,7 @@ -
+

{{.Params.who_should_use_header}}

{{.Params.who_should_use_text | markdownify }}

diff --git a/layouts/partials/hero-homepage.html b/layouts/partials/hero-homepage.html index 90e74242..287834b5 100644 --- a/layouts/partials/hero-homepage.html +++ b/layouts/partials/hero-homepage.html @@ -1,52 +1,63 @@ -
-
-
- Spinnaker Logo white - -

{{.Params.subtitle}}

-
+
+
+ Hero background Image
-
-
-
- - Install Spinnaker +
+
+
+
+
+ + Spinnaker Logo Stacked +
+
+
+
+

{{.Params.subtitle}}

+
+
-
- - Join Slack -

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

+
+
+ + Install Spinnaker +
+
+ + Slack logo horizontal +

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

+
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index b158c541..e6ab2fff 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -3,8 +3,13 @@