Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

updated homepage to incorporate design feedback

pull/1387/head
Scott Anderson 2020-08-27 15:02:48 -06:00
parent 92778dca19
commit 57aa043f91
11 changed files with 84 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
assets/styles/layouts/_homepage.scss
View File

@ -34,7 +34,7 @@
// overflow: hidden; // overflow: hidden;
h2 { h2 {
margin: 1.5rem 0 .5rem; margin: 1.25rem 0 .5rem;
font-weight: 300; font-weight: 300;
font-size: 3rem; font-size: 3rem;
} }
@ -54,15 +54,16 @@
a.btn { a.btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: .5rem .25rem .5rem 0; margin: .5rem .25rem .75rem 0;
padding: 1rem 2rem; padding: 1.25rem 2.25rem;
color: $article-btn-text !important; color: $article-btn-text !important;
border-radius: $radius; border-radius: $radius;
font-weight: $medium; font-weight: $medium;
font-size: 1.1rem;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
@include gradient($article-btn-gradient); @include gradient($home-btn-gradient);
&:after { &:after {
content: ""; content: "";
@ -73,7 +74,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: $radius; border-radius: $radius;
@include gradient($article-btn-gradient-hover); @include gradient($home-btn-gradient-hover, 270deg);
opacity: 0; opacity: 0;
transition: opacity .2s; transition: opacity .2s;
z-index: -1; z-index: -1;
@ -175,10 +176,13 @@
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
color: $g20-white; color: $g20-white;
@include gradient($home-tick-bg-gradient, 45deg)
h2 { color: $article-heading-alt; }
a { a {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: $g20-white;
&:after{ &:after{
content: ""; content: "";
margin-top: .15rem; margin-top: .15rem;
@ -192,12 +196,40 @@
&:after { width: 100%; } &:after { width: 100%; }
} }
} }
.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 {@include gradient($telegraf-dropdown-gradient);} &.telegraf:after {@include gradient($telegraf-home-card-gradient);}
.influxdb {@include gradient($default-dropdown-gradient);} &.influxdb:after {@include gradient($default-home-card-gradient);}
.chronograf {@include gradient($chronograf-dropdown-gradient);} &.chronograf:after {@include gradient($chronograf-home-card-gradient);}
.kapacitor {@include gradient($kapacitor-dropdown-gradient);} &.kapacitor:after {@include gradient($kapacitor-home-card-gradient);}
&:hover {
color: $g20-white;
h2, a {color: $g20-white;}
&:after { opacity: 1; }
}
}
}
#enterprise { #enterprise {
padding-top: 2.5rem; padding-top: 2.5rem;
@ -294,7 +326,12 @@
padding-right: 0; padding-right: 0;
#tick-cards { #tick-cards {
flex-direction: column; 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; } &#enterprise { order: 4; padding-left: 0; padding-right: 0; }

6
assets/styles/themes/_theme-dark.scss
View File

@ -176,6 +176,12 @@ $landing-btn-text: $g20-white;
$landing-btn-grad: $grad-blue; $landing-btn-grad: $grad-blue;
$landing-btn-grad-hover: $grad-blue-light; $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 colors
$tooltip-color: $br-chartreuse; $tooltip-color: $br-chartreuse;
$tooltip-color-alt: $br-chartreuse; $tooltip-color-alt: $br-chartreuse;

6
assets/styles/themes/_theme-light.scss
View File

@ -176,6 +176,12 @@ $landing-btn-text: $g20-white !default;
$landing-btn-grad: $grad-blue !default; $landing-btn-grad: $grad-blue !default;
$landing-btn-grad-hover: $grad-blue-light !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 colors
$tooltip-color: $p-amethyst !default; $tooltip-color: $p-amethyst !default;
$tooltip-color-alt: $p-twilight !default; $tooltip-color-alt: $p-twilight !default;

3
assets/styles/themes/dark/chronograf.scss
View File

