From 286bd44f89c8a0bf880611e4f4b63ed444ac6be9 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Sat, 19 Jan 2019 10:08:00 -0700 Subject: [PATCH] updated various style issues, resolves #7 --- assets/styles/layouts/_layout-article.scss | 79 +++++++++++++++------- assets/styles/layouts/_layout-sidebar.scss | 11 +-- assets/styles/themes/_theme-dark.scss | 11 +-- assets/styles/themes/_theme-light.scss | 15 ++-- content/v2.0/example.md | 32 +++++++-- 5 files changed, 103 insertions(+), 45 deletions(-) diff --git a/assets/styles/layouts/_layout-article.scss b/assets/styles/layouts/_layout-article.scss index 7ca289f6e..5597a47d9 100644 --- a/assets/styles/layouts/_layout-article.scss +++ b/assets/styles/layouts/_layout-article.scss @@ -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, diff --git a/assets/styles/layouts/_layout-sidebar.scss b/assets/styles/layouts/_layout-sidebar.scss index 8c2dcd6a8..087c4916d 100644 --- a/assets/styles/layouts/_layout-sidebar.scss +++ b/assets/styles/layouts/_layout-sidebar.scss @@ -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); } } } diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index ebe644367..bb0b850fb 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -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 diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 95555f0a1..f94dc368d 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -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; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index fb5792ff5..e1a64c78a 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -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 |