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

Merge pull request #14 from influxdata/v2-layout 

Updated various style issues, resolves #7
pull/21/head
Scott Anderson 2019-01-19 10:09:04 -07:00 committed by GitHub
parent e4259a2974 286bd44f89
commit 33586eb588
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 103 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
assets/styles/layouts/_layout-article.scss
View File

@ -16,6 +16,10 @@
}
}
}
h2,h3,h4,h5,h6 {
& + .highlight pre { margin-top: .5rem; }
& + .code-tabs-wrapper { margin-top: 0; }
}
h1 {
font-family: $klavika;
font-weight: 300;
@ -67,36 +71,26 @@
&:hover {
color: $article-link-hover;
}
code {
font-weight: normal;
transition: color .2s;
position: relative;
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
border-style: solid;
border-width: 0 .4rem .4rem 0;
border-color: transparent rgba($article-code, .35) transparent transparent;
transition: border .2s;
}
&:hover {
color: $article-code-hover;
&:after {
border-color: transparent $article-code-hover transparent transparent;
}
}
}
}
strong {
color: $article-bold;
}
img {
max-width: 100%;
margin-bottom: 2rem;
border-radius: ($border-radius * 1.5);
box-shadow: 1px 3px 10px $article-shadow;
}
hr {
border-width: 1px 0 0;
border-color: $article-hr;
border-style: solid;
margin: 1.85rem 0 1.75rem;
}
//////////////////////////////////// Lists ////////////////////////////////////
ol, ul {
@ -107,6 +101,7 @@
list-style-type: disc;
li:before{
content: "" !important;
display: none;
}
}
@ -136,6 +131,7 @@
li {
margin: .25rem 0;
p:only-child { margin-bottom: 0; }
}
//////////////////////////////////// Code ////////////////////////////////////
@ -145,15 +141,46 @@
font-family: 'Inconsolata', monospace;
}
code {
p code {
padding: .15rem .45rem .25rem;
border-radius: $border-radius;
color: $article-code;
white-space: nowrap;
font-style: normal;
}
a {
code {
font-weight: normal;
transition: color .2s;
position: relative;
color: $article-code-link;
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
border-style: solid;
border-width: 0 .4rem .4rem 0;
border-color: transparent rgba($article-code-link, .35) transparent transparent;
transition: border .2s;
}
}
&:hover {
code {
color: $article-code-link-hover;
&:after {
border-color: transparent $article-link-hover transparent transparent;
}
}
}
}
pre {
margin: 2rem 0 3rem;
padding: 1.5rem 1.5rem 1.25rem;
margin: 2rem 0 2.25rem;
padding: 1.75rem 1.75rem 1.25rem;
border-radius: $border-radius;
overflow-x: scroll;
overflow-y: hidden;
@ -548,7 +575,7 @@
h4 { font-size: 1.3rem; }
pre {
padding: 1.2em;
padding: 1.2em 1.2em .75rem;
}
blockquote,

11
assets/styles/layouts/_layout-sidebar.scss
View File

@ -20,24 +20,25 @@
}
input {
background: $article-bg;
background: $sidebar-search-bg;
border-radius: $border-radius;
border: 1px solid $sidebar-search-border;
border: 1px solid $sidebar-search-bg;
padding: .5em 2.15rem .5rem .5rem;
width: 100%;
color: $article-text;
transition-property: border, box-shadow;
transition-duration: .2s;
box-shadow: 2px 2px 6px $sidebar-search-shadow;
&:focus {
outline: none;
border: 1px solid $sidebar-search-highlight;
box-shadow: 0px 0px 7px rgba($sidebar-search-highlight, .65);
border-color: $sidebar-search-highlight;
box-shadow: 1px 1px 10px rgba($sidebar-search-highlight, .5);
border-radius: $border-radius;
}
&::placeholder {
font-family: 'Roboto';
font-weight: 500;
color: rgba($article-text, .35);
color: rgba($article-text, .45);
}
}
}

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

