166 lines
2.2 KiB
SCSS
166 lines
2.2 KiB
SCSS
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
|
|
|
|
$font_size: 1.05rem;
|
|
|
|
$backdrop: #080808;
|
|
$background: #242424;
|
|
$text: #ffffff;
|
|
$links: #8AD7EE;
|
|
$footer: darken($text, 40%);
|
|
$meta: #FF5739;
|
|
$header: #ADF742;
|
|
|
|
html, body {
|
|
background-color: $backdrop;
|
|
color: $text;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: $font_size;
|
|
}
|
|
|
|
.container {
|
|
background-color: $background;
|
|
padding: 1rem 1.5rem;
|
|
margin: 1rem auto;
|
|
max-width: 900px;
|
|
}
|
|
|
|
a, a:hover {
|
|
color: $links;
|
|
}
|
|
|
|
nav a {
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-size: $font_size;
|
|
font-weight: normal;
|
|
color: $header;
|
|
margin: 0.67rem 0;
|
|
}
|
|
|
|
h1 {
|
|
|
|
padding-bottom: 0.67rem;
|
|
border-bottom: 2px dashed $header;
|
|
|
|
&::before {
|
|
content: "# ";
|
|
}
|
|
}
|
|
|
|
h2::before {
|
|
content: "## "
|
|
}
|
|
|
|
h3::before {
|
|
content: "### "
|
|
}
|
|
|
|
h4::before {
|
|
content: "#### "
|
|
}
|
|
|
|
h5::before {
|
|
content: "##### "
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
blockquote *::before {
|
|
content: "> ";
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
ol {
|
|
list-style-position: outside;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: "* ";
|
|
list-style-position: outside;
|
|
}
|
|
|
|
header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
footer {
|
|
color: $footer;
|
|
border-top: 2px dashed $footer;
|
|
margin-top: 1.5rem;
|
|
|
|
em {
|
|
background-color: $background;
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
small {
|
|
font-size: 100%;
|
|
color: $footer;
|
|
}
|
|
|
|
.meta {
|
|
color: $meta;
|
|
}
|
|
|
|
.reading-time {
|
|
float: right;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px dashed $footer;
|
|
}
|
|
|
|
code {
|
|
color: #ecba42;
|
|
}
|
|
|
|
code::before,
|
|
code::after {
|
|
content: "`";
|
|
}
|
|
|
|
pre > code::before,
|
|
pre > code::after {
|
|
content: "";
|
|
}
|
|
|
|
pre, code {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: $font_size;
|
|
}
|
|
|
|
pre > code {
|
|
overflow-wrap: normal;
|
|
white-space: pre;
|
|
color: $text;
|
|
background-color: $background !important;
|
|
}
|
|
|
|
pre {
|
|
background-color: $background !important;
|
|
margin-left: 2.5rem;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
pre::before {
|
|
display: block;
|
|
content: "```";
|
|
color: $footer;
|
|
}
|
|
pre::after {
|
|
display: block;
|
|
content: "```";
|
|
color: $footer;
|
|
} |