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, added new colors, updated most of the dark theme

pull/232/head
Scott Anderson 2019-05-08 13:41:33 -06:00
parent ffc58bedd6
commit 7505550ad3
7 changed files with 130 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
color: $article-heading;
a {
color: inherit !important;
font-weight: inherit !important;
text-decoration: none;
code:after {
border: none;
@ -32,6 +33,7 @@
}
h3 {
font-size: 1.65rem;
font-weight: $medium;
margin: -1rem 0 .5rem;
padding-top: 1.75rem;
color: $article-heading-alt;
@ -39,6 +41,7 @@
h4 {
font-size: 1.25rem;
font-style: italic;
font-weight: $medium;
margin: -1.25rem 0 .5rem;
padding-top: 1.75rem;
}
@ -65,7 +68,7 @@
a {
color: $article-link;
font-weight: bold;
font-weight: $medium;
text-decoration: none;
&:hover {
color: $article-link-hover;
@ -131,9 +134,12 @@
li {
margin: .25rem 0;
&:not(:last-child) {
> p:only-child{ margin-bottom: 0; }
> p:only-child { margin-bottom: 0; }
}
p + ul,
p + ol {
margin: -.9rem 0 .5rem;
}
ul,ol { margin: -.5rem 0 1rem;}
}
//////////////////////////////////// Code ////////////////////////////////////
@ -150,6 +156,7 @@
border-radius: $radius;
color: $article-code;
white-space: nowrap;
font-size: .95rem;
font-style: normal;
}
}

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

@ -27,7 +27,7 @@
border: 1px solid $sidebar-search-bg;
padding: .5em 2.15rem .5rem .5rem;
width: 100%;
color: $article-text;
color: $sidebar-search-text;
transition-property: border, box-shadow;
transition-duration: .2s;
box-shadow: 2px 2px 6px $sidebar-search-shadow;
@ -38,7 +38,9 @@
border-radius: $radius;
}
&::placeholder {
color: rgba($article-text, .45);
color: rgba($sidebar-search-text, .45);
font-weight: normal;
font-style: italic;
}
}
}
@ -235,7 +237,7 @@
// Reference title styles
h4 {
margin: 2rem 0 0 -1rem;
color: rgba($article-heading, .8);
color: rgba($article-heading, .7);
font-style: italic;
font-weight: 700;
text-transform: uppercase;

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

@ -106,6 +106,7 @@
display: inline-block;
padding: 0;
font-size: 1.8rem;
line-height: 0;
color: rgba($topnav-link, .5);
background: none;
height: 30px;

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

@ -14,41 +14,41 @@
@import "tools/color-palette";
$body-bg: $cp-deepnight;
$body-gradient-top: rgba($wp-magenta, .15);
$body-gradient-bottom: $cp-deepnight;
$body-bg: $np-deepnight;
$body-gradient-top: rgba($m-magenta, .2);
$body-gradient-bottom: $np-deepnight;
// TopNav Colors
$topnav-link: $g20-white;
$topnav-link-hover: $b-pool;
$version-selector-top: $b-pool;
$version-selector-bottom: $wp-seance;
$version-selector-bottom: $cp-victoria;
$theme-switch-light: inline-block;
$theme-switch-dark: none;
// Sidebar
$sidebar-search-bg: $wp-violet;
$sidebar-search-shadow: #0f001d;
$sidebar-search-bg: $np-deepnight;
$sidebar-search-shadow: rgba($m-magenta, .05);
$sidebar-search-highlight: $b-pool;
$sidebar-search-text: $g20-white;
// Article Content
$article-bg: $wp-violet;
$article-bg: $wp-violentdark;
$article-heading: $g20-white;
$article-heading-alt: $g19-ghost;
$article-text: $g14-chromium;
$article-text: $np-mischka;
$article-bold: $g18-cloud;
$article-link: #2aa3ff;
$article-link-hover: $g20-white;
$article-hr: $g6-smoke;
$article-shadow: #191a1b;
$article-hr: $wp-seance;
$article-shadow: $np-deepnight;
$article-note-shadow: #191a1b;
$article-warn-shadow: #191a1b;
// Article Code
$article-code: $p-potassium;
$article-code-bg: $cp-deepnight;
$article-code-accent1: $g9-mountain;
$article-code: $cp-munchkin;
$article-code-bg: $np-deepnight;
$article-code-accent1: $np-smokey;
$article-code-accent2: $b-pool;
$article-code-accent3: $gr-viridian;
$article-code-accent4: $o-ruby;
@ -58,12 +58,12 @@ $article-code-accent7: #e90;
$article-code-select: $b-pool;
$article-code-link: #2aa3ff;
$article-code-link-hover: $g20-white;
$article-code-scrollbar: $g7-graphite;
$article-code-scrollbar: $np-martinique;
// Article Tables
$article-table-header-left: $p-planet;
$article-table-header-right: $b-sapphire;
$article-table-row-alt: $g2-kevlar;
$article-table-row-alt: rgba($wp-jagger, .75);
// Article Notes, Warnings, & Messages
$article-note-base: $gr-viridian;
@ -116,12 +116,12 @@ $article-cloud-code-bg: $b-abyss;
// Article Tabs for tabbed content
$article-tab-text: $g12-forge;
$article-tab-bg: rgba($cp-deepnight, .6);
$article-tab-bg: rgba($np-deepnight, .6);
$article-tab-active-text: $g20-white;
$article-tab-active-bg: $b-ocean;
$article-tab-code-text: $g9-mountain;
$article-tab-code-bg: rgba($cp-deepnight, .4);
$article-tab-code-bg: rgba($np-deepnight, .4);
$article-tab-code-text-hover: $g20-white;
$article-tab-code-bg-hover: $b-ocean;
$article-tab-code-active-text: $g20-white;
@ -137,11 +137,11 @@ $nav-category: $b-pool;
$nav-category-hover: $g20-white;
$nav-item: $g16-pearl;
$nav-item-hover: $b-pool;
$nav-border: $wp-seance;
$nav-border: $wp-jango;
$nav-toggle: $g16-pearl;
$nav-toggle-hover: $g16-pearl;
$nav-toggle-bg-hover: $b-pool;
$nav-active: $c-neon;
$nav-active: $ch-chartreuse;
// Error Page Colors
$error-page-btn: $b-ocean;

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

@ -23,7 +23,7 @@ $radius: 3px !default;
$topnav-link: $g7-graphite !default;
$topnav-link-hover: $b-pool !default;
$version-selector-top: $b-pool !default;
$version-selector-bottom: $p-comet !default;
$version-selector-bottom: $cp-comet !default;
$theme-switch-light: none !default;
$theme-switch-dark: inline-block !default;
@ -103,7 +103,7 @@ $article-warn-code-accent6: #357ae8 !default;
$article-warn-code-accent7: #e90 !default;
$article-warn-code-scrollbar: #FFB1B1 !default;
$article-enterprise-base: $p-comet !default;
$article-enterprise-base: $cp-comet !default;
$article-enterprise-text: $p-star !default;
$article-enterprise-link: $p-star !default;
$article-enterprise-link-hover: $b-ocean !default;
@ -124,7 +124,7 @@ $article-tab-active-bg: $b-pool !default;
$article-tab-code-text: $p-potassium !default;
$article-tab-code-bg: $g20-white !default;
$article-tab-code-text-hover: $g20-white !default;
$article-tab-code-bg-hover: $p-comet !default;
$article-tab-code-bg-hover: $cp-comet !default;
$article-tab-code-active-text: $p-star !default;
// Article page buttons
@ -154,5 +154,5 @@ $error-page-btn-hover-text: $g20-white !default;
$landing-lg-gradient-left: $b-ocean !default;
$landing-lg-gradient-right: $b-pool !default;
$landing-sm-gradient-left: $p-star !default;
$landing-sm-gradient-right: $p-comet !default;
$landing-sm-gradient-right: $cp-comet !default;
$landing-sm-gradient-overlay: $p-planet !default;

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

@ -2,9 +2,6 @@
// Primary Brand Colors
$p-deep: #1F0A23;
$b-pool: #22ADF6;
$c-neon: #D6F622;
$p-comet: #9394FF;
// Oranges (Dark to Light)
$o-basalt: #2F1F29;
@ -20,11 +17,8 @@ $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;
@ -36,7 +30,7 @@ $p-void: #311F94;
$p-purplerain: #484281;
$p-planet: #513CC6;
$p-star: #7A65F2;
// $p-comet
$p-potassium: #B1B6FF;
$p-moonstone: #C9D0FF;
$p-quartz: #D6D5ED;
@ -80,26 +74,71 @@ $g18-cloud: #F2F2F5;
$g19-ghost: #FAFAFC;
$g20-white: #FFFFFF; // Brand color
// 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;
// Neutral Purples
$np-deepnight: #13002d; // Brand color
$np-valhalla: #27153F;
$np-martinique: #3A2B50;
$np-wine: #4E4062;
$np-smokey: #625573;
$np-rum: #756A85;
$np-mobster: #898096;
$np-amethyst: #9D95A7;
$np-pearl: #B0AAB9;
$np-greysuit: #C4BFCA;
$np-mischka: #D8D4DC;
$np-athens: #EBEAED;
// Warm Purples - Magenta
// Warm Purples - Magentas
$wp-telopea: #23043E;
$wp-violentdark: #2d0749;
$wp-violet: #32094E;
$wp-jagger: #420D5F;
$wp-jango: #521170;
$wp-seance: #611581;
$wp-trance: #801EA2;
$wp-heart: #A026C4;
$wp-magenta: #BF2FE5; // Brand color
$m-magenta: #BF2FE5; // Brand color
$m-lavander: #CA52E9;
$m-heliotrope: #D474EE;
$m-perfume: #DF97F2;
$m-pinkmist: #EABAF6;
$m-selago: #F4DCFB;
// Cool Purples
$cp-jakarta: #322368;
$cp-minsk: #423681;
$cp-victoria: #52499A;
$cp-blueviolet: #625CB3;
$cp-marguerite: #736ECD;
$cp-purple: #8381E6;
$cp-comet: #9394ff; // Brand color
$cp-melrose: #A5A6FF;
$cp-munchkin: #B7B8FF;
$cp-periwinkle: #C9CAFF;
$cp-coolfog: #DBDBFF;
$cp-titan: #EDEDFF;
// Chartreuses
$ch-olive: #3B440A;
$ch-saratoga: #55620E;
$ch-olivetone: #6F7F12;
$ch-trendy: #899D16;
$ch-citron: #A2BB1A;
$ch-keylime: #BCD81E;
$ch-chartreuse: #D6F622; // Brand color
$ch-canary: #E4F96C;
$ch-primrose: #F1FCB5;
// Blues
$b-tiber: #0A3044;
$b-deepsea: #0E4562;
$b-chathams: #125A7F;
$b-matisse: #166F9D;
$b-eastern: #1A83BB;
$b-curious: #1E98D8;
$b-pool: #22ADF6; // Brand color
$b-laser: #47BBF8;
$b-malibu: #6CC8F9;
$b-horizon: #91D6FB;
$b-fleur: #B5E4FC;
$b-hawkeye: #DAF1FD;

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

@ -90,7 +90,10 @@ This is **bold**. This is _italic_.
- Unordered list line-item 2
- Unordered list line-item 2.1
- Unordered list line-item 2.2
- Unordered list line-item 2.3
- Unordered list line-item 2.3 _(this is just an li, no p tag)_
1. Ordered list item nested 1
2. Ordered list item nested 2
3. Ordered list item nested 3
- Unordered list line-item 3
- Unordered list line-item with multiple paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -110,13 +113,24 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
1. Unordered list line-item 1
2. Unordered list line-item 2
1. Unordered list line-item 2.1
2. Unordered list line-item 2.2
3. Unordered list line-item 2.3
3. Unordered list line-item 3
4. Unordered list line-item with multiple paragraphs.
1. Ordered list line-item 1
2. Ordered list line-item 2
1. Ordered list line-item 2.1
2. Ordered list line-item 2.2
3. Ordered list line-item 2.3 _(this is just an li, no p tag)_
- Unordered list item nested 1
- Unordered list item nested 2
- Unordered list item nested 3
4. Ordered list line-item 2.4 with hard return.
- Unordered list item nested 1
- Unordered list item nested 2
- Unordered list item nested 3
With Another paragraph.
3. Ordered list line-item 3
4. Ordered list line-item with multiple paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
@ -125,7 +139,7 @@ This is **bold**. This is _italic_.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
5. Unordered list line-item with multiple paragraphs.
5. Ordered list line-item with multiple paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
@ -167,13 +181,13 @@ avg_cpu
{{% enterprise %}}
###### This is a table
| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- |
| Row 1.1 | Row 1.2 | Row 1.3 | Row 1.4 |
| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 |
| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 |
| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 |
| Row 5.1 | Row 5.2 | Row 5.3 | Row 5.4 |
| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- |
| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 |
| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 |
| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 |
| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 |
| Row 5.1 | `Row 5.2` | Row 5.3 | Row 5.4 |
###### This is a table with lots of stuff
| Column 1 | Column 2 | Column 3 | Column 4 |