* {
margin: 0;
padding: 0;
}
html {
--text: #eee;
--dark-text: #999;
--dkfg: #555555;
--libg: #131313;
--bg: #090909;
--yellow: #dfa020;
--border-style: 0.2em solid var(--dkfg);
font-family: monospace;
line-height: 1.5;
color: var(--text);
background-color: var(--bg);
color-scheme: dark;
box-sizing: border-box;
}
body {
/* Work around for egregiously tiny default monospace font sizes.
* `font-family: monospace monospace` works, but overrides user settings.
* This works, although it breaks rem unit semantics by not being in .
* It can't go there, however, since "100%" has different meaning there. */
font-size: max(16px, 100%);
max-width: 120ch;
margin: 0 auto;
padding: 0ch 2ch;
background-color: var(--libg);
/* Ensure the body takes up at least 1 screenful.
* While this allegedly interacts weirdly on mobile with keyboard open,
* using e.g. flexbox is even more broken. We take what we can get. */
min-height: 100vh;
}
section, article p, #homepage-main p, #footnotes ol {
margin: 1em 0em;
}
article ul, .article-list details ul {
margin-left: 2ch;
list-style-type: "— ";
}
/* you think you're so damn special? fuck you! */
summary::marker {
font: inherit;
}
ol {
padding-left: 3ch;
}
nav ul, header ul {
list-style-type: none;
}
.article-list details li {
margin-left: 2ch;
}
a:hover, a:focus, #footer-nav ul a:link {
text-decoration: underline;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* image styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
figcaption {
text-align: center;
color: var(--dark-text);
}
figure {
overflow: auto;
margin: 1em auto;
flex-basis: 15em;
flex-grow: 1;
}
img {
margin: 1em auto;
display: block;
}
.image-grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 2em;
margin: 2em 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* table styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table {
border-collapse: collapse;
margin: 0 auto;
}
td, th {
border: var(--border-style);
padding: 0.2em 0.75ch;
}
tbody th {
text-align: left;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* article body styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
h1, h2, h3, h4 {
line-height: 1.25;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 1.17em;
}
#article-main section:first-of-type {
counter-reset: section;
}
#article-main section {
counter-increment: section;
}
#article-main section > :first-child::before {
content: counters(section, ".") ". ";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* article header styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* applies to every topic `` but the first */
.article-metadata li ~ li:before, .archive-metadata li ~ li:before {
content: ", ";
}
.article-metadata li, .article-metadata ul, .archive-metadata li{
display: inline;
margin: 0;
}
.article-metadata, .toc {
margin: 1em 0em;
}
.toc ol {
counter-reset: item;
}
.toc li:before {
content: counters(item, ".") ". ";
}
.toc li {
counter-increment: item;
list-style-type: none;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* index body styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#index-main li {
list-style-type: none;
}
/* applies to every topic `` but the first */
.index-listing li ~ li:before {
content: ", ";
}
#index-main .index-listing {
margin-left: 4ch;
list-style-type: "- ";
}
.index-listing > * {
flex-grow: 1;
}
.index-listing > *:last-child {
text-align: right;
max-width: fit-content;
}
.index-listing ul {
display: none;
}
.index-listing > * {
display: inline;
}
.index-listing > *:last-child:before {
content: ", on ";
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* site header styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#site-header {
grid-area: header;
padding: 1em 0em;
margin-bottom: 1em;
border-bottom: var(--border-style);
line-height: 1;
display: flex;
flex-flow: row wrap;
gap: 1.5ch 5em;
}
#site-header ul {
display: flex;
gap: 1.5em;
}
#site-header li {
line-height: 1;
text-align: center;
flex-grow: 1;
}
#site-title {
font-size: 125%;
font-weight: bold;
flex-grow: 1;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* footer nav styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#footer-nav {
border-top: var(--border-style);
font-size: 125%;
padding: 0.75em 0em;
}
#footer-nav ul {
display: flex;
gap: 1.5em;
}
#footer-nav li {
line-height: 1;
text-align: center;
flex-grow: 1;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* sidebar nav styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#article-main + .article-list {
display: none;
}
.article-list {
min-width: 25ch;
flex-basis: 0;
flex-grow: 1;
position: sticky;
top: 1em;
}
.article-list section > span {
font-weight: bold;
}
.article-list > section {
margin-top: 0;
margin-bottom: 2em;
}
.article-list .article-metadata {
margin-top: 0.25em;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* responsive ui styles *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* enable "full" mode, including the sidebar */
@media only screen and (min-width: 120ch) {
.body-with-sidebar {
display: grid;
grid-template-rows: max-content;
grid-template-columns: minmax(30ch, max-content);
grid-template-areas:
"header header"
"main sidebar "
"main .";
}
body {
padding: 0ch 4ch;
border-left: var(--border-style);
border-right: var(--border-style);
}
main {
flex-grow: 2.75;
flex-basis: 0;
}
#article-main, #homepage-main {
grid-area: main;
border-right: var(--border-style);
padding-right: 4ch;
max-width: 80ch;
}
#homepage-main {
max-width: 65ch;
}
.article-list {
grid-area: sidebar;
margin-left: 4ch;
}
#article-main + .article-list {
display: block;
}
}
/* index page snaps into responsive view at a different time */
@media only screen and (min-width: 100ch) {
.index-listing {
display: flex;
list-style-type: none;
}
.index-listing ul {
display: flex;
}
.index-listing > *:last-child:before {
content: "";
}
}
/* father, i cannot click the book */
@media print {
#site-header li, #footer-nav {
display: none;
}
a:link, a:visited {
color: inherit;
text-decoration: inherit;
}
}
@media screen {
.modlink, .modlink:visited, .modlink:active {
color: var(--yellow);
text-decoration: none;
}
}