diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss index 0fbed9121..5e7eeac72 100644 --- a/assets/styles/layouts/_article.scss +++ b/assets/styles/layouts/_article.scss @@ -93,623 +93,25 @@ margin: 1.85rem 0 1.75rem; } - //////////////////////////////////// Lists //////////////////////////////////// - ol, ul { - padding-left: 1.6rem; - } - - ul { - list-style-type: disc; - li:before{ - content: "" !important; - display: none; - } - } - - ol { - list-style: none; - counter-reset: item; - li { - position: relative; - counter-increment: item; - &:before { - content: counter(item) ". "; - position: absolute; - left: -1.6em; - color: $article-bold; - font-weight: bold; - } - ul { - counter-reset: item; - } - } - } - - & > ol, - & > ul { - margin: 1rem 0 1.5rem 0; - } - - li { - margin: .25rem 0; - &:not(:last-child) { - > p:only-child { margin-bottom: 0; } - } - p + ul, - p + ol { - margin: -.9rem 0 .5rem; - } - } - - //////////////////////////////////// Code //////////////////////////////////// - - code,pre { - background: $article-code-bg; - font-family: $roboto-mono; - color: $article-code; - } - - p,li,table,h2,h3,h4,h5,h6 { - code { - padding: .15rem .45rem .25rem; - border-radius: $radius; - color: $article-code; - white-space: nowrap; - font-size: .95rem; - 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; - } - } - } - } + @import "article/blocks", + "article/buttons", + "article/children", + "article/code", + "article/cloud", + "article/enterprise", + "article/feedback", + "article/lists", + "article/note", + "article/pagination-btns", + "article/scrollbars", + "article/tabbed-content", + "article/tables", + "article/tags", + "article/truncate", + "article/warn"; - pre { - margin: 2rem 0 2.25rem; - padding: 1.75rem 1.75rem 1.25rem; - border-radius: $radius; - overflow-x: scroll; - overflow-y: hidden; - code { - padding: 0; - line-height: 1.4rem; - } - } - - //////////////////////////////////// Tables //////////////////////////////////// - - table { - display: inline-block; - margin: 1rem 0 3rem; - border-spacing: 0; - color: $article-text; - max-width: 100%; - overflow-x: auto; - overflow-y: hidden; - box-shadow: 1px 3px 10px $article-shadow; - border-radius: ($radius * 1.5); - - th, td { - padding: .85rem 1.25rem; - } - thead { - background: linear-gradient(to right, $article-table-header-left, $article-table-header-right); - background-attachment: fixed; - } - - th { - color: $g20-white; - &:first-child { - border-radius: ($radius * 1.5) 0 0 0; - } - &:last-child { - border-radius: 0 ($radius * 1.5) 0 0; - } - } - - td { - font-size: .95rem; - line-height: 1.5em; - } - - tr{ - &:nth-child(even) { - background: $article-table-row-alt; - } - &:last-child { - td { - &:first-child { border-radius: 0 0 0 ($radius * 1.5); } - &:last-child { border-radius: 0 0 ($radius * 1.5) 0; } - } - - } - } - } - - ///////////////////////// Landing Page Article Links ///////////////////////// - - .children-links, .list-links { - h2,h3,h4 { - margin-top: -.5rem; - - a a:after { - content: "\e919"; - font-family: "icomoon"; - color: rgba($article-heading, .35); - vertical-align: bottom; - transition: color .2s; - margin-left: .4rem; - } - a:hover { - &:after { color: $article-link; } - } - } - } - - ////////////////// Blockquotes, Notes, Warnings, & Messages ////////////////// - - blockquote, - .feedback, - .note, - .warn, - .enterprise-msg, - .cloud-msg { - padding: 1.65rem 2rem .1rem 2rem; - margin: 1rem 0 2rem; - border-width: 0 0 0 4px; - border-style: solid; - border-radius: 0 $radius $radius 0; - font-size: .95rem; - - ul,ol { - &:last-child { margin-bottom: 1.85rem; } - } - } - - blockquote { - border-color: rgba($article-text, .25); - p, li { - 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, li { - 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; - } - } - } - ol li:before { - color: $article-note-text; - } - code, pre{ - color: $article-note-code; - background: $article-note-code-bg; - } - img { - box-shadow: 1px 3px 10px $article-note-shadow; - } - table{ - color: $article-note-text; - box-shadow: 1px 3px 10px $article-note-shadow; - thead{ - background: $article-note-table-header; - } - tr:nth-child(even) td { - background: $article-note-table-row-alt; - } - } - blockquote { - border-color: rgba($article-note-text, .25); - p { color: rgba($article-note-text, .6); } - } - } - - .warn { - border-color: $article-warn-base; - background: rgba($article-warn-base, .08); - h1,h2,h3,h4,h5,h6 { - color: $article-warn-heading; - } - p, li { - 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; - } - } - } - ol li:before { - color: $article-warn-text; - } - code, pre{ - color: $article-warn-code; - background: $article-warn-code-bg; - } - img { - box-shadow: 1px 3px 10px $article-warn-shadow; - } - table{ - color: $article-warn-text; - box-shadow: 1px 3px 10px $article-warn-shadow; - thead{ - background: $article-warn-table-header; - } - tr:nth-child(even) td { - background: $article-warn-table-row-alt; - } - } - blockquote { - border-color: rgba($article-warn-text, .25); - p { color: rgba($article-warn-text, .6); } - } - } - - .feedback { - border-color: rgba($article-note-base, .75); - background: rgba($article-text, .05); - } - - ///////////////////////////////// Enterprise ///////////////////////////////// - - .enterprise, .cloud { - position: relative; - padding: 0 0 .01rem 2rem; - margin-left: -2rem; - - &-msg { - font-style: italic; - display: flex; - div:first-child { margin-right: 1.25rem; } - } - &-flag { - padding: .2rem .4rem; - font-size: .75rem; - font-style: normal; - font-weight: bold; - color: $g20-white; - border-radius: $radius; - vertical-align: text-bottom; - } - } - - .enterprise { - border-left: 2px solid $article-enterprise-base; - &-msg { - border-color: $article-enterprise-base; - background: rgba($article-enterprise-base, .15); - p { color: $article-enterprise-text; } - a { - color: $article-enterprise-link; - &:hover { color: $article-enterprise-link-hover; } - } - } - &-flag { - background: $article-enterprise-base; - &:before { - content: "E"; - } - } - } - - .cloud { - border-left: 2px solid $article-cloud-base; - &-msg { - border-color: $article-cloud-base; - background: rgba($article-cloud-base, .15); - p { color: $article-cloud-text; } - a { - color: $article-cloud-link; - &:hover { color: $article-cloud-link-hover; } - } - code, pre { - color: $article-cloud-code; - background: $article-cloud-code-bg; - } - } - &-flag { - background: $article-cloud-base; - &:before { - content: "C"; - } - } - } - - .enterprise, .cloud { - .enterprise-flag, .cloud-flag { - position: absolute; - top: -.15rem; - left: -.68rem; - transform: scale(.8); - transition: all .2s; - &:hover { - transform: scale(1); - color: $g20-white; - } - } - } - - /////////////////////////////// Tabbed Content /////////////////////////////// - - .tabs-wrapper { - margin: 2.5rem 0 .5rem; - } - - .code-tabs-wrapper { - margin: 1.5rem 0 .5rem; - } - - .tabs, .code-tabs { - p { - display: flex; - flex-wrap: wrap; - } - a { - flex-grow: 1; - margin: 2px; - font-size: 0.875rem; - font-weight: $medium; - color: $article-tab-text; - padding: .35rem .75rem; - display: inline-block; - text-align: center; - border-radius: $radius; - background-color: $article-tab-bg; - transition: background-color .2s, color .2s; - - &:hover { - color: $article-tab-active-text; - background: $article-tab-active-bg; - } - &.is-active { - color: $article-tab-active-text; - background: $article-tab-active-bg; - } - } - } - - .tab-content, .code-tabs-content { - margin: .75rem 0 3rem; - width: 100%; - - & > * { - width: 100% !important; - margin-left: 0 !important; - } - } - - .tab-content:not(:first-of-type), - .code-tab-content:not(:first-of-type) { - display: none; - } - - .code-tabs-wrapper { - .code-tabs { - p { - margin: 0; - text-align: right; - display: block; - } - a { - padding: .1rem .75rem; - margin: 0; - border-radius: $radius $radius 0 0; - display: inline-block; - background: $article-tab-code-bg; - color: $article-tab-code-text; - &:hover { - background: $article-tab-code-bg-hover; - color: $article-tab-code-text-hover; - } - &.is-active { - background-color: $article-code-bg; - color: $article-tab-code-active-text; - } - } - } - .code-tab-content { - padding: 0; - pre { - margin: 0 0 3rem; - border-radius: $radius 0 $radius $radius; - } - } - } - - /////////////////////////// Truncated Content Blocks /////////////////////////// - - .truncate { - position: relative; - margin-bottom: 3.5rem; - - .truncate-bottom { - position: absolute; - bottom: -30px; - width: 100%; - z-index: 100%; - height: auto; - } - - a.truncate-toggle { - display: block; - width: 100px; - margin: 0 auto; - color: $article-text; - background: $article-bg; - padding: .45rem; - text-align: center; - font-size: .75rem; - text-transform: uppercase; - border-radius: $radius; - transition: color .2s; - &:before{ - content: "Show Less"; - } - &:hover { - color: $article-link; - } - } - &.closed { - min-height: 200px; - max-height: 25vh; - overflow: hidden; - - .truncate-bottom { - bottom: 0; - background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1)); - height: 100px; - } - - a.truncate-toggle { - margin-top: 75px; - &:before { - content: "Show More"; - } - } - } - } - - /////////////////////////////////// Buttons ////////////////////////////////// - - a.btn { - display: inline-block; - margin: .5rem 0 1rem; - padding: .5rem 1rem; - background: $article-btn; - color: $article-btn-text; - border-radius: $radius; - font-size: .95rem; - - &:hover { - background: $article-btn-hover; - color: $article-btn-text-hover; - } - - &.download:before { - content: "\e91c"; - font-family: "icomoon"; - margin-right: .5rem; - } - - } - - //////////////////////////////// Scroll Bars ///////////////////////////////// - - pre { @include scrollbar($article-code-bg, $article-code-scrollbar); } - table { @include scrollbar($article-table-row-alt, $article-code-scrollbar);} - - .note { - pre { @include scrollbar($article-note-code-bg, $article-note-code-scrollbar); } - table { @include scrollbar($article-note-table-row-alt, $article-note-code-scrollbar); } - } - .warn { - pre { @include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar); } - table { @include scrollbar($article-warn-table-row-alt, $article-warn-code-scrollbar); } - } - - ////////////////////////// Guides Pagination Buttons ///////////////////////// - - .page-nav-btns { - display: flex; - justify-content: space-between; - margin: 3rem 0 1rem; - - .btn { - display: flex; - max-width: 49%; - text-align: center; - align-items: center; - - &.prev{ - margin: 0 auto 0 0; - padding: .75rem 1.25rem .75rem .75rem; - &:before { - content: "\e90a"; - font-family: "icomoon"; - margin-right: .5rem; - vertical-align: middle; - } - } - &.next { - margin: 0 0 0 auto; - padding: .75rem .75rem .75rem 1.25rem; - &:after { - content: "\e90c"; - font-family: "icomoon"; - margin-left: .5rem; - vertical-align: middle; - } - } - } - } - - //////////////////////////////////// Tags //////////////////////////////////// - - .tags { - border-top: 1px solid $article-hr; - padding-top: 1.5rem; - margin-top: 2rem; - - .tag { - background: $body-bg; - margin: .12rem 0; - padding: .35rem .6rem; - font-style: italic; - font-weight: bold; - color: rgba($article-text, .65); - font-size: .8rem; - } - } //////////////////////////////// Miscellaneous /////////////////////////////// @@ -720,8 +122,6 @@ } } - - //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// diff --git a/assets/styles/layouts/_sidebar.scss b/assets/styles/layouts/_sidebar.scss index 3f92b9be6..bb2058731 100644 --- a/assets/styles/layouts/_sidebar.scss +++ b/assets/styles/layouts/_sidebar.scss @@ -135,7 +135,7 @@ background: $nav-border; } ul { - margin-left: -.95em; + margin-left: -.96em; li:before { top: .4em; } diff --git a/assets/styles/layouts/_ui-messages.scss b/assets/styles/layouts/_ui-messages.scss index d10bb8de5..9d6844c80 100644 --- a/assets/styles/layouts/_ui-messages.scss +++ b/assets/styles/layouts/_ui-messages.scss @@ -5,6 +5,7 @@ width: 375px; margin: 1rem 0 2rem; padding: .85rem 0; + font-family: $roboto; font-size: .9rem; border-radius: 5px; color: $g20-white; diff --git a/assets/styles/layouts/article/_blocks.scss b/assets/styles/layouts/article/_blocks.scss new file mode 100644 index 000000000..aa16ebb6e --- /dev/null +++ b/assets/styles/layouts/article/_blocks.scss @@ -0,0 +1,24 @@ +////////////////// Blockquotes, Notes, Warnings, & Messages ////////////////// + +blockquote, +.block, { + padding: 1.65rem 2rem .1rem 2rem; + margin: 1rem 0 2rem; + border-width: 0 0 0 4px; + border-style: solid; + border-radius: 0 $radius $radius 0; + font-size: .95rem; + + ul,ol { + &:last-child { margin-bottom: 1.85rem; } + } +} + +blockquote { + border-color: rgba($article-text, .25); + p, li { + font-size: 1.15rem; + font-style: italic; + color: rgba($article-text, .5); + } +} diff --git a/assets/styles/layouts/article/_buttons.scss b/assets/styles/layouts/article/_buttons.scss new file mode 100644 index 000000000..74047082e --- /dev/null +++ b/assets/styles/layouts/article/_buttons.scss @@ -0,0 +1,22 @@ +/////////////////////////////////// Buttons ////////////////////////////////// + +a.btn { + display: inline-block; + margin: .5rem 0 1rem; + padding: .5rem 1rem; + background: $article-btn; + color: $article-btn-text; + border-radius: $radius; + font-size: .95rem; + + &:hover { + background: $article-btn-hover; + color: $article-btn-text-hover; + } + + &.download:before { + content: "\e91c"; + font-family: "icomoon"; + margin-right: .5rem; + } +} diff --git a/assets/styles/layouts/article/_children.scss b/assets/styles/layouts/article/_children.scss new file mode 100644 index 000000000..d9d3a4171 --- /dev/null +++ b/assets/styles/layouts/article/_children.scss @@ -0,0 +1,19 @@ +/////////////////////////// Children Article Links /////////////////////////// + +.children-links, .list-links { + h2,h3,h4 { + margin-top: -.5rem; + + a a:after { + content: "\e919"; + font-family: "icomoon"; + color: rgba($article-heading, .35); + vertical-align: bottom; + transition: color .2s; + margin-left: .4rem; + } + a:hover { + &:after { color: $article-link; } + } + } +} diff --git a/assets/styles/layouts/article/_cloud.scss b/assets/styles/layouts/article/_cloud.scss new file mode 100644 index 000000000..534fd2578 --- /dev/null +++ b/assets/styles/layouts/article/_cloud.scss @@ -0,0 +1,86 @@ +.cloud { + position: relative; + padding: 0 0 .01rem 2rem; + margin-left: -2rem; + border-left: 2px solid $article-cloud-base; + + &-flag { + padding: .2rem .4rem; + font-size: .75rem; + font-style: normal; + font-weight: bold; + color: $g20-white; + border-radius: $radius; + vertical-align: text-bottom; + background: $article-cloud-base; + position: absolute; + top: -.15rem; + left: -.68rem; + transform: scale(.8); + transition: all .2s; + &:hover { + transform: scale(1); + color: $g20-white; + } + &:before { + content: "C"; + } + } +} + +.cloud-msg { + border-color: $article-cloud-base; + background: rgba($article-cloud-base, .12); + h1,h2,h3,h4,h5,h6 { + color: $article-cloud-heading; + } + p,li { + color: $article-cloud-text; + } + a { + color: $article-cloud-link; + code:after { + border-color: transparent rgba($article-cloud-code, .35) transparent transparent; + } + &:hover { + color: $article-cloud-link-hover; + code:after { + border-color: transparent $article-cloud-link-hover transparent transparent; + } + } + } + ol li:before { + color: $article-cloud-text; + } + code, pre{ + color: $article-cloud-code; + background: $article-cloud-code-bg; + } + img { + box-shadow: 1px 3px 10px $article-cloud-shadow; + } + table{ + color: $article-cloud-text; + box-shadow: 1px 3px 10px $article-cloud-shadow; + thead{ + background: $article-cloud-table-header; + } + tr:nth-child(even) td { + background: $article-cloud-table-row-alt; + } + } + blockquote { + border-color: rgba($article-cloud-text, .25); + p { color: rgba($article-cloud-text, .6); } + } + + &.flex { + font-style: italic; + display: flex; + div:first-child { + position: relative; + margin: .25rem 2rem 0 0; + } + } + +} diff --git a/assets/styles/layouts/article/_code.scss b/assets/styles/layouts/article/_code.scss new file mode 100644 index 000000000..e9e2b3899 --- /dev/null +++ b/assets/styles/layouts/article/_code.scss @@ -0,0 +1,59 @@ +//////////////////////////////////// Code //////////////////////////////////// + +code,pre { + background: $article-code-bg; + font-family: $roboto-mono; + color: $article-code; +} + +p,li,table,h2,h3,h4,h5,h6 { + code { + padding: .15rem .45rem .25rem; + border-radius: $radius; + color: $article-code; + white-space: nowrap; + font-size: .95rem; + 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 2.25rem; + padding: 1.75rem 1.75rem 1.25rem; + border-radius: $radius; + overflow-x: scroll; + overflow-y: hidden; + code { + padding: 0; + line-height: 1.4rem; + } +} diff --git a/assets/styles/layouts/article/_enterprise.scss b/assets/styles/layouts/article/_enterprise.scss new file mode 100644 index 000000000..8bd60de09 --- /dev/null +++ b/assets/styles/layouts/article/_enterprise.scss @@ -0,0 +1,48 @@ +.enterprise { + position: relative; + padding: 0 0 .01rem 2rem; + margin-left: -2rem; + border-left: 2px solid $article-enterprise-base; + &-flag { + padding: .2rem .4rem; + font-size: .75rem; + font-style: normal; + font-weight: bold; + color: $g20-white; + border-radius: $radius; + vertical-align: text-bottom; + background: $article-enterprise-base; + position: absolute; + top: -.15rem; + left: -.68rem; + transform: scale(.8); + transition: all .2s; + &:hover { + transform: scale(1); + color: $g20-white; + } + &:before { + content: "E"; + } + } +} + +.enterprise-msg { + border-color: $article-enterprise-base; + background: rgba($article-enterprise-base, .15); + p,li { + color: $article-enterprise-text; + } + a { + color: $article-enterprise-link; + &:hover { color: $article-enterprise-link-hover; } + } + &.flex { + font-style: italic; + display: flex; + div:first-child { + position: relative; + margin: .25rem 2rem 0 0; + } + } +} diff --git a/assets/styles/layouts/article/_feedback.scss b/assets/styles/layouts/article/_feedback.scss new file mode 100644 index 000000000..59f38d872 --- /dev/null +++ b/assets/styles/layouts/article/_feedback.scss @@ -0,0 +1,4 @@ +.feedback { + border-color: rgba($article-note-base, .75); + background: rgba($article-text, .05); +} diff --git a/assets/styles/layouts/article/_lists.scss b/assets/styles/layouts/article/_lists.scss new file mode 100644 index 000000000..c257e423a --- /dev/null +++ b/assets/styles/layouts/article/_lists.scss @@ -0,0 +1,48 @@ +//////////////////////////////////// Lists //////////////////////////////////// + +ol, ul { + padding-left: 1.6rem; +} + +ul { + list-style-type: disc; + li:before{ + content: "" !important; + display: none; + } +} + +ol { +list-style: none; +counter-reset: item; + li { + position: relative; + counter-increment: item; + &:before { + content: counter(item) ". "; + position: absolute; + left: -1.6em; + color: $article-bold; + font-weight: bold; + } + ul { + counter-reset: item; + } + } +} + +& > ol, +& > ul { + margin: 1rem 0 1.5rem 0; +} + +li { + margin: .25rem 0; + &:not(:last-child) { + > p:only-child { margin-bottom: 0; } + } + p + ul, + p + ol { + margin: -.9rem 0 .5rem; + } +} diff --git a/assets/styles/layouts/article/_note.scss b/assets/styles/layouts/article/_note.scss new file mode 100644 index 000000000..fb77464b1 --- /dev/null +++ b/assets/styles/layouts/article/_note.scss @@ -0,0 +1,46 @@ +.note { + border-color: $article-note-base; + background: rgba($article-note-base, .12); + h1,h2,h3,h4,h5,h6 { + color: $article-note-heading; + } + p, li { + 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; + } + } + } + ol li:before { + color: $article-note-text; + } + code, pre{ + color: $article-note-code; + background: $article-note-code-bg; + } + img { + box-shadow: 1px 3px 10px $article-note-shadow; + } + table{ + color: $article-note-text; + box-shadow: 1px 3px 10px $article-note-shadow; + thead{ + background: $article-note-table-header; + } + tr:nth-child(even) td { + background: $article-note-table-row-alt; + } + } + blockquote { + border-color: rgba($article-note-text, .25); + p { color: rgba($article-note-text, .6); } + } +} diff --git a/assets/styles/layouts/article/_pagination-btns.scss b/assets/styles/layouts/article/_pagination-btns.scss new file mode 100644 index 000000000..7f35d46ce --- /dev/null +++ b/assets/styles/layouts/article/_pagination-btns.scss @@ -0,0 +1,35 @@ +////////////////////////// Guides Pagination Buttons ///////////////////////// + +.page-nav-btns { + display: flex; + justify-content: space-between; + margin: 3rem 0 1rem; + + .btn { + display: flex; + max-width: 49%; + text-align: center; + align-items: center; + + &.prev{ + margin: 0 auto 0 0; + padding: .75rem 1.25rem .75rem .75rem; + &:before { + content: "\e90a"; + font-family: "icomoon"; + margin-right: .5rem; + vertical-align: middle; + } + } + &.next { + margin: 0 0 0 auto; + padding: .75rem .75rem .75rem 1.25rem; + &:after { + content: "\e90c"; + font-family: "icomoon"; + margin-left: .5rem; + vertical-align: middle; + } + } + } +} diff --git a/assets/styles/layouts/article/_scrollbars.scss b/assets/styles/layouts/article/_scrollbars.scss new file mode 100644 index 000000000..e33e898a6 --- /dev/null +++ b/assets/styles/layouts/article/_scrollbars.scss @@ -0,0 +1,17 @@ +//////////////////////////////// Scroll Bars ///////////////////////////////// + +pre { @include scrollbar($article-code-bg, $article-code-scrollbar); } +table { @include scrollbar($article-table-row-alt, $article-code-scrollbar);} + +.note { + pre { @include scrollbar($article-note-code-bg, $article-note-code-scrollbar); } + table { @include scrollbar($article-note-table-row-alt, $article-note-code-scrollbar); } +} +.warn { + pre { @include scrollbar($article-warn-code-bg, $article-warn-code-scrollbar); } + table { @include scrollbar($article-warn-table-row-alt, $article-warn-code-scrollbar); } +} +.cloud-msg { + pre { @include scrollbar($article-cloud-code-bg, $article-cloud-code-scrollbar); } + table { @include scrollbar($article-cloud-table-row-alt, $article-cloud-code-scrollbar); } +} diff --git a/assets/styles/layouts/article/_tabbed-content.scss b/assets/styles/layouts/article/_tabbed-content.scss new file mode 100644 index 000000000..b50bd8a08 --- /dev/null +++ b/assets/styles/layouts/article/_tabbed-content.scss @@ -0,0 +1,86 @@ +/////////////////////////////// Tabbed Content /////////////////////////////// + +.tabs-wrapper { + margin: 2.5rem 0 .5rem; +} + +.code-tabs-wrapper { + margin: 1.5rem 0 .5rem; +} + +.tabs, .code-tabs { + p { + display: flex; + flex-wrap: wrap; + } + a { + flex-grow: 1; + margin: 2px; + font-size: 0.875rem; + font-weight: $medium; + color: $article-tab-text; + padding: .35rem .75rem; + display: inline-block; + text-align: center; + border-radius: $radius; + background-color: $article-tab-bg; + transition: background-color .2s, color .2s; + + &:hover { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } + &.is-active { + color: $article-tab-active-text; + background: $article-tab-active-bg; + } + } +} + +.tab-content, .code-tabs-content { + margin: .75rem 0 3rem; + width: 100%; + + & > * { + width: 100% !important; + margin-left: 0 !important; + } +} + +.tab-content:not(:first-of-type), +.code-tab-content:not(:first-of-type) { + display: none; +} + +.code-tabs-wrapper { + .code-tabs { + p { + margin: 0; + text-align: right; + display: block; + } + a { + padding: .1rem .75rem; + margin: 0; + border-radius: $radius $radius 0 0; + display: inline-block; + background: $article-tab-code-bg; + color: $article-tab-code-text; + &:hover { + background: $article-tab-code-bg-hover; + color: $article-tab-code-text-hover; + } + &.is-active { + background-color: $article-code-bg; + color: $article-tab-code-active-text; + } + } + } + .code-tab-content { + padding: 0; + pre { + margin: 0 0 3rem; + border-radius: $radius 0 $radius $radius; + } + } +} diff --git a/assets/styles/layouts/article/_tables.scss b/assets/styles/layouts/article/_tables.scss new file mode 100644 index 000000000..3df26bd2e --- /dev/null +++ b/assets/styles/layouts/article/_tables.scss @@ -0,0 +1,49 @@ +//////////////////////////////////// Tables //////////////////////////////////// + +table { + display: inline-block; + margin: 1rem 0 3rem; + border-spacing: 0; + color: $article-text; + max-width: 100%; + overflow-x: auto; + overflow-y: hidden; + box-shadow: 1px 3px 10px $article-shadow; + border-radius: ($radius * 1.5); + + th, td { + padding: .85rem 1.25rem; + } + thead { + background: linear-gradient(to right, $article-table-header-left, $article-table-header-right); + background-attachment: fixed; + } + + th { + color: $g20-white; + &:first-child { + border-radius: ($radius * 1.5) 0 0 0; + } + &:last-child { + border-radius: 0 ($radius * 1.5) 0 0; + } + } + + td { + font-size: .95rem; + line-height: 1.5em; + } + + tr{ + &:nth-child(even) { + background: $article-table-row-alt; + } + &:last-child { + td { + &:first-child { border-radius: 0 0 0 ($radius * 1.5); } + &:last-child { border-radius: 0 0 ($radius * 1.5) 0; } + } + + } + } +} diff --git a/assets/styles/layouts/article/_tags.scss b/assets/styles/layouts/article/_tags.scss new file mode 100644 index 000000000..8c22756d8 --- /dev/null +++ b/assets/styles/layouts/article/_tags.scss @@ -0,0 +1,17 @@ +//////////////////////////////////// Tags //////////////////////////////////// + +.tags { + border-top: 1px solid $article-hr; + padding-top: 1.5rem; + margin-top: 2rem; + + .tag { + background: $body-bg; + margin: .12rem 0; + padding: .35rem .6rem; + font-style: italic; + font-weight: $medium; + color: rgba($article-text, .75); + font-size: .8rem; + } +} diff --git a/assets/styles/layouts/article/_truncate.scss b/assets/styles/layouts/article/_truncate.scss new file mode 100644 index 000000000..51ef7772d --- /dev/null +++ b/assets/styles/layouts/article/_truncate.scss @@ -0,0 +1,52 @@ +/////////////////////////// Truncated Content Blocks /////////////////////////// + +.truncate { + position: relative; + margin-bottom: 3.5rem; + + .truncate-bottom { + position: absolute; + bottom: -30px; + width: 100%; + z-index: 100%; + height: auto; + } + + a.truncate-toggle { + display: block; + width: 100px; + margin: 0 auto; + color: $article-text; + background: $article-bg; + padding: .45rem; + text-align: center; + font-size: .75rem; + text-transform: uppercase; + border-radius: $radius; + transition: color .2s; + &:before{ + content: "Show Less"; + } + &:hover { + color: $article-link; + } + } + &.closed { + min-height: 200px; + max-height: 25vh; + overflow: hidden; + + .truncate-bottom { + bottom: 0; + background-image: linear-gradient(to bottom, rgba($article-bg, 0), rgba($article-bg, 1)); + height: 100px; + } + + a.truncate-toggle { + margin-top: 75px; + &:before { + content: "Show More"; + } + } + } +} diff --git a/assets/styles/layouts/article/_warn.scss b/assets/styles/layouts/article/_warn.scss new file mode 100644 index 000000000..96ee8fbea --- /dev/null +++ b/assets/styles/layouts/article/_warn.scss @@ -0,0 +1,46 @@ +.warn { + border-color: $article-warn-base; + background: rgba($article-warn-base, .08); + h1,h2,h3,h4,h5,h6 { + color: $article-warn-heading; + } + p, li { + 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; + } + } + } + ol li:before { + color: $article-warn-text; + } + code, pre{ + color: $article-warn-code; + background: $article-warn-code-bg; + } + img { + box-shadow: 1px 3px 10px $article-warn-shadow; + } + table{ + color: $article-warn-text; + box-shadow: 1px 3px 10px $article-warn-shadow; + thead{ + background: $article-warn-table-header; + } + tr:nth-child(even) td { + background: $article-warn-table-row-alt; + } + } + blockquote { + border-color: rgba($article-warn-text, .25); + p { color: rgba($article-warn-text, .6); } + } +} diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss index c8fcf9b8c..0a31727b1 100644 --- a/assets/styles/themes/_theme-dark.scss +++ b/assets/styles/themes/_theme-dark.scss @@ -38,12 +38,10 @@ $article-heading: $g20-white; $article-heading-alt: $g19-ghost; $article-text: $np-mischka; $article-bold: $g18-cloud; -$article-link: #2aa3ff; +$article-link: $b-dodger; $article-link-hover: $g20-white; $article-hr: $wp-seance; $article-shadow: $np-deepnight; -$article-note-shadow: #191a1b; -$article-warn-shadow: #191a1b; // Article Code $article-code: $cp-munchkin; @@ -56,13 +54,13 @@ $article-code-accent5: #ff6db0; $article-code-accent6: $b-pool; $article-code-accent7: #e90; $article-code-select: $b-pool; -$article-code-link: #2aa3ff; +$article-code-link: $b-dodger; $article-code-link-hover: $g20-white; $article-code-scrollbar: $np-martinique; // Article Tables -$article-table-header-left: $p-planet; -$article-table-header-right: $b-sapphire; +$article-table-header-left: $wp-violet; +$article-table-header-right: $b-curious; $article-table-row-alt: rgba($wp-jagger, .75); // Article Notes, Warnings, & Messages @@ -72,9 +70,10 @@ $article-note-text: $gr-viridian; $article-note-link: $gr-rainforest; $article-note-link-hover: $g20-white; $article-note-table-header: $gr-viridian; -$article-note-table-row-alt: #21272d; -$article-note-code: #75d2f1; -$article-note-code-bg: #20272b; +$article-note-table-row-alt: rgba($gr-viridian, .15); +$article-note-shadow: $np-deepnight; +$article-note-code: $cp-comet; +$article-note-code-bg: $wp-telopea; $article-note-code-accent1: #567375; $article-note-code-accent2: $b-pool; $article-note-code-accent3: $gr-viridian; @@ -82,17 +81,18 @@ $article-note-code-accent4: $o-ruby; $article-note-code-accent5: #ff6db0; $article-note-code-accent6: $b-pool; $article-note-code-accent7: #e90; -$article-note-code-scrollbar: $gr-grass; +$article-note-code-scrollbar: $cp-jakarta; $article-warn-base: $o-dreamsicle; $article-warn-heading: $g20-white; $article-warn-text: $o-dreamsicle; $article-warn-link: $o-tungsten; $article-warn-link-hover: $g20-white; -$article-warn-table-header: $o-dreamsicle; -$article-warn-table-row-alt: #2b252b; +$article-warn-table-header: rgba($o-dreamsicle, .9); +$article-warn-table-row-alt: rgba($o-dreamsicle, .1); +$article-warn-shadow: $np-deepnight; $article-warn-code: #ec6e6e; -$article-warn-code-bg: #292024; +$article-warn-code-bg: $wp-telopea; $article-warn-code-accent1: #844c4c; $article-warn-code-accent2: $b-pool; $article-warn-code-accent3: $gr-viridian; @@ -100,34 +100,46 @@ $article-warn-code-accent4: $o-ruby; $article-warn-code-accent5: #ffb4fb; $article-warn-code-accent6: $b-pool; $article-warn-code-accent7: #e90; -$article-warn-code-scrollbar: #5f3535; +$article-warn-code-scrollbar: #561e4d; + +$article-cloud-base: $b-pool; +$article-cloud-heading: $g20-white; +$article-cloud-text: $b-hawkeye; +$article-cloud-link: $b-hawkeye; +$article-cloud-link-hover: $g20-white; +$article-cloud-table-header: $b-pool; +$article-cloud-table-row-alt: rgba($b-pool, .15); +$article-cloud-shadow: $np-deepnight; +$article-cloud-code: $b-laser; +$article-cloud-code-bg: $wp-telopea; +$article-cloud-code-accent1: #567375; +$article-cloud-code-accent2: $b-pool; +$article-cloud-code-accent3: $gr-viridian; +$article-cloud-code-accent4: $o-ruby; +$article-cloud-code-accent5: #ff6db0; +$article-cloud-code-accent6: $b-pool; +$article-cloud-code-accent7: #e90; +$article-cloud-code-scrollbar: $cp-jakarta; $article-enterprise-base: $p-star; $article-enterprise-text: $p-potassium; $article-enterprise-link: $p-moonstone; $article-enterprise-link-hover: $g20-white; -$article-cloud-base: $b-pool; -$article-cloud-text: $b-neutrino; -$article-cloud-link: $b-snow; -$article-cloud-link-hover: $g20-white; -$article-cloud-code: $b-laser; -$article-cloud-code-bg: $b-abyss; - // Article Tabs for tabbed content $article-tab-text: $g12-forge; $article-tab-bg: rgba($np-deepnight, .6); $article-tab-active-text: $g20-white; -$article-tab-active-bg: $b-ocean; +$article-tab-active-bg: $b-pool; $article-tab-code-text: $g9-mountain; -$article-tab-code-bg: rgba($np-deepnight, .4); +$article-tab-code-bg: rgba($np-deepnight, .45); $article-tab-code-text-hover: $g20-white; -$article-tab-code-bg-hover: $b-ocean; +$article-tab-code-bg-hover: $b-pool; $article-tab-code-active-text: $g20-white; // Article page buttons -$article-btn: $b-ocean; +$article-btn: $b-pool; $article-btn-text: $g20-white; $article-btn-hover: $b-pool; $article-btn-text-hover: $g20-white; diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss index 6783f65c7..47b759117 100644 --- a/assets/styles/themes/_theme-light.scss +++ b/assets/styles/themes/_theme-light.scss @@ -43,8 +43,6 @@ $article-link: $b-ocean !default; $article-link-hover: $gr-viridian !default; $article-shadow: #c8cdd0 !default; $article-hr: $g15-platinum !default; -$article-note-shadow: #8cb7ab !default; -$article-warn-shadow: #b98a7d !default; // Article Code $article-code: $p-star !default; @@ -74,6 +72,7 @@ $article-note-link: rgba($gr-emerald, .75) !default; $article-note-link-hover: $b-pool !default; $article-note-table-header: $gr-viridian !default; $article-note-table-row-alt: #d6f5e9 !default; +$article-note-shadow: #8cb7ab !default; $article-note-code: #0A6f75 !default; $article-note-code-bg: #d6f7ec !default; $article-note-code-accent1: #6abba0 !default; @@ -92,6 +91,7 @@ $article-warn-link: rgba($o-curacao, .75) !default; $article-warn-link-hover: $b-sapphire !default; $article-warn-table-header: $o-dreamsicle !default; $article-warn-table-row-alt: #ffe6df !default; +$article-warn-shadow: #b98a7d !default; $article-warn-code: #d0154e !default; $article-warn-code-bg: #ffebeb !default; $article-warn-code-accent1: #fd99b8 !default; @@ -103,18 +103,30 @@ $article-warn-code-accent6: #357ae8 !default; $article-warn-code-accent7: #e90 !default; $article-warn-code-scrollbar: #FFB1B1 !default; +$article-cloud-base: $b-laser !default; +$article-cloud-heading: $gr-emerald !default; +$article-cloud-text: $b-ocean !default; +$article-cloud-link: $b-ocean !default; +$article-cloud-link-hover: $gr-canopy !default; +$article-cloud-table-header: $gr-viridian !default; +$article-cloud-table-row-alt: #d6f5e9 !default; +$article-cloud-shadow: #b98a7d !default; +$article-cloud-code: $b-sapphire !default; +$article-cloud-code-bg: rgba($b-pool, .25) !default; +$article-cloud-code-accent1: #6abba0 !default; +$article-cloud-code-accent2: #0084d6 !default; +$article-cloud-code-accent3: #5d52d6 !default; +$article-cloud-code-accent4: $o-ruby !default; +$article-cloud-code-accent5: #e24bbb !default; +$article-cloud-code-accent6: #0084d6 !default; +$article-cloud-code-accent7: #e90 !default; +$article-cloud-code-scrollbar: #87DABE !default; + $article-enterprise-base: $cp-comet !default; $article-enterprise-text: $p-star !default; $article-enterprise-link: $p-star !default; $article-enterprise-link-hover: $b-ocean !default; -$article-cloud-base: $b-laser !default; -$article-cloud-text: $b-ocean !default; -$article-cloud-link: $b-ocean !default; -$article-cloud-link-hover: $gr-canopy !default; -$article-cloud-code: $b-sapphire !default; -$article-cloud-code-bg: rgba($b-pool, .25) !default; - // Article Tabs for tabbed content $article-tab-text: $g8-storm !default; $article-tab-bg: $g18-cloud !default; diff --git a/assets/styles/tools/_color-palette.scss b/assets/styles/tools/_color-palette.scss index c9d3eb894..6ec71c1c9 100644 --- a/assets/styles/tools/_color-palette.scss +++ b/assets/styles/tools/_color-palette.scss @@ -36,18 +36,7 @@ $p-moonstone: #C9D0FF; $p-quartz: #D6D5ED; $p-violettecreme: #EDF0FF; -// 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; + // -------------------------------------------------- @@ -136,9 +125,23 @@ $b-chathams: #125A7F; $b-matisse: #166F9D; $b-eastern: #1A83BB; $b-curious: #1E98D8; +$b-dodger: #2AA3FF; $b-pool: #22ADF6; // Brand color $b-laser: #47BBF8; $b-malibu: #6CC8F9; $b-horizon: #91D6FB; $b-fleur: #B5E4FC; $b-hawkeye: #DAF1FD; + +// Greens +$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; diff --git a/content/v2.0/example.md b/content/v2.0/example.md index dc93b68a0..988f29c90 100644 --- a/content/v2.0/example.md +++ b/content/v2.0/example.md @@ -303,16 +303,16 @@ This is **bold**. This is _italic_. // This is a code block inside of a blockquote cpu = from(bucket:"telegraf/autogen") |> range(start:-30m) - |> filter(fn:(r) => r._measurement == "cpu") + |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName") ``` ###### 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 | -| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 | -| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 | -| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 | +| Column 1 | Column 2 | Column 3 | Column 4 | +| -------- | -------- | -------- | -------- | +| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | +| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | +| 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 %}} @@ -416,19 +416,127 @@ This is **bold**. This is _italic_. // This is a code block inside of a blockquote cpu = from(bucket:"telegraf/autogen") |> range(start:-30m) - |> filter(fn:(r) => r._measurement == "cpu") + |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName") ``` ###### 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 | -| Row 2.1 | Row 2.2 | Row 2.3 | Row 2.4 | -| Row 3.1 | Row 3.2 | Row 3.3 | Row 3.4 | -| Row 4.1 | Row 4.2 | Row 4.3 | Row 4.4 | +| Column 1 | Column 2 | Column 3 | Column 4 | +| -------- | -------- | -------- | -------- | +| Row 1.1 | `Row 1.2` | Row 1.3 | Row 1.4 | +| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | +| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | +| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | {{% /warn %}} +{{% cloud-msg %}} +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. +Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. +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. + +{{< img-hd src="/img/test-image-2.png" alt="Test Image" />}} + +### 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. + +> Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. +> 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. + +#### Inline Styles +This is an [inline link](#). This is `inline code`. +This is an [`inline code link`](#) . +This is **bold**. This is _italic_. + +- Unordered list line-item 1 +- Unordered list line-item 2 + - Unordered list line-item 2.1 + - Unordered list line-item 2.2 + - Unordered list line-item 2.3 +- Unordered list line-item 3 +- Unordered list line-item with multiple paragraphs. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + +- Unordered list line-item with multiple paragraphs. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + +1. Unordered list line-item 1 +2. Unordered list line-item 2 + 1. Unordered list line-item 2.1 + 2. Unordered list line-item 2.2 + 3. Unordered list line-item 2.3 +3. Unordered list line-item 3 +4. Unordered list line-item with multiple paragraphs. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + +5. Unordered list line-item with multiple paragraphs. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nunc rutrum, metus id scelerisque euismod, erat ante, ac congue enim risus id est. + Etiam tristique nisi et tristique auctor. + +```js +// This is a code block inside of a blockquote +cpu = from(bucket:"telegraf/autogen") + |> range(start:-30m) + |> filter(fn:(r) => r._measurement == "cpu" and r._field == "someReallyLongFieldName") +``` + +###### 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 | +| Row 2.1 | `Row 2.2` | Row 2.3 | Row 2.4 | +| Row 3.1 | `Row 3.2` | Row 3.3 | Row 3.4 | +| Row 4.1 | `Row 4.2` | Row 4.3 | Row 4.4 | + +{{% /cloud-msg %}} + {{< tabs-wrapper >}} {{% tabs %}} [tab 1.1](#) diff --git a/layouts/partials/article/_alpha-feedback.html b/layouts/partials/article/_alpha-feedback.html index dc9080714..65171623c 100644 --- a/layouts/partials/article/_alpha-feedback.html +++ b/layouts/partials/article/_alpha-feedback.html @@ -1,5 +1,5 @@
-
+

Bug Reports and Feedback

Thank you for being willing to help test InfluxDB v2.0 alpha! diff --git a/layouts/partials/article/_cloud-feedback.html b/layouts/partials/article/_cloud-feedback.html index b3a7a0e91..d8249c0a9 100644 --- a/layouts/partials/article/_cloud-feedback.html +++ b/layouts/partials/article/_cloud-feedback.html @@ -1,6 +1,6 @@ {{ $cloudName := .Site.Data.products.cloud.name }}

-