From 57aa043f915868d2a5c135d1728dacd7114e7f9d Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 27 Aug 2020 15:02:48 -0600 Subject: [PATCH] updated homepage to incorporate design feedback --- assets/styles/layouts/_homepage.scss | 61 +++++++++++++++---- assets/styles/themes/_theme-dark.scss | 6 ++ assets/styles/themes/_theme-light.scss | 6 ++ assets/styles/themes/dark/chronograf.scss | 3 + assets/styles/themes/dark/kapacitor.scss | 3 + assets/styles/themes/dark/telegraf.scss | 4 ++ assets/styles/themes/light/chronograf.scss | 3 + assets/styles/themes/light/kapacitor.scss | 3 + assets/styles/themes/light/telegraf.scss | 3 + assets/styles/tools/_color-palette.scss | 4 +- layouts/partials/topnav/product-selector.html | 2 +- 11 files changed, 84 insertions(+), 14 deletions(-) diff --git a/assets/styles/layouts/_homepage.scss b/assets/styles/layouts/_homepage.scss index 1b29ae8b3..32aa99750 100644 --- a/assets/styles/layouts/_homepage.scss +++ b/assets/styles/layouts/_homepage.scss @@ -34,7 +34,7 @@ // overflow: hidden; h2 { - margin: 1.5rem 0 .5rem; + margin: 1.25rem 0 .5rem; font-weight: 300; font-size: 3rem; } @@ -54,15 +54,16 @@ a.btn { position: relative; display: inline-block; - margin: .5rem .25rem .5rem 0; - padding: 1rem 2rem; + margin: .5rem .25rem .75rem 0; + padding: 1.25rem 2.25rem; color: $article-btn-text !important; border-radius: $radius; font-weight: $medium; + font-size: 1.1rem; text-decoration: none; text-align: center; z-index: 1; - @include gradient($article-btn-gradient); + @include gradient($home-btn-gradient); &:after { content: ""; @@ -73,7 +74,7 @@ width: 100%; height: 100%; border-radius: $radius; - @include gradient($article-btn-gradient-hover); + @include gradient($home-btn-gradient-hover, 270deg); opacity: 0; transition: opacity .2s; z-index: -1; @@ -175,10 +176,13 @@ flex-wrap: wrap; position: relative; color: $g20-white; + @include gradient($home-tick-bg-gradient, 45deg) + + h2 { color: $article-heading-alt; } + a { display: inline-block; position: relative; - color: $g20-white; &:after{ content: ""; margin-top: .15rem; @@ -192,12 +196,40 @@ &:after { width: 100%; } } } - } - .telegraf {@include gradient($telegraf-dropdown-gradient);} - .influxdb {@include gradient($default-dropdown-gradient);} - .chronograf {@include gradient($chronograf-dropdown-gradient);} - .kapacitor {@include gradient($kapacitor-dropdown-gradient);} + .card { + position: relative; + z-index: 1; + color: $article-text; + transition: color .2s; + + &:after { + content: ""; + position: absolute; + display: block; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: -1; + transition: opacity .4s; + } + + &.telegraf:after {@include gradient($telegraf-home-card-gradient);} + &.influxdb:after {@include gradient($default-home-card-gradient);} + &.chronograf:after {@include gradient($chronograf-home-card-gradient);} + &.kapacitor:after {@include gradient($kapacitor-home-card-gradient);} + + &:hover { + color: $g20-white; + h2, a {color: $g20-white;} + &:after { opacity: 1; } + } + + + } + } #enterprise { padding-top: 2.5rem; @@ -294,7 +326,12 @@ padding-right: 0; #tick-cards { flex-direction: column; - .card { width: 100%; } + .card { + width: 100%; + color: $g20-white; + a {color: $g20-white;} + &:after { opacity: 1; } + } } } &#enterprise { order: 4; padding-left: 0; padding-right: 0; } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index e02cd73bc..744e62561 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -176,6 +176,12 @@ $landing-btn-text: $g20-white; $landing-btn-grad: $grad-blue; $landing-btn-grad-hover: $grad-blue-light; +// Home page colors +$home-btn-gradient: $grad-NineteenEightyFour; +$home-btn-gradient-hover: $grad-PastelGothic; +$home-tick-bg-gradient: $grad-grey-abyss; +$default-home-card-gradient: $grad-Miyazakisky; + // Tooltip colors $tooltip-color: $br-chartreuse; $tooltip-color-alt: $br-chartreuse; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index fd7600edb..30448db70 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -176,6 +176,12 @@ $landing-btn-text: $g20-white !default; $landing-btn-grad: $grad-blue !default; $landing-btn-grad-hover: $grad-blue-light !default; +// Home page colors +$home-btn-gradient: $grad-NineteenEightyFour !default; +$home-btn-gradient-hover: $grad-PastelGothic !default; +$home-tick-bg-gradient: $grad-grey-mist !default; +$default-home-card-gradient: $grad-PastelGothic !default; + // Tooltip colors $tooltip-color: $p-amethyst !default; $tooltip-color-alt: $p-twilight !default; diff --git a/assets/styles/themes/dark/chronograf.scss b/assets/styles/themes/dark/chronograf.scss index 4460c3109..d6e932fd1 100644 --- a/assets/styles/themes/dark/chronograf.scss +++ b/assets/styles/themes/dark/chronograf.scss @@ -29,3 +29,6 @@ $chronograf-btn-gradient-hover: $grad-OminousFog; // Article Tabs for tabbed content $chronograf-article-tab-active-text: $g20-white; + +// Homepage cards +$chronograf-home-card-gradient: $grad-PurpleRain; diff --git a/assets/styles/themes/dark/kapacitor.scss b/assets/styles/themes/dark/kapacitor.scss index 02ae18a57..f02befae3 100644 --- a/assets/styles/themes/dark/kapacitor.scss +++ b/assets/styles/themes/dark/kapacitor.scss @@ -29,3 +29,6 @@ $kapacitor-btn-gradient-hover: $grad-green-shade; // Article Tabs for tabbed content $kapacitor-article-tab-active-text: $g20-white; + +// Homepage cards +$kapacitor-home-card-gradient: $grad-GarageBand; diff --git a/assets/styles/themes/dark/telegraf.scss b/assets/styles/themes/dark/telegraf.scss index a46916a50..b1420dea0 100644 --- a/assets/styles/themes/dark/telegraf.scss +++ b/assets/styles/themes/dark/telegraf.scss @@ -29,3 +29,7 @@ $telegraf-btn-gradient-hover: $grad-yellow-dark; // Article Tabs for tabbed content $telegraf-article-tab-active-text: $g20-white; + +// Homepage cards +$telegraf-home-card-gradient: $grad-ScotchBonnet; + diff --git a/assets/styles/themes/light/chronograf.scss b/assets/styles/themes/light/chronograf.scss index 8d6059581..4fd1d3bbc 100644 --- a/assets/styles/themes/light/chronograf.scss +++ b/assets/styles/themes/light/chronograf.scss @@ -29,3 +29,6 @@ $chronograf-btn-gradient-hover: $grad-PurpleFog !default; // Article Tabs for tabbed content $chronograf-article-tab-active-text: $g20-white !default; + +// Homepage cards +$chronograf-home-card-gradient: $grad-OminousFog !default; diff --git a/assets/styles/themes/light/kapacitor.scss b/assets/styles/themes/light/kapacitor.scss index b7629dce5..8e56f421a 100644 --- a/assets/styles/themes/light/kapacitor.scss +++ b/assets/styles/themes/light/kapacitor.scss @@ -29,3 +29,6 @@ $kapacitor-btn-gradient-hover: $grad-green !default; // Article Tabs for tabbed content $kapacitor-article-tab-active-text: $g20-white !default; + +// Homepage cards +$kapacitor-home-card-gradient: $grad-GarageBand !default; diff --git a/assets/styles/themes/light/telegraf.scss b/assets/styles/themes/light/telegraf.scss index 5818535a2..ec481244c 100644 --- a/assets/styles/themes/light/telegraf.scss +++ b/assets/styles/themes/light/telegraf.scss @@ -29,3 +29,6 @@ $telegraf-btn-gradient-hover: $grad-yellow-dark !default; // Article Tabs for tabbed content $telegraf-article-tab-active-text: $g20-white !default; + +// Homepage cards +$telegraf-home-card-gradient: $grad-ScotchBonnet !default; diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index 2d3a44996..647715392 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -104,9 +104,11 @@ $grad-LavenderLatte: $br-deeppurple, $p-star; $grad-OminousFog: $br-pulsar, $br-galaxy; // Single Hue Gradient +$grad-grey-mist: $g18-cloud, $g19-ghost; $grad-grey-light: $g13-mist, $g18-cloud; $grad-grey: $g10-wolf, $g13-mist; $grad-grey-dark: $g3-castle, $g6-smoke; +$grad-grey-abyss: $g1-raven, $g2-kevlar; $grad-blue-light: $b-pool, $b-hydrogen; $grad-blue: $b-ocean, $b-pool; @@ -144,4 +146,4 @@ $grad-PurpleFog: $p-potassium, $cp-munchkin; $grad-PurpleRain: $p-void, $cp-marguerite; // Transparent gradients -$grad-whiteFade: rgba($g20-white, .75), rgba($g20-white, 0); +$grad-whiteFade: rgba($g20-white, .75), rgba($g20-white, 0); diff --git a/layouts/partials/topnav/product-selector.html b/layouts/partials/topnav/product-selector.html index 3903a2d1e..e4663e77a 100644 --- a/layouts/partials/topnav/product-selector.html +++ b/layouts/partials/topnav/product-selector.html @@ -4,7 +4,7 @@
{{ if or (eq $product nil) (eq $product "platform") }} -

Select component

+

Select product

{{ else if and (eq $product "influxdb") (in $currentVersion "v2")}}

{{ (index .Site.Data.products $product).altname }}

{{ else }}