@ -29,3 +29,6 @@ $chronograf-btn-gradient-hover: $grad-OminousFog;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$chronograf-article-tab-active-text: $g20-white; $chronograf-article-tab-active-text: $g20-white;
// Homepage cards
$chronograf-home-card-gradient: $grad-PurpleRain;

3
assets/styles/themes/dark/kapacitor.scss
View File

@ -29,3 +29,6 @@ $kapacitor-btn-gradient-hover: $grad-green-shade;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$kapacitor-article-tab-active-text: $g20-white; $kapacitor-article-tab-active-text: $g20-white;
// Homepage cards
$kapacitor-home-card-gradient: $grad-GarageBand;

4
assets/styles/themes/dark/telegraf.scss
View File

@ -29,3 +29,7 @@ $telegraf-btn-gradient-hover: $grad-yellow-dark;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$telegraf-article-tab-active-text: $g20-white; $telegraf-article-tab-active-text: $g20-white;
// Homepage cards
$telegraf-home-card-gradient: $grad-ScotchBonnet;

3
assets/styles/themes/light/chronograf.scss
View File

@ -29,3 +29,6 @@ $chronograf-btn-gradient-hover: $grad-PurpleFog !default;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$chronograf-article-tab-active-text: $g20-white !default; $chronograf-article-tab-active-text: $g20-white !default;
// Homepage cards
$chronograf-home-card-gradient: $grad-OminousFog !default;

3
assets/styles/themes/light/kapacitor.scss
View File

@ -29,3 +29,6 @@ $kapacitor-btn-gradient-hover: $grad-green !default;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$kapacitor-article-tab-active-text: $g20-white !default; $kapacitor-article-tab-active-text: $g20-white !default;
// Homepage cards
$kapacitor-home-card-gradient: $grad-GarageBand !default;

3
assets/styles/themes/light/telegraf.scss
View File

@ -29,3 +29,6 @@ $telegraf-btn-gradient-hover: $grad-yellow-dark !default;
// Article Tabs for tabbed content // Article Tabs for tabbed content
$telegraf-article-tab-active-text: $g20-white !default; $telegraf-article-tab-active-text: $g20-white !default;
// Homepage cards
$telegraf-home-card-gradient: $grad-ScotchBonnet !default;

2
assets/styles/tools/_color-palette.scss
View File

@ -104,9 +104,11 @@ $grad-LavenderLatte: $br-deeppurple, $p-star;
$grad-OminousFog: $br-pulsar, $br-galaxy; $grad-OminousFog: $br-pulsar, $br-galaxy;
// Single Hue Gradient // Single Hue Gradient
$grad-grey-mist: $g18-cloud, $g19-ghost;
$grad-grey-light: $g13-mist, $g18-cloud; $grad-grey-light: $g13-mist, $g18-cloud;
$grad-grey: $g10-wolf, $g13-mist; $grad-grey: $g10-wolf, $g13-mist;
$grad-grey-dark: $g3-castle, $g6-smoke; $grad-grey-dark: $g3-castle, $g6-smoke;
$grad-grey-abyss: $g1-raven, $g2-kevlar;
$grad-blue-light: $b-pool, $b-hydrogen; $grad-blue-light: $b-pool, $b-hydrogen;
$grad-blue: $b-ocean, $b-pool; $grad-blue: $b-ocean, $b-pool;

2
layouts/partials/topnav/product-selector.html
View File

@ -4,7 +4,7 @@
<div class="dropdown"> <div class="dropdown">
{{ if or (eq $product nil) (eq $product "platform") }} {{ if or (eq $product nil) (eq $product "platform") }}
<p class="selected">Select component</p> <p class="selected">Select product</p>
{{ else if and (eq $product "influxdb") (in $currentVersion "v2")}} {{ else if and (eq $product "influxdb") (in $currentVersion "v2")}}
<p class="selected">{{ (index .Site.Data.products $product).altname }}</p> <p class="selected">{{ (index .Site.Data.products $product).altname }}</p>
{{ else }} {{ else }}