@import 'values';
@mixin comment() {
> .comment {
background: $comment-bg;
line-height: 160%;
> .text {
@include markdown();
@include markdown-small-headers();
}
}
}
@mixin comment-width() {
width: $comment-width;
min-width: 24em;
max-width: 64em;
}
@mixin code() {
> .code {
> pre {
white-space: pre-wrap;
word-wrap: break-all;
word-break: break-all;
font-size: $code-font-size;
@include font-mono();
@include hljs();
line-height: 135%;
}
}
&.markdown > .code > .markdown {
@include markdown();
@include markdown-code();
@include font-body();
line-height: 150%;
}
}
@mixin comment-padding($vert, $left, $right) {
> .comment > .text {
padding: $vert $right $vert $left;
}
&.footer > .comment > .content {
padding-left: $left;
padding-right: $right;
}
@include header-comment-padding($section-two-column-padding, $left, $right);
}
@mixin comment-padding-bottom($padding) {
> .comment {
padding-bottom: $padding;
}
}
@mixin comment-padding-top($padding) {
> .comment {
padding-top: $padding;
}
}
@mixin code-padding($vert, $left, $right) {
> .code > pre,
&.footer > .code > .content {
padding: $vert $right $vert $left;
}
&.markdown > .code > .markdown {
@include markdown-padding($left, $right);
}
}
@mixin code-padding-bottom($padding) {
> .code {
padding-bottom: $padding;
}
}
@mixin code-padding-top($padding) {
> .code {
padding-top: $padding;
}
}
@mixin section() {
@include comment();
@include code();
}
@mixin comment-single-column() {
> .comment {
width: 100%;
min-height: none;
&.empty {
display: none;
}
}
@include comment-padding($section-single-column-padding-v, $section-single-column-padding-h, $section-single-column-padding-h);
@include narrow() {
@include comment-padding($section-narrow-v, $section-narrow-h, $section-narrow-h);
}
}
@mixin code-single-column() {
> .code {
border-bottom: 1px solid $code-border-color;
border-top: 1px solid $code-border-color;
&.empty {
display: none !important;
}
}
@include code-padding($section-single-column-padding-v, $section-single-column-padding-h, $section-single-column-padding-h);
@include narrow() {
@include code-padding($section-narrow-v, $section-narrow-h, $section-narrow-h);
}
&.footer > .code {
border-top: 1px solid $code-border-color;
}
}
@mixin section-single-column() {
@include comment-single-column();
@include code-single-column();
}
@mixin comment-two-column($comment-width) {
> .comment {
@include comment-width();
border-right: 1px solid $code-border-color;
}
@include comment-padding($section-two-column-padding, $section-two-column-inner, $section-two-column-inner);
&.footer > .comment {
border-top: 1px solid $comment-border-color;
}
}
@mixin code-two-column() {
> .code {
flex: 1;
}
@include code-padding($section-two-column-padding, $section-two-column-inner, $section-two-column-outer);
&.footer > .code {
border-top: 1px solid $code-border-color;
}
}
@mixin section-two-column($comment-width) {
display: flex;
@include comment-two-column($comment-width);
@include code-two-column();
}
@mixin section-first() {
$padding: 128px;
@include comment-padding-bottom($padding);
@include code-padding-bottom($padding);
}
@mixin section-last() {
flex: 1;
$padding: 64px;
@include two-column() {
@include comment-padding-bottom($padding);
@include code-padding-bottom($padding);
}
}
@mixin sections() {
display: flex;
flex-direction: column;
.section {
@include section();
&:first-child {
@include section-first();
}
&:nth-last-child(2) {
@include section-last();
}
}
@include header();
@include single-column() {
@include header-single-column();
.section {
@include section-single-column();
}
}
@include two-column() {
@include header-two-column();
.section {
@include section-two-column($comment-width);
}
}
@include footer();
}