@ -26,16 +26,18 @@ $theme-switch-light: inline-block !default;
$theme-switch-dark: none !default;
// Sidebar
$sidebar-search-border: $g5-pepper !default;
$sidebar-search-bg: $g3-castle !default;
$sidebar-search-shadow: #0F0F10 !default;
$sidebar-search-highlight: $b-pool !default;
// Article Content
$article-bg: $g3-castle !default;
$article-heading: $g19-ghost !default;
$article-text: $g14-chromium !default;
$article-bold: $g19-ghost !default;
$article-link: $b-pool !default;
$article-bold: $g18-cloud !default;
$article-link: #2aa3ff !default;
$article-link-hover: $g20-white !default;
$article-hr: $g6-smoke !default;
$article-shadow: #191a1b !default;
$article-note-shadow: #191a1b !default;
$article-warn-shadow: #191a1b !default;
@ -51,7 +53,8 @@ $article-code-accent5: #ff6db0 !default;
$article-code-accent6: $b-pool !default;
$article-code-accent7: #e90 !default;
$article-code-select: $b-pool !default;
$article-code-hover: $g20-white !default;
$article-code-link: #2aa3ff !default;
$article-code-link-hover: $g20-white !default;
$article-code-scrollbar: $g7-graphite !default;
// Article Tables

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

@ -25,8 +25,9 @@ $theme-switch-light: none;
$theme-switch-dark: inline-block;
// Sidebar
$sidebar-search-border: $g15-platinum;
$sidebar-search-highlight: $b-pool;
$sidebar-search-bg: $g20-white;
$sidebar-search-shadow: $g14-chromium;
$sidebar-search-highlight: $b-ocean;
// Article Content
$article-bg: $g20-white;
@ -36,6 +37,7 @@ $article-bold: $g8-storm;
$article-link: $b-ocean;
$article-link-hover: $gr-viridian;
$article-shadow: #c8cdd0;
$article-hr: $g15-platinum;
$article-note-shadow: #8cb7ab;
$article-warn-shadow: #b98a7d;
@ -50,7 +52,8 @@ $article-code-accent5: #e24bbb;
$article-code-accent6: $b-ocean;
$article-code-accent7: #e90;
$article-code-select: $b-pool;
$article-code-hover: $b-sapphire;
$article-code-link: $b-sapphire;
$article-code-link-hover: $gr-emerald;
$article-code-scrollbar: $p-potassium;
// Article Tables
@ -115,9 +118,9 @@ $article-tab-code-active-text: $p-star;
// Left Navigation
$nav-category: $b-ocean;
$nav-category-hover: $gr-viridian;
$nav-item: $g9-mountain;
$nav-item-hover: $gr-viridian;
$nav-item: $g10-wolf;
$nav-item-hover: $b-ocean;
$nav-border: $g14-chromium;
$nav-toggle: $g9-mountain;
$nav-toggle: $g20-white;
$nav-toggle-hover: $g20-white;
$nav-toggle-bg-hover: $b-ocean;

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

@ -16,12 +16,12 @@ This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nu
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.
{{< code-tabs-wrapper >}}
#### Here's a title for this codeblock
{{% code-tabs-wrapper %}}
{{% code-tabs %}}
[Flux](#)
[InfluxQL](#)
{{% /code-tabs %}}
{{% code-tab-content %}}
```js
data = from(bucket: "telegraf/autogen")
@ -39,7 +39,7 @@ FROM "telegraf"."autogen"."mem"
WHERE time > now() - 15m
```
{{% /code-tab-content %}}
{{< /code-tabs-wrapper >}}
{{% /code-tabs-wrapper %}}
{{% enterprise %}}
### h3 This is a header3
@ -67,9 +67,16 @@ This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nu
This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rutrum, metus id scelerisque euismod, erat ante suscipit nibh, ac congue enim risus id est. Etiam tristique nisi et tristique auctor. Morbi eu bibendum erat. Sed ullamcorper, dui id lobortis efficitur, mauris odio pharetra neque, vel tempor odio dolor blandit justo.This is a paragraph
---
There is a horizontal rule above and below this line.
---
#### Inline Styles
This is an [inline link](#). This is `inline code`.
This is an [`inline code link`](#) .
This is an [`inline code link`](#).
This is an [`inline code link` with text in the link](#).
This is **bold**. This is _italic_.
- Unordered list line-item 1
@ -134,6 +141,23 @@ avg_cpu
|> yield()
//
```
###### Here's a codeblock with a title
```js
// This is a code block
cpu = from(bucket:"telegraf/autogen")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
avg_cpu = cpu |> window(every:5m) |> mean()
avg_cpu
|> group(none:true)
|> yield()
//
```
{{% enterprise %}}
###### This is a table
| Column 1 | Column 2 | Column 3 | Column 4 |