@import 'values';
@import 'code';
@mixin markdown-header($element, $font-size, $height: 48px, $margin-top: 24px, $margin-bottom: 12px, $border: false) {
#{$element} {
@include font-mono();
font-size: $font-size;
min-height: $height;
line-height: $height;
@if $border {
border-bottom: 1px solid $code-border-color;
}
margin-bottom: $margin-bottom;
}
* + #{$element} {
margin-top: $margin-top;
}
}
@mixin markdown() {
a {
color: hsl($hue, $saturation, 40%);
text-decoration: underline;
}
em {
text-style: italic;
}
strong {
font-weight: bold;
}
code {
@include font-mono();
display: inline;
background: $code-bg;
border: 1px solid $code-border-color;
border-radius: 2px;
padding: 0px 2px;
margin: 0 1px;
}
pre {
@include hljs();
margin: 24px 0;
white-space: pre-wrap;
word-wrap: break-word;
}
p + p {
margin-top: 8px;
}
blockquote p {
text-indent: 0;
}
h1, h2, h3, h4, h5, h6, pre {
code {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
text-transform: none;
}
}
table {
min-width: 50%;
border-spacing: 0;
border-collapse: collapse;
margin-top: 16px;
margin-bottom: 16px;
td, th {
padding: 4px 8px;
}
thead {
border-bottom: 2px solid $table-border-color;
}
th {
text-align: left;
font-weight: bold;
}
td + td {
border-left: 5px solid $code-bg;
}
tr:nth-child(even) {
background-color: lighten($code-bg, 3%);
}
}
@include markdown-header(h1, 24px, 64px, 48px, 16px, true);
@include markdown-header(h2, 21px, 48px, 38px, 14px, true);
@include markdown-header(h3, 18px, 36px, 22px, 12px, true);
@include markdown-header(h4, 16px, 32px, 16px, 10px);
h1, h2, h3 {
font-weight: bold;
}
ul, ol {
margin-left: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
}
@mixin markdown-small-headers() {
@include markdown-header(h1, 24px, 38px, 24px, 14px, true);
@include markdown-header(h2, 19px, 34px, 20px, 12px, true);
@include markdown-header(h3, 17px, 28px, 18px, 10px, true);
@include markdown-header(h4, 14px, 22px, 16px, 8px);
h1, h2, h3, h4 {
color: hsl($hue, $saturation, 40%);
}
h1, h2 {
}
}
@mixin markdown-padding($left, $right) {
p, pre, h1, h2, h3, h4, h5, h6 {
padding-left: $left;
padding-right: $right;
}
ul, ol {
padding-left: $left;
padding-right: $right;
}
pre {
margin-left: $left;
border-left: 4px solid $code-border-color;
}
blockquote {
margin-top: 24px;
margin-bottom: 24px;
padding-left: $left;
padding-right: $right;
background-color: $code-border-color;
p {
padding: 12px;
font-style: italic;
}
}
pre {
padding-left: 16px;
}
table {
margin-left: $left;
}
}
@mixin markdown-code() {
p code {
background-color: $code-border-color;
font-weight: bold;
color: rgba(black, 0.8);
}
}