263 lines
5.3 KiB
SCSS
263 lines
5.3 KiB
SCSS
.article {
|
|
background: $article-bg;
|
|
border-radius: $radius 0 0 $radius;
|
|
padding: 2rem 4rem 3rem;
|
|
}
|
|
|
|
.article--content{
|
|
max-width: 850px;
|
|
font-size: 1.1rem;
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: $article-heading;
|
|
a {
|
|
color: inherit !important;
|
|
font-weight: inherit !important;
|
|
text-decoration: none;
|
|
code:after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
h2,h3,h4,h5,h6 {
|
|
& + .highlight pre { margin-top: .5rem }
|
|
& + pre { margin-top: .5rem }
|
|
& + .code-tabs-wrapper { margin-top: 0; }
|
|
&.monospace { font-family: $code; }
|
|
&.green { color: $gr-rainforest; }
|
|
&.orange { color: $r-dreamsicle; }
|
|
&[metadata]::after {
|
|
content: attr(metadata);
|
|
margin-left: .65rem;
|
|
padding: .1em .5em;
|
|
color: $article-heading;
|
|
background: rgba($article-heading, .12);
|
|
font-size: .75em;
|
|
font-style: normal;
|
|
font-weight: $medium;
|
|
border-radius: 1em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
&[date]::after {
|
|
content: attr(date);
|
|
margin-left: .65rem;
|
|
opacity: .4;
|
|
font-size: .75em;
|
|
font-weight: $medium;
|
|
font-style: inherit;
|
|
}
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 2.75rem;
|
|
margin: .4em 0 .2em;
|
|
}
|
|
h2 {
|
|
font-size: 2.1rem;
|
|
margin: -.25rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
font-weight: $medium;
|
|
color: $article-heading-alt;
|
|
}
|
|
h3 {
|
|
font-size: 1.75rem;
|
|
font-weight: $medium;
|
|
margin: -1rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h4 {
|
|
font-size: 1.35rem;
|
|
font-style: italic;
|
|
font-weight: $medium;
|
|
margin: -1.25rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
color: $article-heading-alt;
|
|
}
|
|
h5 {
|
|
font-size: 1.1rem;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h6 {
|
|
font-size: 1.1rem;
|
|
font-style: italic;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
p,li {
|
|
color: $article-text;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1.5em;
|
|
}
|
|
|
|
a {
|
|
color: $article-link;
|
|
font-weight: $medium;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $article-link-hover;
|
|
}
|
|
&.help-link {
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background: $article-bg;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
color: $article-bold;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
margin-bottom: 2rem;
|
|
border-radius: ($radius * 1.5);
|
|
box-shadow: 1px 3px 10px $article-shadow;
|
|
}
|
|
|
|
ul + p > img {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
hr {
|
|
border-width: 1px 0 0;
|
|
border-color: $article-hr;
|
|
border-style: solid;
|
|
margin: 1.85rem 0 1.75rem;
|
|
}
|
|
|
|
|
|
@import "article/blocks",
|
|
"article/buttons",
|
|
"article/captions",
|
|
"article/children",
|
|
"article/code",
|
|
"article/cloud",
|
|
"article/diagrams",
|
|
"article/enterprise",
|
|
"article/expand",
|
|
"article/feedback",
|
|
"article/flex",
|
|
"article/flux",
|
|
"article/html-diagrams",
|
|
"article/influxdbu",
|
|
"article/influxql",
|
|
"article/keybinding",
|
|
"article/list-filters",
|
|
"article/lists",
|
|
"article/note",
|
|
"article/pagination-btns",
|
|
"article/product-tags",
|
|
"article/related",
|
|
"article/scrollbars",
|
|
"article/svgs",
|
|
"article/tabbed-content",
|
|
"article/tables",
|
|
"article/tags",
|
|
"article/telegraf-plugins",
|
|
"article/title",
|
|
"article/truncate",
|
|
"article/video",
|
|
"article/warn";
|
|
|
|
|
|
|
|
//////////////////////////////// Miscellaneous ///////////////////////////////
|
|
|
|
.required, .req {
|
|
color:#FF8564;
|
|
font-weight:$medium;
|
|
font-style: italic;
|
|
margin: 0 .15rem 0 .1rem;
|
|
|
|
&.asterisk {
|
|
margin: 0 -.1rem 0 -.5rem;
|
|
}
|
|
|
|
&.key {
|
|
font-size: .9rem;
|
|
font-weight: $medium;
|
|
}
|
|
|
|
&.blue {color: $b-dodger;}
|
|
&.green {color: $gr-viridian;}
|
|
&.magenta {color: $p-comet;}
|
|
}
|
|
|
|
h2,h3,h4,h5,h6 {
|
|
& + .keep-url {
|
|
margin-top: -1.5rem;
|
|
z-index: -100;
|
|
}
|
|
}
|
|
|
|
a.q-link {
|
|
font-size: .8rem;
|
|
vertical-align: super;
|
|
line-height: 0;
|
|
color: $g20-white;
|
|
opacity: .5;
|
|
transition: opacity .2s;
|
|
&:hover {opacity: 1;}
|
|
}
|
|
|
|
p.read-more {
|
|
text-align: right;
|
|
font-style: italic;
|
|
}
|
|
|
|
.highlight, pre, code, .flex-wrapper {
|
|
& + p.read-more {
|
|
margin: -.75rem 0 .5rem;
|
|
}
|
|
}
|
|
|
|
.nowrap { white-space: nowrap }
|
|
.all-caps {
|
|
text-transform: uppercase;
|
|
font-size: 1.05rem;
|
|
letter-spacing: .1em;
|
|
font-weight: $medium !important;
|
|
}
|
|
|
|
/////////////////////////// Getting Started Buttons //////////////////////////
|
|
|
|
.get-started-btns {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: flex-start;
|
|
margin-bottom: 2rem;
|
|
|
|
a.btn {
|
|
max-width: 300px;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
.article {
|
|
padding: 1.5rem 1.5rem 3rem;
|
|
|
|
h2 { font-size: 1.9rem; }
|
|
h3 { font-size: 1.55rem; }
|
|
h4 { font-size: 1.3rem; }
|
|
|
|
}
|
|
}
|