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

First updates for the new brand (#3796) 

* first pass with new branding, logos, fonts

* updated table font sizes

* removed unnecessary file

* Update assets/styles/layouts/_sidebar.scss

Co-authored-by: Jason Stirnaman <jstirnaman@influxdata.com>

* a few last style updates

Co-authored-by: Jason Stirnaman <jstirnaman@influxdata.com>
pull/3801/head
Scott Anderson 2022-02-18 08:32:25 -08:00 committed by GitHub
parent 7b9ffd4689
commit aa35a41094
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 178 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layouts/_api-overrides.scss
View File

@ -1,5 +1,5 @@
@import "tools/color-palette"; @import "tools/color-palette";
@import "tools/icomoon-v2"; @import "tools/fonts";
// Fonts // Fonts
$rubik: 'Rubik', sans-serif; $rubik: 'Rubik', sans-serif;

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

@ -5,7 +5,9 @@
} }
.article--content{ .article--content{
max-width: 820px; max-width: 850px;
font-size: 1.1rem;
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
color: $article-heading; color: $article-heading;
a { a {
@ -24,24 +26,24 @@
} }
h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: 2.65rem; font-size: 2.75rem;
margin: .4em 0 .2em; margin: .4em 0 .2em;
} }
h2 { h2 {
font-size: 2rem; font-size: 2.1rem;
margin: -.25rem 0 .5rem; margin: -.25rem 0 .5rem;
padding-top: 1.75rem; padding-top: 1.75rem;
font-weight: $medium; font-weight: $medium;
color: $article-heading-alt; color: $article-heading-alt;
} }
h3 { h3 {
font-size: 1.65rem; font-size: 1.75rem;
font-weight: $medium; font-weight: $medium;
margin: -1rem 0 .5rem; margin: -1rem 0 .5rem;
padding-top: 1.75rem; padding-top: 1.75rem;
} }
h4 { h4 {
font-size: 1.25rem; font-size: 1.35rem;
font-style: italic; font-style: italic;
font-weight: $medium; font-weight: $medium;
margin: -1.25rem 0 .5rem; margin: -1.25rem 0 .5rem;
@ -49,12 +51,12 @@
color: $article-heading-alt; color: $article-heading-alt;
} }
h5 { h5 {
font-size: 1rem; font-size: 1.1rem;
margin: -1.25rem 0 .25rem; margin: -1.25rem 0 .25rem;
padding-top: 1.75rem; padding-top: 1.75rem;
} }
h6 { h6 {
font-size: 1rem; font-size: 1.1rem;
font-style: italic; font-style: italic;
margin: -1.25rem 0 .25rem; margin: -1.25rem 0 .25rem;
padding-top: 1.75rem; padding-top: 1.75rem;
@ -62,7 +64,7 @@
p,li { p,li {
color: $article-text; color: $article-text;
line-height: 1.7rem; line-height: 1.8rem;
} }
p { p {
@ -187,8 +189,8 @@
.nowrap { white-space: nowrap } .nowrap { white-space: nowrap }
.all-caps { .all-caps {
text-transform: uppercase; text-transform: uppercase;
font-size: .95rem; font-size: 1.05rem;
letter-spacing: .07em; letter-spacing: .1em;
font-weight: $medium !important; font-weight: $medium !important;
} }

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

@ -1,21 +1,11 @@
$rubik: 'Rubik', sans-serif;
$code: 'IBM Plex Mono', monospace;;
// Font weights
$medium: 500;
$bold: 700;
html { html {
height: 100%; height: 100%;
} }
body { body {
min-height: 100%; min-height: 100%;
font-family: 'Rubik', sans-serif; font-family: $proxima;
background: $body-bg; background: $body-bg;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
* { * {

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

@ -65,7 +65,7 @@
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; font-size: 1.2rem;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
z-index: 1; z-index: 1;
@ -196,7 +196,7 @@
padding: .75rem 1.5rem; padding: .75rem 1.5rem;
color: $article-btn-text !important; color: $article-btn-text !important;
border-radius: $radius; border-radius: $radius;
font-size: .95rem; font-size: 1.05rem;
z-index: 1; z-index: 1;
@include gradient($article-btn-gradient); @include gradient($article-btn-gradient);

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

@ -311,6 +311,7 @@
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: $rubik;
font-weight: 500; font-weight: 500;
font-size: 1.15rem; font-size: 1.15rem;
min-width: 225px; min-width: 225px;

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

@ -13,15 +13,16 @@
display: block; display: block;
font-family: 'icomoon-v2'; font-family: 'icomoon-v2';
position: absolute; position: absolute;
top: .15rem; top: .25rem;
right: .25rem; right: .25rem;
color: $article-text; color: $article-text;
font-size: 1.75rem; font-size: 1.8rem;
} }
input { input {
font-family: $rubik; font-family: $proxima;
font-weight: $medium; font-weight: $medium;
font-size: 1.1rem;
background: $sidebar-search-bg; background: $sidebar-search-bg;
border-radius: $radius; border-radius: $radius;
border: 1px solid $sidebar-search-bg; border: 1px solid $sidebar-search-bg;
@ -38,9 +39,8 @@
border-radius: $radius; border-radius: $radius;
} }
&::placeholder { &::placeholder {
color: rgba($sidebar-search-text, .45); color: rgba($sidebar-search-text, .35);
font-weight: normal; font-weight: normal;
font-style: italic;
} }
} }
} }
@ -117,7 +117,7 @@
ul { ul {
list-style: none; list-style: none;
padding-left: 2rem; padding-left: 2.3rem;
border-left: 2px solid $nav-border; border-left: 2px solid $nav-border;
} }
@ -171,7 +171,7 @@
.nav-category > a { .nav-category > a {
color: $nav-category; color: $nav-category;
font-size: 1.1rem; font-size: 1.2rem;
&:hover { &:hover {
color: $nav-category-hover; color: $nav-category-hover;
} }
@ -192,11 +192,11 @@
} }
.children-toggle { .children-toggle {
width: 1rem; width: 1.12rem;
height: 1rem; height: 1.12rem;
position: absolute; position: absolute;
top: .05rem; top: .1rem;
left: -1.4rem; left: -1.6rem;
display: block; display: block;
background: $nav-border; background: $nav-border;
border-radius: 50%; border-radius: 50%;
@ -210,15 +210,15 @@
} }
&:before { &:before {
top: 4px; top: 4px;
left: 7px; left: 8px;
height: 8px; height: 10px;
width: 2px; width: 2px;
} }
&:after { &:after {
top: 7px; top: 8px;
left: 4px; left: 4px;
height: 2px; height: 2px;
width: 8px; width: 10px;
} }
&:hover { &:hover {
@ -239,10 +239,9 @@
h4 { h4 {
margin: 2rem 0 0 -1rem; margin: 2rem 0 0 -1rem;
color: rgba($article-heading-alt, .5); color: rgba($article-heading-alt, .5);
font-style: italic;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
font-size: .85rem; font-size: .95rem;
letter-spacing: .08rem; letter-spacing: .08rem;
&.platform, &.flux { &.platform, &.flux {

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

@ -8,7 +8,7 @@
.influx-home { .influx-home {
font-family: 'icomoon-v2'; font-family: 'icomoon-v2';
font-size: 1.9rem; font-size: 1.4rem;
color: $topnav-link; color: $topnav-link;
text-decoration: none; text-decoration: none;
vertical-align: middle; vertical-align: middle;
@ -16,7 +16,7 @@
color: $topnav-link-hover; color: $topnav-link-hover;
} }
.icon-influx-logotype { .icon-influx-logotype {
margin-left: .15rem; margin-left: .6rem;
} }
} }
@ -28,7 +28,6 @@
.docs-home { .docs-home {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
font-style: italic;
font-weight: $medium; font-weight: $medium;
font-size: 1.1rem; font-size: 1.1rem;
color: $topnav-link; color: $topnav-link;
@ -39,6 +38,8 @@
} }
.topnav-left { .topnav-left {
margin-right: .15rem;
padding: .25rem .15rem;
z-index: 1; z-index: 1;
} }
@ -65,6 +66,7 @@
@include gradient($default-dropdown-gradient); @include gradient($default-dropdown-gradient);
background-attachment: local !important; background-attachment: local !important;
font-weight: $medium; font-weight: $medium;
font-size: 1.05rem;
border-radius: $radius; border-radius: $radius;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@ -103,10 +105,11 @@
li { li {
&:before { &:before {
display: inline-block; display: inline-block;
font-size: .8rem; font-size: .85rem;
color: $g2-kevlar; color: $g2-kevlar;
font-style: italic; text-transform: uppercase;
font-weight: bold; font-weight: bold;
letter-spacing: .04rem;
opacity: .65; opacity: .65;
mix-blend-mode: multiply; mix-blend-mode: multiply;
} }

2
assets/styles/layouts/article/_buttons.scss
View File

@ -7,7 +7,7 @@ a.btn {
padding: 0.85rem 1.5rem; padding: 0.85rem 1.5rem;
color: $article-btn-text !important; color: $article-btn-text !important;
border-radius: $radius; border-radius: $radius;
font-size: .95rem; font-size: 1.05rem;
z-index: 1; z-index: 1;
@include gradient($article-btn-gradient); @include gradient($article-btn-gradient);

2
assets/styles/layouts/article/_captions.scss
View File

@ -1,7 +1,7 @@
.caption { .caption {
margin: -2rem 0 2rem; margin: -2rem 0 2rem;
padding-left: .25rem; padding-left: .25rem;
font-size: .85rem; font-size: .95rem;
font-style: italic; font-style: italic;
opacity: .8; opacity: .8;

6
assets/styles/layouts/article/_code.scss
View File

@ -12,7 +12,7 @@ p,li,table {
border-radius: $radius; border-radius: $radius;
color: $article-code; color: $article-code;
white-space: nowrap; white-space: nowrap;
font-size: .95rem; font-size: 1rem;
font-style: normal; font-style: normal;
} }
} }
@ -66,8 +66,8 @@ pre {
overflow-y: hidden; overflow-y: hidden;
code { code {
padding: 0; padding: 0;
font-size: .95rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.7rem;
white-space: pre; white-space: pre;
} }
} }

11
assets/styles/layouts/article/_feedback.scss
View File

@ -31,8 +31,8 @@
&.community:before { &.community:before {
content: "\e900"; content: "\e900";
color: $article-heading-alt; color: $article-heading-alt;
margin: 0 .25rem 0 -.25rem; margin: 0 .5rem 0 -.25rem;
font-size: 1.65rem; font-size: 1.2rem;
font-family: 'icomoon-v2'; font-family: 'icomoon-v2';
vertical-align: middle; vertical-align: middle;
} }
@ -55,7 +55,7 @@
a { a {
display: block; display: block;
padding-left: 1rem; padding-left: 1rem;
font-size: .85rem; font-size: .95rem;
&.btn { &.btn {
color: $article-text !important; color: $article-text !important;
@ -75,12 +75,11 @@
&.edit:before { &.edit:before {
content: "\e92f"; content: "\e92f";
font-size: .75rem; font-size: .85rem;
vertical-align: top;
} }
&.issue:before { &.issue:before {
content: "\e934"; content: "\e934";
font-size: .95rem; font-size: 1rem;
} }
} }
} }

4
assets/styles/layouts/article/_tabbed-content.scss
View File

@ -12,7 +12,7 @@
flex-grow: 1; flex-grow: 1;
margin: 2px; margin: 2px;
position: relative; position: relative;
font-size: 0.875rem; font-size: 1rem;
font-weight: $medium; font-weight: $medium;
padding: .65rem 1.25rem; padding: .65rem 1.25rem;
display: inline-block; display: inline-block;
@ -72,7 +72,7 @@
margin: 0; margin: 0;
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
display: inline-block; display: inline-block;
font-size: 0.875rem; font-size: 1rem;
background: $article-bg; background: $article-bg;
color: rgba($article-tab-code-text, .5); color: rgba($article-tab-code-text, .5);
&:hover { &:hover {

5
assets/styles/layouts/article/_tables.scss
View File

@ -31,8 +31,9 @@ table {
} }
td { td {
font-size: .95rem; font-size: 1.05rem;
line-height: 1.5em; line-height: 1.5em;
code {font-size: .95rem;}
} }
tr{ tr{
@ -73,5 +74,5 @@ table + table {
p.table-group-key { p.table-group-key {
margin: 1rem 0 -.75rem; margin: 1rem 0 -.75rem;
font-weight: $medium; font-weight: $medium;
font-size: .87rem; font-size: .95rem;
} }

4
assets/styles/layouts/article/_tags.scss
View File

@ -8,11 +8,11 @@
.tag { .tag {
background: $body-bg; background: $body-bg;
margin: .12rem 0; margin: .12rem 0;
padding: .35rem .6rem; padding: .4rem .65rem;
font-style: italic; font-style: italic;
font-weight: $medium; font-weight: $medium;
color: rgba($article-text, .75) !important; color: rgba($article-text, .75) !important;
font-size: .8rem; font-size: .9rem;
border-radius: 1rem; border-radius: 1rem;
&:after { &:after {

2
assets/styles/layouts/article/_title.scss
View File

@ -13,7 +13,7 @@
padding: 0 .65em 0 .75em; padding: 0 .65em 0 .75em;
color: $article-heading; color: $article-heading;
background: rgba($article-heading, .07); background: rgba($article-heading, .07);
font-size: .9rem; font-size: .95rem;
font-weight: $medium; font-weight: $medium;
border-radius: 1em; border-radius: 1em;
display: inline-block; display: inline-block;

3
assets/styles/styles-default.scss
View File

@ -1,8 +1,7 @@
// InfluxData Docs Default Theme (Light) // InfluxData Docs Default Theme (Light)
// Import Tools // Import Tools
@import "tools/icomoon-v2", @import "tools/fonts",
"tools/icon",
"tools/media-queries.scss", "tools/media-queries.scss",
"tools/mixins.scss", "tools/mixins.scss",
"tools/tooltips", "tools/tooltips",

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

@ -18,7 +18,7 @@ $body-bg: #f3f4fb !default;
$radius: 2px !default; $radius: 2px !default;
// TopNav Colors // TopNav Colors
$topnav-link: $g8-storm !default; $topnav-link: #020a47 !default;
$topnav-link-hover: $b-dodger !default; $topnav-link-hover: $b-dodger !default;
$default-dropdown-gradient: $grad-PastelGothic !default; $default-dropdown-gradient: $grad-PastelGothic !default;
$theme-switch-light: none !default; $theme-switch-light: none !default;
@ -28,7 +28,7 @@ $theme-switch-dark: inline-block !default;
$sidebar-search-bg: $g20-white !default; $sidebar-search-bg: $g20-white !default;
$sidebar-search-shadow: #cfd1e5 !default; $sidebar-search-shadow: #cfd1e5 !default;
$sidebar-search-highlight: $b-pool !default; $sidebar-search-highlight: $b-pool !default;
$sidebar-search-text: $g8-storm !default; $sidebar-search-text: $g6-smoke !default;
// Left Navigation // Left Navigation
$nav-category: $b-dodger !default; $nav-category: $b-dodger !default;

38
assets/styles/tools/_fonts.scss Normal file
View File

@ -0,0 +1,38 @@
$rubik: 'Rubik', sans-serif;
$proxima: 'Proxima Nova', sans-serif;
$code: 'IBM Plex Mono', monospace;;
// Font weights
$medium: 500;
$bold: 700;
// Global font size and rendering
body {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@font-face {
font-family: "Proxima Nova";
src: url("fonts/proxima-nova.otf") format("opentype");
font-weight: 300;
}
@font-face {
font-family: 'Proxima Nova';
src: url('fonts/proxima-nova-medium.otf') format('opentype');
font-weight: 400;
}
@font-face {
font-family: 'Proxima Nova';
src: url('fonts/proxima-nova-semibold.otf') format('opentype');
font-weight: 500 600;
}
@font-face {
font-family: 'Proxima Nova';
src: url('fonts/proxima-nova-bold.otf') format('opentype');
font-weight: 700;
}
@import "tools/icon-fonts/icomoon-v2";
@import "tools/icon-fonts/icon";

0
assets/styles/tools/_icomoon-v2.scss → assets/styles/tools/icon-fonts/_icomoon-v2.scss
View File

0
assets/styles/tools/_icon.scss → assets/styles/tools/icon-fonts/_icon.scss
View File

2
content/example.md
View File

@ -2,7 +2,7 @@
title: Example post title: Example post
description: This is just an example post to show the format of new 2.0 posts description: This is just an example post to show the format of new 2.0 posts
weight: 1 weight: 1
draft: true # draft: true
related: related:
- /influxdb/v2.0/write-data/ - /influxdb/v2.0/write-data/
- /influxdb/v2.0/write-data/quick-start - /influxdb/v2.0/write-data/quick-start

BIN
static/fonts/icomoon-v2.eot
View File

Binary file not shown.

152
static/fonts/icomoon-v2.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
static/fonts/icomoon-v2.ttf
View File

Binary file not shown.

BIN
static/fonts/icomoon-v2.woff
View File

Binary file not shown.

BIN
static/fonts/proxima-nova-bold.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/proxima-nova-medium.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/proxima-nova-semibold.otf Normal file
View File

Binary file not shown.

BIN
static/fonts/proxima-nova.otf Normal file
View File

Binary file not shown.

BIN
static/img/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB