established base for top nav structure and styles
Scott Anderson
parent
1572941a18
commit
6039a52f27
|
|
@ -0,0 +1,30 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
font-family: Roboto, sans-serif;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
.topnav {
|
||||
padding: .75em;
|
||||
|
||||
&--left {
|
||||
|
||||
}
|
||||
&--right {
|
||||
|
||||
}
|
||||
|
||||
.influx-home {
|
||||
font-family: 'icomoon';
|
||||
font-size: 2.1em;
|
||||
color: $topnav-logo;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
color: $topnav-logo-hover;
|
||||
}
|
||||
|
||||
.icon-influx-logotype {
|
||||
margin-left: -.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 100%; border-left: 1px solid rgba($topnav-logo, .5);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.docs-home {
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
font-family: 'Klavika-Light';
|
||||
font-size: 1.25rem;
|
||||
color: $topnav-logo;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $topnav-logo-hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -7,5 +7,5 @@
|
|||
// @import "normalize/import-now";
|
||||
// ```
|
||||
|
||||
@import '../normalize';
|
||||
@import 'normalize';
|
||||
@include normalize();
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
@import "normalize/import-now";
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
body { height: 100%; }
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// InfluxData Docs Default Theme (Dark)
|
||||
|
||||
// Import Tools
|
||||
@import "tools/color-palette",
|
||||
"tools/icomoon";
|
||||
|
||||
// Import default dark theme
|
||||
@import "themes/theme-dark.scss";
|
||||
|
||||
// Import Layout Styles
|
||||
@import "normalize/import-now",
|
||||
"layouts/layout-global",
|
||||
"layouts/layout-topnav";
|
||||
|
|
@ -1 +1,8 @@
|
|||
@import "normalize/import-now";
|
||||
// InfluxData Docs Theme File
|
||||
// Light Theme
|
||||
|
||||
// Provide light them overrides
|
||||
@import "themes/theme-light";
|
||||
|
||||
// Import default theme
|
||||
@import "styles-default";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
|
||||
DARK THEME
|
||||
____________________________________________________________
|
||||
|
||||
Notes:
|
||||
- This file is interchangeable with themes/theme-light.scss
|
||||
- Only contains color variables
|
||||
|
||||
*/
|
||||
|
||||
// General Styles
|
||||
// --------------------------------------------------
|
||||
|
||||
$body-bg: $g1-raven !default;
|
||||
|
||||
// TopNav Colors
|
||||
$topnav-logo: $g20-white !default;
|
||||
$topnav-logo-hover: $b-ocean !default;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/*
|
||||
|
||||
LIGHT THEME
|
||||
____________________________________________________________
|
||||
|
||||
Notes:
|
||||
- This file is interchangeable with themes/theme-dark.scss
|
||||
- Only contains color variables
|
||||
|
||||
*/
|
||||
|
||||
// General Styles
|
||||
// --------------------------------------------------
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
// Influx Color Palette
|
||||
|
||||
// Greys (Dark to Light)
|
||||
$g0-obsidian: #0F0E15;
|
||||
$g1-raven: #1C1C21;
|
||||
$g2-kevlar: #202028;
|
||||
$g3-castle: #292933;
|
||||
$g4-onyx: #2C2C38;
|
||||
$g5-pepper: #383846;
|
||||
$g6-smoke: #434453;
|
||||
$g7-graphite: #545667;
|
||||
$g8-storm: #676978;
|
||||
$g9-mountain: #757888;
|
||||
$g10-wolf: #8E91A1;
|
||||
$g11-sidewalk: #999DAB;
|
||||
$g12-forge: #A4A8B6;
|
||||
$g13-mist: #BEC2CC;
|
||||
$g14-chromium: #C6CAD3;
|
||||
$g15-platinum: #D4D7DD;
|
||||
$g16-pearl: #E7E8EB;
|
||||
$g17-whisper: #EEEFF2;
|
||||
$g18-cloud: #F6F6F8;
|
||||
$g19-ghost: #FAFAFC;
|
||||
$g20-white: #ffffff;
|
||||
|
||||
// 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;
|
||||
$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: #F2F4FF;
|
||||
|
||||
// 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;
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?qtz244');
|
||||
src: url('fonts/icomoon.eot?qtz244#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?qtz244') format('truetype'),
|
||||
url('fonts/icomoon.woff?qtz244') format('woff'),
|
||||
url('fonts/icomoon.svg?qtz244#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-influx-logo:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-influx-logotype:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-sun:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-moon:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-files-empty:before {
|
||||
content: "\e925";
|
||||
}
|
||||
.icon-folder-download:before {
|
||||
content: "\e933";
|
||||
}
|
||||
.icon-folder-upload:before {
|
||||
content: "\e934";
|
||||
}
|
||||
.icon-map2:before {
|
||||
content: "\e94c";
|
||||
}
|
||||
.icon-clock:before {
|
||||
content: "\e94e";
|
||||
}
|
||||
.icon-download:before {
|
||||
content: "\e960";
|
||||
}
|
||||
.icon-upload:before {
|
||||
content: "\e961";
|
||||
}
|
||||
.icon-zoom-in:before {
|
||||
content: "\e987";
|
||||
}
|
||||
.icon-zoom-out:before {
|
||||
content: "\e988";
|
||||
}
|
||||
.icon-cog:before {
|
||||
content: "\e994";
|
||||
}
|
||||
.icon-plus:before {
|
||||
content: "\ea0a";
|
||||
}
|
||||
.icon-minus:before {
|
||||
content: "\ea0b";
|
||||
}
|
||||
.icon-cancel-circle:before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
.icon-blocked:before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
.icon-cross:before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
.icon-checkmark:before {
|
||||
content: "\ea10";
|
||||
}
|
||||
.icon-checkmark2:before {
|
||||
content: "\ea11";
|
||||
}
|
||||
.icon-arrow-up-left2:before {
|
||||
content: "\ea39";
|
||||
}
|
||||
.icon-arrow-up2:before {
|
||||
content: "\ea3a";
|
||||
}
|
||||
.icon-arrow-up-right2:before {
|
||||
content: "\ea3b";
|
||||
}
|
||||
.icon-arrow-right2:before {
|
||||
content: "\ea3c";
|
||||
}
|
||||
.icon-arrow-down-right2:before {
|
||||
content: "\ea3d";
|
||||
}
|
||||
.icon-arrow-down2:before {
|
||||
content: "\ea3e";
|
||||
}
|
||||
.icon-arrow-down-left2:before {
|
||||
content: "\ea3f";
|
||||
}
|
||||
.icon-arrow-left2:before {
|
||||
content: "\ea40";
|
||||
}
|
||||
.icon-new-tab:before {
|
||||
content: "\ea7e";
|
||||
}
|
||||
.icon-tux:before {
|
||||
content: "\eabd";
|
||||
}
|
||||
.icon-appleinc:before {
|
||||
content: "\eabe";
|
||||
}
|
||||
.icon-windows8:before {
|
||||
content: "\eac2";
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "topnav.html" . }}
|
||||
{{ partial "sidebar.html" . }}
|
||||
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="description" content="{{ if .Description }}{{ .Description }}. {{ end }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>{{ if .Params.seotitle }} {{ .Params.seotitle }} {{ else if .Title }} {{ .Title }} {{ end }} | InfluxData Documentation</title>
|
||||
{{ partial "nested/stylesheets.html"}}
|
||||
<title>{{ if .Params.seotitle }} {{ print .Params.seotitle " | " }} {{ else if .Title }} {{ print .Title " | " }} {{ end }}InfluxData Documentation</title>
|
||||
|
||||
{{ partial "header/stylesheets.html"}}
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
{{ partial "topnav.html" }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{{ $cssOptionsLight := (dict "targetPath" "light-theme.css" "compressed" "nested" "enableSourceMap" true) }}
|
||||
{{ $PostCSSOptions := (dict "use" "autoprefixer" "noMap" false) }}
|
||||
|
||||
{{ $stylesDark := resources.Get "styles/styles-dark.scss" | toCSS $cssOptionsDark | postCSS $PostCSSOptions | minify | fingerprint }}
|
||||
{{ $stylesDark := resources.Get "styles/styles-default.scss" | toCSS $cssOptionsDark | postCSS $PostCSSOptions | minify | fingerprint }}
|
||||
<link rel="stylesheet" title="dark-theme" href="{{ $stylesDark.Permalink }}">
|
||||
|
||||
{{ $stylesLight := resources.Get "styles/styles-light.scss" | toCSS $cssOptionsLight | postCSS $PostCSSOptions | minify | fingerprint }}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="topnav">
|
||||
<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="/">Docs</a>
|
||||
</div>
|
||||
<div class="topnav--right">
|
||||
<div class="version-selector"></div>
|
||||
<div class="theme-selector"></div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue