190 lines
3.9 KiB
SCSS
190 lines
3.9 KiB
SCSS
.article {
|
|
background: $article-bg;
|
|
border-radius: $radius 0 0 $radius;
|
|
padding: 2rem 4rem 3rem;
|
|
}
|
|
|
|
.article--content{
|
|
max-width: 820px;
|
|
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; }
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 2.65rem;
|
|
margin: .4em 0 1em;
|
|
}
|
|
h2 {
|
|
font-size: 2rem;
|
|
margin: -.25rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
font-weight: $medium;
|
|
color: $article-heading-alt;
|
|
}
|
|
h3 {
|
|
font-size: 1.65rem;
|
|
font-weight: $medium;
|
|
margin: -1rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
font-style: italic;
|
|
font-weight: $medium;
|
|
margin: -1.25rem 0 .5rem;
|
|
padding-top: 1.75rem;
|
|
color: $article-heading-alt;
|
|
}
|
|
h5 {
|
|
font-size: 1rem;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
h6 {
|
|
font-size: 1rem;
|
|
font-style: italic;
|
|
margin: -1.25rem 0 .25rem;
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
p,li {
|
|
color: $article-text;
|
|
line-height: 1.7rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 1.5em;
|
|
}
|
|
|
|
a {
|
|
color: $article-link;
|
|
font-weight: $medium;
|
|
text-decoration: none;
|
|
&:hover {
|
|
color: $article-link-hover;
|
|
}
|
|
}
|
|
|
|
strong {
|
|
color: $article-bold;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
margin-bottom: 2rem;
|
|
border-radius: ($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;
|
|
}
|
|
|
|
|
|
@import "article/blocks",
|
|
"article/buttons",
|
|
"article/children",
|
|
"article/code",
|
|
"article/cloud",
|
|
"article/enterprise",
|
|
"article/expand",
|
|
"article/feedback",
|
|
"article/flex",
|
|
"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/truncate",
|
|
"article/video",
|
|
"article/warn";
|
|
|
|
|
|
|
|
//////////////////////////////// Miscellaneous ///////////////////////////////
|
|
|
|
.required, .req {
|
|
color:#FF8564;
|
|
font-weight:700;
|
|
font-style: italic;
|
|
}
|
|
|
|
a.q-link {
|
|
font-size: .8rem;
|
|
vertical-align: super;
|
|
line-height: 0;
|
|
color: $g20-white;
|
|
opacity: .5;
|
|
transition: opacity .2s;
|
|
&:hover {opacity: 1;}
|
|
}
|
|
|
|
/////////////////////////// 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;
|
|
|
|
.oss:after {
|
|
content: 'beta';
|
|
display: inline-block;
|
|
position: relative;
|
|
font-style: italic;
|
|
font-size: .75em;
|
|
margin-left: .15rem;
|
|
padding: .1rem .4rem .12rem;
|
|
border-radius: 1rem;
|
|
border: 1px solid rgba($g20-white, .5);
|
|
top: -1px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
.article {
|
|
padding: 1.5rem 1.5rem 3rem;
|
|
|
|
h1 { margin: .35rem 0 2rem; font-size: 2.4rem; }
|
|
h2 { font-size: 1.9rem; }
|
|
h3 { font-size: 1.55rem; }
|
|
h4 { font-size: 1.3rem; }
|
|
|
|
}
|
|
}
|