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

styled notes and warnings, updated readme with notes and warnings shortcodes

pull/3/head
Scott Anderson 2018-12-31 12:17:36 -07:00
parent 41f859512c
commit f0d45ccd46
7 changed files with 206 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -94,3 +94,16 @@ It should be short and assume the context of its parent if it has one.
Use only h2-h6 headings in markdown content.
h1 headings act as the page title and are populated automatically from the `title` frontmatter.
h2-h6 headings act as section headings.
### Notes & Warnings
Shortcodes are available for formatting notes and warnings in each article:
```md
{{% note %}}
Insert note markdown content here.
{{% /note %}}
{{% warn %}}
Insert warning markdown content here.
{{% /warn %}}
```

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

@ -168,6 +168,11 @@
}
}
td {
font-size: .95rem;
line-height: 1.5em;
}
tr{
&:nth-child(even) {
background: $article-table-row-alt;
@ -180,6 +185,100 @@
}
}
}
//////////////////////// Blockquotes, Notes, Warnings ////////////////////////
blockquote,
.note,
.warn {
padding: 1.65rem 2rem .1rem 2rem;
margin: 1rem 0 2rem;
border-width: 0 0 0 4px;
border-style: solid
}
blockquote {
border-color: rgba($article-text, .25);
p {
font-size: 1.15rem;
font-style: italic;
color: rgba($article-text, .5);
}
}
.note {
border-color: $article-note-base;
background: rgba($article-note-base, .08);
h1,h2,h3,h4,h5,h6 {
color: $article-note-heading;
}
p {
color: $article-note-text;
}
a {
color: $article-note-link;
code:after {
border-color: transparent rgba($article-note-code, .35) transparent transparent;
}
&:hover {
color: $article-note-link-hover;
code:after {
border-color: transparent $article-note-link-hover transparent transparent;
}
}
}
code, pre{
color: $article-note-code;
background: $article-note-code-bg;
}
table{
color: $article-note-text;
box-shadow: 1px 3px 15px $article-note-table-shadow;
thead{
background: $article-note-table-header;
}
tr:nth-child(even) td {
background: $article-note-table-row-alt;
}
}
}
.warn {
border-color: $article-warn-base;
background: rgba($article-warn-base, .08);
h1,h2,h3,h4,h5,h6 {
color: $article-warn-heading;
}
p {
color: $article-warn-text;
}
a {
color: $article-warn-link;
code:after {
border-color: transparent rgba($article-warn-code, .35) transparent transparent;
}
&:hover {
color: $article-warn-link-hover;
code:after {
border-color: transparent $article-warn-link-hover transparent transparent;
}
}
}
code, pre{
color: $article-warn-code;
background: $article-warn-code-bg;
}
table{
color: $article-warn-text;
box-shadow: 1px 3px 15px $article-warn-table-shadow;
thead{
background: $article-warn-table-header;
}
tr:nth-child(even) td {
background: $article-warn-table-row-alt;
}
}
}
}

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

@ -55,3 +55,26 @@ $article-table-header-left: $p-planet !default;
$article-table-header-right: $b-sapphire !default;
$article-table-shadow: #191a1b !default;
$article-table-row-alt: $g2-kevlar !default;
// Article Notes & Warnings
$article-note-base: $gr-viridian !default;
$article-note-heading: $g20-white !default;
$article-note-text: $gr-viridian !default;
$article-note-link: $gr-rainforest !default;
$article-note-link-hover: $g20-white !default;
$article-note-code: #75d2f1 !default;
$article-note-code-bg: #20272b !default;
$article-note-table-header: $gr-viridian !default;
$article-note-table-row-alt: #21272d !default;
$article-note-table-shadow: #191a1b !default;
$article-warn-base: $o-dreamsicle !default;
$article-warn-heading: $g20-white !default;
$article-warn-text: $o-dreamsicle !default;
$article-warn-link: $o-tungsten !default;
$article-warn-link-hover: $g20-white !default;
$article-warn-code: #ec6e6e !default;
$article-warn-code-bg: #292024 !default;
$article-warn-table-header: $o-dreamsicle !default;
$article-warn-table-row-alt: #2b252b !default;
$article-warn-table-shadow: #191a1b !default;

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

@ -54,3 +54,26 @@ $article-table-header-left: $b-pool;
$article-table-header-right: $gr-honeydew;
$article-table-shadow: #c8cdd0;
$article-table-row-alt: $g18-cloud;
// Article Notes & Warnings
$article-note-base: $gr-rainforest;
$article-note-heading: $gr-emerald;
$article-note-text: $gr-emerald;
$article-note-link: rgba($gr-emerald, .75);
$article-note-link-hover: $b-pool;
$article-note-code: #147572;
$article-note-code-bg: #d6f7ec;
$article-note-table-header: $gr-viridian;
$article-note-table-row-alt: #d6f5e9;
$article-note-table-shadow: #8cb7ab !default;
$article-warn-base: $o-dreamsicle;
$article-warn-heading: $o-fire;
$article-warn-text: $o-curacao;
$article-warn-link: rgba($o-curacao, .75);
$article-warn-link-hover: $p-planet;
$article-warn-code: #f52f75;
$article-warn-code-bg: #ffebeb;
$article-warn-table-header: $o-dreamsicle;
$article-warn-table-row-alt: #ffe6df;
$article-warn-table-shadow: #b98a7d !default;

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

@ -133,40 +133,45 @@ Etiam tristique nisi et tristique auctor.
> Etiam tristique nisi et tristique auctor.
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> ## h2 This is a header2
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> ### h3 This is a header3
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> #### h4 This is a header4
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> ##### h5 This is a header5
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> ###### h6 This is a header6
> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
> Etiam tristique nisi et tristique auctor.
>
> #### Inline Styles
> This is an [inline link](#). This is `inline code`.
> This is an [`inline code link`](#) .
> This is **bold**. This is _italic_.
>
> ```js
{{% note %}}
This is a basic note.
{{% /note %}}
{{% note %}}
## h2 This is a header2
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
### h3 This is a header3
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
#### h4 This is a header4
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
##### h5 This is a header5
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
###### h6 This is a header6
Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est.
Etiam tristique nisi et tristique auctor.
#### Inline Styles
This is an [inline link](#). This is `inline code`.
This is an [`inline code link`](#) .
This is **bold**. This is _italic_.
```js
// This is a code block inside of a blockquote
cpu = from(bucket:"telegraf/autogen")
|> range(start:-30m)
|> filter(fn:(r) => r._measurement == "cpu")
```
>
> ###### This is a table in a blockquote
###### This is a table in a blockquote
| Column 1 | Column 2 | Column 3 | Column 4 |
| -------- | -------- | -------- | -------- |
| Row 1.1 | Row 1.2 | Row 1.3 | Row 1.4 |
@ -174,9 +179,14 @@ cpu = from(bucket:"telegraf/autogen")
| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 |
| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 |
{{% /note %}}
<dt>
{{% warn %}}
This is a basic warning.
{{% /warn %}}
{{% warn %}}
This is a multiple paragraph blockquote with internal elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -227,4 +237,4 @@ cpu = from(bucket:"telegraf/autogen")
| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 |
| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 |
</dt>
{{% /warn %}}

3
layouts/shortcodes/note.html Normal file
View File

@ -0,0 +1,3 @@
<div class="note">
{{ .Inner }}
</div>

3
layouts/shortcodes/warn.html Normal file
View File

@ -0,0 +1,3 @@
<div class="warn">
{{ .Inner }}
</div>