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
GitHub
parent
7b9ffd4689
commit
aa35a41094
|
|
@ -1,5 +1,5 @@
|
|||
@import "tools/color-palette";
|
||||
@import "tools/icomoon-v2";
|
||||
@import "tools/fonts";
|
||||
|
||||
// Fonts
|
||||
$rubik: 'Rubik', sans-serif;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@
|
|||
}
|
||||
|
||||
.article--content{
|
||||
max-width: 820px;
|
||||
max-width: 850px;
|
||||
font-size: 1.1rem;
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $article-heading;
|
||||
a {
|
||||
|
|
@ -24,24 +26,24 @@
|
|||
}
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size: 2.65rem;
|
||||
font-size: 2.75rem;
|
||||
margin: .4em 0 .2em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-size: 2.1rem;
|
||||
margin: -.25rem 0 .5rem;
|
||||
padding-top: 1.75rem;
|
||||
font-weight: $medium;
|
||||
color: $article-heading-alt;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.65rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: $medium;
|
||||
margin: -1rem 0 .5rem;
|
||||
padding-top: 1.75rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.35rem;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
margin: -1.25rem 0 .5rem;
|
||||
|
|
@ -49,12 +51,12 @@
|
|||
color: $article-heading-alt;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
margin: -1.25rem 0 .25rem;
|
||||
padding-top: 1.75rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: -1.25rem 0 .25rem;
|
||||
padding-top: 1.75rem;
|
||||
|
|
@ -62,7 +64,7 @@
|
|||
|
||||
p,li {
|
||||
color: $article-text;
|
||||
line-height: 1.7rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -187,8 +189,8 @@
|
|||
.nowrap { white-space: nowrap }
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
font-size: .95rem;
|
||||
letter-spacing: .07em;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: .1em;
|
||||
font-weight: $medium !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
$rubik: 'Rubik', sans-serif;
|
||||
$code: 'IBM Plex Mono', monospace;;
|
||||
|
||||
// Font weights
|
||||
$medium: 500;
|
||||
$bold: 700;
|
||||
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-family: $proxima;
|
||||
background: $body-bg;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
color: $article-btn-text !important;
|
||||
border-radius: $radius;
|
||||
font-weight: $medium;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
padding: .75rem 1.5rem;
|
||||
color: $article-btn-text !important;
|
||||
border-radius: $radius;
|
||||
font-size: .95rem;
|
||||
font-size: 1.05rem;
|
||||
z-index: 1;
|
||||
@include gradient($article-btn-gradient);
|
||||
|
||||
|
|
|
|||
|
|
@ -311,6 +311,7 @@
|
|||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: $rubik;
|
||||
font-weight: 500;
|
||||
font-size: 1.15rem;
|
||||
min-width: 225px;
|
||||
|
|
|
|||
|
|
@ -13,15 +13,16 @@
|
|||
display: block;
|
||||
font-family: 'icomoon-v2';
|
||||
position: absolute;
|
||||
top: .15rem;
|
||||
top: .25rem;
|
||||
right: .25rem;
|
||||
color: $article-text;
|
||||
font-size: 1.75rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: $rubik;
|
||||
font-weight: $medium;
|
||||
font-family: $proxima;
|
||||
font-weight: $medium;
|
||||
font-size: 1.1rem;
|
||||
background: $sidebar-search-bg;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $sidebar-search-bg;
|
||||
|
|
@ -38,9 +39,8 @@
|
|||
border-radius: $radius;
|
||||
}
|
||||
&::placeholder {
|
||||
color: rgba($sidebar-search-text, .45);
|
||||
color: rgba($sidebar-search-text, .35);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 2rem;
|
||||
padding-left: 2.3rem;
|
||||
border-left: 2px solid $nav-border;
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
|
||||
.nav-category > a {
|
||||
color: $nav-category;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
&:hover {
|
||||
color: $nav-category-hover;
|
||||
}
|
||||
|
|
@ -192,11 +192,11 @@
|
|||
}
|
||||
|
||||
.children-toggle {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
width: 1.12rem;
|
||||
height: 1.12rem;
|
||||
position: absolute;
|
||||
top: .05rem;
|
||||
left: -1.4rem;
|
||||
top: .1rem;
|
||||
left: -1.6rem;
|
||||
display: block;
|
||||
background: $nav-border;
|
||||
border-radius: 50%;
|
||||
|
|
@ -210,15 +210,15 @@
|
|||
}
|
||||
&:before {
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
height: 8px;
|
||||
left: 8px;
|
||||
height: 10px;
|
||||
width: 2px;
|
||||
}
|
||||
&:after {
|
||||
top: 7px;
|
||||
top: 8px;
|
||||
left: 4px;
|
||||
height: 2px;
|
||||
width: 8px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -239,10 +239,9 @@
|
|||
h4 {
|
||||
margin: 2rem 0 0 -1rem;
|
||||
color: rgba($article-heading-alt, .5);
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: .85rem;
|
||||
font-size: .95rem;
|
||||
letter-spacing: .08rem;
|
||||
|
||||
&.platform, &.flux {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.influx-home {
|
||||
font-family: 'icomoon-v2';
|
||||
font-size: 1.9rem;
|
||||
font-size: 1.4rem;
|
||||
color: $topnav-link;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
color: $topnav-link-hover;
|
||||
}
|
||||
.icon-influx-logotype {
|
||||
margin-left: .15rem;
|
||||
margin-left: .6rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
.docs-home {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
font-size: 1.1rem;
|
||||
color: $topnav-link;
|
||||
|
|
@ -39,6 +38,8 @@
|
|||
}
|
||||
|
||||
.topnav-left {
|
||||
margin-right: .15rem;
|
||||
padding: .25rem .15rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -65,6 +66,7 @@
|
|||
@include gradient($default-dropdown-gradient);
|
||||
background-attachment: local !important;
|
||||
font-weight: $medium;
|
||||
font-size: 1.05rem;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
|
@ -103,10 +105,11 @@
|
|||
li {
|
||||
&:before {
|
||||
display: inline-block;
|
||||
font-size: .8rem;
|
||||
font-size: .85rem;
|
||||
color: $g2-kevlar;
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
letter-spacing: .04rem;
|
||||
opacity: .65;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ a.btn {
|
|||
padding: 0.85rem 1.5rem;
|
||||
color: $article-btn-text !important;
|
||||
border-radius: $radius;
|
||||
font-size: .95rem;
|
||||
font-size: 1.05rem;
|
||||
z-index: 1;
|
||||
@include gradient($article-btn-gradient);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.caption {
|
||||
margin: -2rem 0 2rem;
|
||||
padding-left: .25rem;
|
||||
font-size: .85rem;
|
||||
font-size: .95rem;
|
||||
font-style: italic;
|
||||
opacity: .8;
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ p,li,table {
|
|||
border-radius: $radius;
|
||||
color: $article-code;
|
||||
white-space: nowrap;
|
||||
font-size: .95rem;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,8 +66,8 @@ pre {
|
|||
overflow-y: hidden;
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: .95rem;
|
||||
line-height: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7rem;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,8 +31,8 @@
|
|||
&.community:before {
|
||||
content: "\e900";
|
||||
color: $article-heading-alt;
|
||||
margin: 0 .25rem 0 -.25rem;
|
||||
font-size: 1.65rem;
|
||||
margin: 0 .5rem 0 -.25rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'icomoon-v2';
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
a {
|
||||
display: block;
|
||||
padding-left: 1rem;
|
||||
font-size: .85rem;
|
||||
font-size: .95rem;
|
||||
|
||||
&.btn {
|
||||
color: $article-text !important;
|
||||
|
|
@ -75,12 +75,11 @@
|
|||
|
||||
&.edit:before {
|
||||
content: "\e92f";
|
||||
font-size: .75rem;
|
||||
vertical-align: top;
|
||||
font-size: .85rem;
|
||||
}
|
||||
&.issue:before {
|
||||
content: "\e934";
|
||||
font-size: .95rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
flex-grow: 1;
|
||||
margin: 2px;
|
||||
position: relative;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1rem;
|
||||
font-weight: $medium;
|
||||
padding: .65rem 1.25rem;
|
||||
display: inline-block;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
margin: 0;
|
||||
border-radius: $radius $radius 0 0;
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1rem;
|
||||
background: $article-bg;
|
||||
color: rgba($article-tab-code-text, .5);
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@ table {
|
|||
}
|
||||
|
||||
td {
|
||||
font-size: .95rem;
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.5em;
|
||||
code {font-size: .95rem;}
|
||||
}
|
||||
|
||||
tr{
|
||||
|
|
@ -73,5 +74,5 @@ table + table {
|
|||
p.table-group-key {
|
||||
margin: 1rem 0 -.75rem;
|
||||
font-weight: $medium;
|
||||
font-size: .87rem;
|
||||
font-size: .95rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
.tag {
|
||||
background: $body-bg;
|
||||
margin: .12rem 0;
|
||||
padding: .35rem .6rem;
|
||||
padding: .4rem .65rem;
|
||||
font-style: italic;
|
||||
font-weight: $medium;
|
||||
color: rgba($article-text, .75) !important;
|
||||
font-size: .8rem;
|
||||
font-size: .9rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
padding: 0 .65em 0 .75em;
|
||||
color: $article-heading;
|
||||
background: rgba($article-heading, .07);
|
||||
font-size: .9rem;
|
||||
font-size: .95rem;
|
||||
font-weight: $medium;
|
||||
border-radius: 1em;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
// InfluxData Docs Default Theme (Light)
|
||||
|
||||
// Import Tools
|
||||
@import "tools/icomoon-v2",
|
||||
"tools/icon",
|
||||
@import "tools/fonts",
|
||||
"tools/media-queries.scss",
|
||||
"tools/mixins.scss",
|
||||
"tools/tooltips",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ $body-bg: #f3f4fb !default;
|
|||
$radius: 2px !default;
|
||||
|
||||
// TopNav Colors
|
||||
$topnav-link: $g8-storm !default;
|
||||
$topnav-link: #020a47 !default;
|
||||
$topnav-link-hover: $b-dodger !default;
|
||||
$default-dropdown-gradient: $grad-PastelGothic !default;
|
||||
$theme-switch-light: none !default;
|
||||
|
|
@ -28,7 +28,7 @@ $theme-switch-dark: inline-block !default;
|
|||
$sidebar-search-bg: $g20-white !default;
|
||||
$sidebar-search-shadow: #cfd1e5 !default;
|
||||
$sidebar-search-highlight: $b-pool !default;
|
||||
$sidebar-search-text: $g8-storm !default;
|
||||
$sidebar-search-text: $g6-smoke !default;
|
||||
|
||||
// Left Navigation
|
||||
$nav-category: $b-dodger !default;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: Example post
|
||||
description: This is just an example post to show the format of new 2.0 posts
|
||||
weight: 1
|
||||
draft: true
|
||||
# draft: true
|
||||
related:
|
||||
- /influxdb/v2.0/write-data/
|
||||
- /influxdb/v2.0/write-data/quick-start
|
||||
|
|
|
|||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue