163 lines
2.8 KiB
SCSS
163 lines
2.8 KiB
SCSS
$tldr-border: 1px solid #333;
|
||
$tldr-color: #e8e8d1;
|
||
$tldr-label-color: #fff696;
|
||
$table-bg: lighten($color-bg, 2%);
|
||
$table-bg-alt: lighten($table-bg, 2%);
|
||
$table-border-color: $color-very-light-border;
|
||
$toc-border: 1px solid #333;
|
||
$toc-color: #d1e3e8;
|
||
$toc-label-color: #96ccff;
|
||
$update-label-color: #96ccff;
|
||
$update-border: 1px solid #333;
|
||
$caption-color: #bfb1bf;
|
||
$bold-color: #e7aeff;
|
||
$h2-color: #fffdca;
|
||
$h3-color: #d1c5f8;
|
||
|
||
.meta {
|
||
font-family: $iosevka;
|
||
font-size: $text-small;
|
||
}
|
||
|
||
.tldr,
|
||
.toc,
|
||
.update {
|
||
border: $tldr-border;
|
||
padding: 5pt 10pt;
|
||
margin-top: 14pt;
|
||
padding-top: 11pt;
|
||
font-family: $iosevka;
|
||
position: relative;
|
||
font-size: 11pt;
|
||
line-height: 1.6;
|
||
|
||
@media (max-width: $screen-width) {
|
||
border-left: 0;
|
||
border-right: 0;
|
||
}
|
||
|
||
&:before {
|
||
font-weight: bold;
|
||
position: absolute;
|
||
font-size: 8pt;
|
||
left: 4pt;
|
||
top: -8pt;
|
||
background-color: $color-bg;
|
||
padding: 1pt 5pt;
|
||
}
|
||
p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.tldr {
|
||
color: $tldr-color;
|
||
|
||
&:before {
|
||
color: $tldr-label-color;
|
||
content: "TL;DR";
|
||
}
|
||
}
|
||
|
||
.content {
|
||
h2 {
|
||
color: $h2-color;
|
||
}
|
||
h3 {
|
||
color: $h3-color;
|
||
}
|
||
h4 {
|
||
font-size: 14pt;
|
||
}
|
||
strong {
|
||
color: $bold-color;
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
background-color: $table-bg;
|
||
td,
|
||
th {
|
||
padding: 5pt 10pt;
|
||
border: 1px solid $table-border-color;
|
||
font-size: 11pt;
|
||
line-height: 1.5;
|
||
}
|
||
tr:nth-child(even) {
|
||
background-color: $table-bg-alt;
|
||
}
|
||
th {
|
||
font-family: $iosevka;
|
||
}
|
||
}
|
||
figure {
|
||
text-align: center;
|
||
margin: 0;
|
||
padding-top: 1rem;
|
||
}
|
||
figure a,
|
||
figure a:visited,
|
||
figure a:hover {
|
||
background: none;
|
||
}
|
||
figure img {
|
||
max-width: 100%;
|
||
}
|
||
figcaption p {
|
||
text-align: center;
|
||
font-style: italic;
|
||
padding-left: 5pt;
|
||
color: $caption-color;
|
||
margin-top: 0;
|
||
}
|
||
video {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
.toc {
|
||
--link-color: #f591e6;
|
||
&:before {
|
||
color: $toc-label-color;
|
||
content: "Table of contents";
|
||
border: $toc-border;
|
||
background-color: $color-bg;
|
||
}
|
||
ul {
|
||
margin: 0;
|
||
padding-left: 0;
|
||
list-style-type: none;
|
||
}
|
||
ul li::before {
|
||
content: "├─ ";
|
||
font-family: "Courier", monospace;
|
||
}
|
||
ul li:last-child::before {
|
||
content: "└─ ";
|
||
}
|
||
ul li ul li::before {
|
||
content: "│ ├─ ";
|
||
}
|
||
ul li ul li:last-child::before {
|
||
content: "│ └─ ";
|
||
}
|
||
ul li ul li a {
|
||
--link-color: #a991f5;
|
||
}
|
||
ul li:last-child ul li::before {
|
||
content: " ├─ ";
|
||
}
|
||
ul li:last-child ul li:last-child::before {
|
||
content: " └─ ";
|
||
}
|
||
}
|
||
|
||
.update {
|
||
&:before {
|
||
color: $update-label-color;
|
||
content: "Update " attr(data-title);
|
||
border: $update-border;
|
||
}
|
||
}
|