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

WIP new brand theme, colors and fonts

pull/232/head
Scott Anderson 2019-05-06 20:29:04 -06:00
parent 6ae6359761
commit ffc58bedd6
13 changed files with 133 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/styles/layouts/_article.scss
View File

@ -21,9 +21,7 @@
& + .code-tabs-wrapper { margin-top: 0; }
}
h1 {
font-family: $klavika;
font-weight: 300;
font-style: italic;
font-weight: normal;
font-size: 2.65rem;
margin: .4em 0 1em;
}
@ -142,7 +140,7 @@
code,pre {
background: $article-code-bg;
font-family: 'Inconsolata', monospace;
font-family: $roboto-mono;
color: $article-code;
}
@ -493,6 +491,7 @@
flex-grow: 1;
margin: 2px;
font-size: 0.875rem;
font-weight: $medium;
color: $article-tab-text;
padding: .35rem .75rem;
display: inline-block;

1
assets/styles/layouts/_error-page.scss
View File

@ -33,7 +33,6 @@
}
h1 {
font-family: $klavika;
color: $article-link;
font-size: 5rem;
font-weight: 300;

27
assets/styles/layouts/_global.scss
View File

@ -1,26 +1,23 @@
@font-face {
font-family: 'Klavika-Light';
src: url(../fonts/KlavikaLight-ItalicTF.otf);
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'Klavika-Bold';
src: url(../fonts/KlavikaBoldBoldItalic.otf);
font-weight: 700;
font-style: italic;
}
$rubik: 'Rubik', sans-serif;
$roboto: 'Roboto', sans-serif;
$roboto-mono: 'Roboto Mono', monospace;
// Font weights
$medium: 500;
$bold: 700;
$klavika: 'Klavika-Light', 'Titillium Web', 'Roboto', sans-serif;
html {
height: 100%;
background: $body-bg;
}
body {
min-height: 100%;
font-family: Roboto, sans-serif;
background: $body-bg;
font-family: 'Rubik', sans-serif;
background: radial-gradient(circle at 100% 0%, $body-gradient-top 0%, $body-gradient-bottom) 30%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
assets/styles/layouts/_inline-icons.scss
View File

@ -48,6 +48,7 @@
.nav-icon {
background: linear-gradient(to right, #50ABEF, #9195f7);
font-family: $roboto;
display: inline-block;
padding: .85rem 1rem;
border-radius: 0 5px 5px 0;

1
assets/styles/layouts/_landing.scss
View File

@ -34,7 +34,6 @@
}
h1,h2,h3,h4 {
font-family: $klavika;
font-weight: 300;
font-style: italic;
text-align: center;

6
assets/styles/layouts/_sidebar.scss
View File

@ -20,6 +20,8 @@
}
input {
font-family: $rubik;
font-weight: $medium;
background: $sidebar-search-bg;
border-radius: $radius;
border: 1px solid $sidebar-search-bg;
@ -36,8 +38,6 @@
border-radius: $radius;
}
&::placeholder {
font-family: 'Roboto';
font-weight: 500;
color: rgba($article-text, .45);
}
}
@ -163,7 +163,7 @@
a {
text-decoration: none;
font-weight: 600;
font-weight: $medium;
display: inline-block;
}
.nav-category > a {

10
assets/styles/layouts/_top-nav.scss
View File

@ -19,16 +19,15 @@
.divider {
height: 100%; border-left: 1px solid rgba($topnav-link, .5);
margin: 0 1rem 0 .9rem;
margin: 0 1rem 0 .65rem;
}
.docs-home {
display: inline-block;
vertical-align: text-top;
font-family: $klavika;
font-style: italic;
font-weight: 300;
font-size: 1.2rem;
font-weight: $medium;
font-size: 1.1rem;
color: $topnav-link;
text-decoration: none;
&:hover {
@ -44,7 +43,7 @@
color: $g20-white;
height: 2rem;
background: $version-selector-top;
font-weight: 700;
font-weight: $medium;
border-radius: $radius;
overflow: hidden;
cursor: pointer;
@ -111,7 +110,6 @@
background: none;
height: 30px;
width: 30px;
margin-top: 2px;
border: none;
transition: color .2s, opacity .2s;
appearance: none;

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

@ -14,24 +14,27 @@
@import "tools/color-palette";
$body-bg: $g1-raven;
$body-bg: $cp-deepnight;
$body-gradient-top: rgba($wp-magenta, .15);
$body-gradient-bottom: $cp-deepnight;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$version-selector-top: $b-ocean;
$version-selector-bottom: $p-star;
$version-selector-top: $b-pool;
$version-selector-bottom: $wp-seance;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
// Sidebar
$sidebar-search-bg: $g3-castle;
$sidebar-search-shadow: #0F0F10;
$sidebar-search-bg: $wp-violet;
$sidebar-search-shadow: #0f001d;
$sidebar-search-highlight: $b-pool;
$sidebar-search-text: $g20-white;
// Article Content
$article-bg: $g3-castle;
$article-heading: $g19-ghost;
$article-bg: $wp-violet;
$article-heading: $g20-white;
$article-heading-alt: $g19-ghost;
$article-text: $g14-chromium;
$article-bold: $g18-cloud;
@ -44,7 +47,7 @@ $article-warn-shadow: #191a1b;
// Article Code
$article-code: $p-potassium;
$article-code-bg: $g1-raven;
$article-code-bg: $cp-deepnight;
$article-code-accent1: $g9-mountain;
$article-code-accent2: $b-pool;
$article-code-accent3: $gr-viridian;
@ -113,12 +116,12 @@ $article-cloud-code-bg: $b-abyss;
// Article Tabs for tabbed content
$article-tab-text: $g12-forge;
$article-tab-bg: $g4-onyx;
$article-tab-bg: rgba($cp-deepnight, .6);
$article-tab-active-text: $g20-white;
$article-tab-active-bg: $b-ocean;
$article-tab-code-text: $g9-mountain;
$article-tab-code-bg: $g5-pepper;
$article-tab-code-bg: rgba($cp-deepnight, .4);
$article-tab-code-text-hover: $g20-white;
$article-tab-code-bg-hover: $b-ocean;
$article-tab-code-active-text: $g20-white;
@ -130,15 +133,15 @@ $article-btn-hover: $b-pool;
$article-btn-text-hover: $g20-white;
// Left Navigation
$nav-category: $b-ocean;
$nav-category: $b-pool;
$nav-category-hover: $g20-white;
$nav-item: $g16-pearl;
$nav-item-hover: $b-ocean;
$nav-border: $g5-pepper;
$nav-item-hover: $b-pool;
$nav-border: $wp-seance;
$nav-toggle: $g16-pearl;
$nav-toggle-hover: $g16-pearl;
$nav-toggle-bg-hover: $b-ocean;
$nav-active: $gr-rainforest;
$nav-toggle-bg-hover: $b-pool;
$nav-active: $c-neon;
// Error Page Colors
$error-page-btn: $b-ocean;

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

@ -15,13 +15,15 @@
// --------------------------------------------------
$body-bg: $g18-cloud !default;
$body-gradient-top: $g19-ghost !default;
$body-gradient-bottom: $g17-whisper !default;
$radius: 3px !default;
// TopNav Colors
$topnav-link: $g5-pepper !default;
$topnav-link-hover: $b-ocean !default;
$topnav-link: $g7-graphite !default;
$topnav-link-hover: $b-pool !default;
$version-selector-top: $b-pool !default;
$version-selector-bottom: $gr-viridian !default;
$version-selector-bottom: $p-comet !default;
$theme-switch-light: none !default;
$theme-switch-dark: inline-block !default;
@ -29,6 +31,7 @@ $theme-switch-dark: inline-block !default;
$sidebar-search-bg: $g20-white !default;
$sidebar-search-shadow: $g14-chromium !default;
$sidebar-search-highlight: $b-ocean !default;
$sidebar-search-text: $g8-storm !default;
// Article Content
$article-bg: $g20-white !default;
@ -131,14 +134,14 @@ $article-btn-hover: $b-ocean !default;
$article-btn-text-hover: $g20-white !default;
// Left Navigation
$nav-category: $b-ocean !default;
$nav-category: $b-pool !default;
$nav-category-hover: $gr-viridian !default;
$nav-item: $g10-wolf !default;
$nav-item-hover: $b-ocean !default;
$nav-item-hover: $b-pool !default;
$nav-border: $g14-chromium !default;
$nav-toggle: $g20-white !default;
$nav-toggle-hover: $g20-white !default;
$nav-toggle-bg-hover: $b-ocean !default;
$nav-toggle-bg-hover: $b-pool !default;
$nav-active: $gr-canopy !default;
// Error Page Colors

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

@ -1,5 +1,62 @@
// Influx Color Palette
// Primary Brand Colors
$p-deep: #1F0A23;
$b-pool: #22ADF6;
$c-neon: #D6F622;
$p-comet: #9394FF;
// Oranges (Dark to Light)
$o-basalt: #2F1F29;
$o-ember: #6F3943;
$o-ruby: #BF3D5E;
$o-fire: #DC4E58;
$o-curacao: #F95F53;
$o-dreamsicle: #FF8564;
$o-tungsten: #FFB6A0;
$o-marmelade: #FFDCCF;
$o-orangecream: #EADAD8;
$o-flan: #FFF7F4;
// Blues (Dark to Light)
$b-abyss: #182838;
$cp-deepnightsea: #32547F;
$b-sapphire: #326BBA;
$b-ocean: #4591ED;
// $b-pool
$b-laser: #00C9FF;
$b-hydrogen: #6BDFFF;
$b-neutrino: #BEF0FF;
$b-snow: #C9E0ED;
$b-yeti: #F0FCFF;
// Purples (Dark to Light)
$p-shadow: #1F2039;
$p-void: #311F94;
$p-purplerain: #484281;
$p-planet: #513CC6;
$p-star: #7A65F2;
// $p-comet
$p-potassium: #B1B6FF;
$p-moonstone: #C9D0FF;
$p-quartz: #D6D5ED;
$p-violettecreme: #EDF0FF;
// Greens (Dark to Light)
$gr-gypsy: #152B2D;
$gr-grass: #2B6058;
$gr-emerald: #108174;
$gr-viridian: #32B08C;
$gr-canopy: #20B76F;
$gr-rainforest: #4ED8A0;
$gr-honeydew: #7CE490;
$gr-krypton: #A5F3B4;
$gr-wasabi: #C6FFD0;
$gr-forestfog: #CFE6E1;
$gr-mint: #F2FFF4;
// --------------------------------------------------
// Greys (Dark to Light)
$g0-obsidian: #0F0E15;
$g1-raven: #1C1C21;
@ -21,53 +78,28 @@ $g16-pearl: #E7E8EB;
$g17-whisper: #EEEFF2;
$g18-cloud: #F2F2F5;
$g19-ghost: #FAFAFC;
$g20-white: #ffffff;
$g20-white: #FFFFFF; // Brand color
// Oranges (Dark to Light)
$o-basalt: #2F1F29;
$o-ember: #6F3943;
$o-ruby: #BF3D5E;
$o-fire: #DC4E58;
$o-curacao: #F95F53;
$o-dreamsicle: #FF8564;
$o-tungsten: #FFB6A0;
$o-marmelade: #FFDCCF;
$o-orangecream: #EADAD8;
$o-flan: #FFF7F4;
// Cool Purples
$cp-deepnight: #13002d; // Brand color
$cp-valhalla: #27153F;
$cp-martinique: #3A2B50;
$cp-wine: #4E4062;
$cp-smokey: #625573;
$cp-rum: #756A85;
$cp-mobster: #898096;
$cp-amethyst: #9D95A7;
$cp-pearl: #B0AAB9;
$cp-greysuit: #C4BFCA;
$cp-mischka: #D8D4DC;
$cp-athens: #EBEAED;
// Blues (Dark to Light)
$b-abyss: #182838;
$b-deepsea: #32547F;
$b-sapphire: #326BBA;
$b-ocean: #4591ED;
$b-pool: #22ADF6;
$b-laser: #00C9FF;
$b-hydrogen: #6BDFFF;
$b-neutrino: #BEF0FF;
$b-snow: #C9E0ED;
$b-yeti: #F0FCFF;
// Purples (Dark to Light)
$p-shadow: #1F2039;
$p-void: #311F94;
$p-purplerain: #484281;
$p-planet: #513CC6;
$p-star: #7A65F2;
$p-comet: #9394FF;
$p-potassium: #B1B6FF;
$p-moonstone: #C9D0FF;
$p-quartz: #D6D5ED;
$p-violettecreme: #EDF0FF;
// Greens (Dark to Light)
$gr-gypsy: #152B2D;
$gr-grass: #2B6058;
$gr-emerald: #108174;
$gr-viridian: #32B08C;
$gr-canopy: #20B76F;
$gr-rainforest: #4ED8A0;
$gr-honeydew: #7CE490;
$gr-krypton: #A5F3B4;
$gr-wasabi: #C6FFD0;
$gr-forestfog: #CFE6E1;
$gr-mint: #F2FFF4;
// Warm Purples - Magenta
$wp-telopea: #23043E;
$wp-violet: #32094E;
$wp-jagger: #420D5F;
$wp-jango: #521170;
$wp-seance: #611581;
$wp-trance: #801EA2;
$wp-heart: #A026C4;
$wp-magenta: #BF2FE5; // Brand color

2
content/v2.0/example.md
View File

@ -9,7 +9,7 @@ weight: 1
enterprise_some: true
cloud_all: true
#cloud_some: true
draft: true
#draft: true
"v2.0/tags": [influxdb]
---

2
layouts/partials/header.html
View File

@ -17,7 +17,7 @@
{{ partial "header/canonical.html" . }}
{{ partial "header/stylesheets.html" }}
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Titillium+Web:300i,700i|Inconsolata:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:500,500i,700,700i|Roboto:400,400i,700,700i|Rubik:400,400i,500,500i,700,700i" rel="stylesheet">
{{ partial "header/javascript.html" }}

2
layouts/partials/topnav.html
View File

@ -2,7 +2,7 @@
<div class="topnav--left">
<a class="influx-home" href="https://www.influxdata.com" title="InfluxData"><span class="icon-influx-logo"></span><span class="icon-influx-logotype"></span></a>
<span class="divider"></span>
<a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">Docs</a>
<a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">InfluxDB Docs</a>
</div>
<div class="topnav--right">
<div class="version-selector">