Kevin Schoon 7 months ago
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
:root {
--accent: #b1675d;
--light-gray: #eee;
--dark-gray: #c2c2c2;
--white: #f8f9fa;
--black: #2d2d2d;
--border-width: 5px;
}
table {
text-align: justify;
width: 100%;
border-collapse: collapse;
margin-bottom: 2rem;
}
td, th {
padding: 0.5em;
border-bottom: 1px solid #4a4a4a;
}
html, body {
box-sizing: border-box;
font-size: 16px;
/*font-family: monospace;*/
height: 100%;
margin: 0;
padding: 0;
max-width: 800px;
}
section {
height: 100%;
}
.wrapper {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.page-body {
padding: 20px;
}
footer.page-footer {
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ol,
ul {
list-style: none;
}
p {
padding: 1px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}
pre {
background: #e2e2e2;
font-family: monospace;
}
img.me {
border-radius: 2em;
max-width: 350px;
}
@media (prefers-color-scheme: dark) {
:root {
background-color: #2c2c2c;
color: white;
}
pre {
color: white;
background: #3f3f3f;
}
a:link {
color: white;
text-decoration: underline;
}
a:visited {
color: white;
text-decoration: none;
}
.notice {
border-color: white;
}
}
@media (prefers-color-scheme: light) {
:root {
background-color: #f5f5f5;
color: black;
}
pre {
color: black;
background: #e2e2e2;
}
a:link {
color: black;
text-decoration: underline;
}
a:visited {
color: black;
text-decoration: none;
}
.notice {
border-color: black;
}
}
/*
Tree structure using CSS:
http://stackoverflow.com/questions/14922247/how-to-get-a-tree-in-html-using-pure-css
*/
.tree,
.tree ul {
font-size: 18px;
font: normal normal 14px/20px Helvetica, Arial, sans-serif;
list-style-type: none;
margin-left: 0 0 0 10px;
padding: 0;
position: relative;
overflow: hidden;
}
.tree li {
margin: 0;
padding: 0 12px;
position: relative;
}
.tree li::before,
.tree li::after {
content: "";
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
.tree li::before {
border-top: 2px solid #999;
top: 10px;
width: 10px;
height: 0;
}
/* vertical line on list items */
.tree li:after {
border-left: 2px solid #999;
height: 100%;
width: 0px;
top: -10px;
}
/* lower line on list items from the first level because they don't have parents */
.tree > li::after {
top: 10px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after {
display: none;
}