208 lines
2.9 KiB
SCSS
208 lines
2.9 KiB
SCSS
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap&subset=latin-ext');
|
|
@import "./nord.scss";
|
|
|
|
$font_size: 0.96rem;
|
|
$line-height: 1.5rem;
|
|
|
|
$backdrop: $nord6;
|
|
$background: $nord6;
|
|
$text: $nord10;
|
|
$links: $nord11;
|
|
$footer: $nord10;
|
|
$meta: $text;
|
|
$header: $nord10;
|
|
$highlight: $nord14;
|
|
|
|
html, body {
|
|
background-color: $backdrop;
|
|
color: $text;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: $font_size;
|
|
line-height: $line-height;
|
|
}
|
|
|
|
.important {
|
|
background-color: $highlight;
|
|
color: $background;
|
|
width: 100%;
|
|
display: block;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.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: bold;
|
|
color: $header;
|
|
margin: 0.67rem 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
|
|
&::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;
|
|
}
|
|
|
|
.privacy-notice {
|
|
border-top: 2px dashed $footer;
|
|
margin-top: 1.5rem;
|
|
|
|
.buymeacoffee {
|
|
background-color: #FF6C11;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
padding-left: 0.4rem;
|
|
padding-right: 0.4rem;
|
|
}
|
|
}
|
|
|
|
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;
|
|
font-weight: normal;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px dashed $footer;
|
|
}
|
|
|
|
code {
|
|
color: $nord14;
|
|
}
|
|
|
|
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: $line-height;
|
|
}
|
|
|
|
pre::before {
|
|
display: block;
|
|
content: "```";
|
|
color: $footer;
|
|
}
|
|
pre::after {
|
|
display: block;
|
|
content: "```";
|
|
color: $footer;
|
|
}
|
|
|
|
table td::before,
|
|
table th::before {
|
|
content: " | ";
|
|
color: $footer;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.flex-columns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-column {
|
|
&#popular_posts {
|
|
order: 1;
|
|
}
|
|
&#recent_posts {
|
|
order: 2;
|
|
}
|
|
} |