231 lines
3.3 KiB
CSS
231 lines
3.3 KiB
CSS
:root {
|
|
--background: #2d2d2d;
|
|
--foreground: #d3d0c8;
|
|
--decoration: #747369;
|
|
--link-underline: #cd98cd;
|
|
--link-fancy: #ffcd5d;
|
|
--background-alt: #353535;
|
|
--fontset: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
|
Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
background-color: #222222;
|
|
}
|
|
|
|
body {
|
|
margin: auto;
|
|
max-width: 80ch;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
font-family: var(--fontset);
|
|
color: var(--foreground);
|
|
background-color: var(--background);
|
|
padding: 1rem;
|
|
}
|
|
|
|
code {
|
|
background-color: #454545;
|
|
padding: 0 0.25ch;
|
|
padding-top: 0.5ch;
|
|
border: 1px solid var(--decoration);
|
|
}
|
|
|
|
strong {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1.site-title {
|
|
margin-top: 0;
|
|
font-size: 2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
h1.post-title {
|
|
padding-top: 0.5em;
|
|
}
|
|
|
|
h1:not(.site-title):not(.post-title) {
|
|
font-size: 1.25em;
|
|
text-decoration: underline;
|
|
/* border-bottom: 4px solid var(--foreground); */
|
|
/*border-top: 4px solid var(--foreground);*/
|
|
}
|
|
|
|
|
|
h2 {
|
|
/* border-bottom: 2px solid var(--foreground); */
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
h1:not(.site-title):not(.post-title)::before {
|
|
content: "# ";
|
|
color: var(--decoration);
|
|
}
|
|
|
|
h2::before {
|
|
content: "## ";
|
|
color: var(--decoration);
|
|
}
|
|
|
|
h3::before {
|
|
content: "### ";
|
|
color: var(--decoration);
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--link-underline);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
a:not(.internal)::after {
|
|
content: " " url("/link.svg");
|
|
}
|
|
|
|
a.show-url::after {
|
|
content: " [" attr(href) "]" url("/link.svg");
|
|
color: var(--link-fancy);
|
|
}
|
|
|
|
.site-title a {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.site-title a::after {
|
|
content: "";
|
|
}
|
|
|
|
nav {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
nav ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
|
|
nav a {
|
|
color: var(--link-fancy);
|
|
}
|
|
|
|
nav a.internal {
|
|
margin-right: 1ch;
|
|
}
|
|
|
|
div.table-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
div.table-wrapper table {
|
|
border-collapse: collapse;
|
|
border: 2px solid;
|
|
}
|
|
|
|
div.table-wrapper table,
|
|
th,
|
|
td {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
div.table-wrapper th {
|
|
border-bottom: 2px solid var(--foreground);
|
|
}
|
|
|
|
div.table-wrapper td {
|
|
border: 1px solid var(--foreground);
|
|
}
|
|
|
|
div.table-wrapper table tr td:first-child {
|
|
border-left: 0;
|
|
}
|
|
|
|
div.table-wrapper table tr td:last-child {
|
|
border-right: 0;
|
|
}
|
|
|
|
div.table-wrapper table tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
div.table-wrapper tr:nth-child(even) {
|
|
background-color: var(--background-alt);
|
|
}
|
|
|
|
#toc-toggle {
|
|
border: none;
|
|
font-family: var(--fontset);
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
background-color: var(--foreground);
|
|
color: var(--background);
|
|
padding: 0 0.5em;
|
|
margin: 0;
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#toc {
|
|
border: 1px solid var(--decoration);
|
|
}
|
|
|
|
#toc ol {
|
|
counter-reset: item;
|
|
list-style-type: none;
|
|
}
|
|
|
|
#toc li {
|
|
display: block;
|
|
color: var(--decoration);
|
|
}
|
|
|
|
#toc li:before {
|
|
content: counters(item, ".") " ";
|
|
counter-increment: item;
|
|
}
|
|
|
|
h1.post-title {
|
|
font-size: 1.5em;
|
|
border: none;
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
li p.post-date {
|
|
border-bottom: none;
|
|
}
|
|
|
|
p.post-date {
|
|
color: var(--decoration);
|
|
margin: 0;
|
|
border-bottom: 1px solid var(--decoration);
|
|
}
|
|
|
|
p.post-desc {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex * {
|
|
margin-left: 1em;
|
|
margin-right: 1em;
|
|
}
|
|
|