docs-v2/assets/styles/layouts/article/_blocks.scss

100 lines
1.9 KiB
SCSS

///////////////////////// Blockquotes and Alert Blocks /////////////////////////
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: 1.05rem;
ul,ol {
&:last-child { margin-bottom: 1.85rem; }
}
& > h2,
& > h3,
& > h4,
& > h5,
& > h6 {
&:first-child {margin-top: 0; padding-top: 0.25em;}
}
&.note,
&.tip,
&.important,
&.warning, &.warn,
&.caution {
position: relative;
&:before {
position: absolute;
font-family: "alert-icons";
font-size: 1em;
line-height: 1em;
padding: .3rem;
text-align: center;
top: -.5rem;
left: -.95rem;
display: block;
border-radius: 50%;
box-shadow: 1px 3px 5px rgba($article-shadow, .5);
}
}
}
h2, h3, h4, h5, h6 {
& + .note,
& + .tip,
& + .important,
& + .warning,
& + .caution {
margin-top: 1.25rem;
}
}
blockquote {
padding: 1rem 1rem 1rem 1.25rem;
border-color: rgba($article-text, .25);
p, li {
font-size: 1.15rem;
font-style: italic;
color: rgba($article-text, .5);
}
*:last-child {margin-bottom: 0;}
.cite {
display: block;
margin-top: -1rem;
font-style: italic;
font-size: .85rem;
opacity: .8;
}
}
// Normal paragraph citations
& > p span.cite {
vertical-align: super;
line-height: 0;
font-size: .7rem;
font-style: italic;
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(small) {
blockquote,
.block {
padding: 1.35rem 1.25rem .1rem 1.25rem;
margin: .5rem 0 1rem;
}
}
@import "blocks/note",
"blocks/tip",
"blocks/important",
"blocks/warning",
"blocks/caution";