350 lines
4.6 KiB
CSS
350 lines
4.6 KiB
CSS
/* variables */
|
|
:root {
|
|
--font-size: 9pt;
|
|
--line-height: 1.25;
|
|
--font-family: monospace;
|
|
|
|
/* font-derived column width */
|
|
--col-w: clamp(40ch, 80ch, 50vw);
|
|
|
|
/* colors */
|
|
--black: #000000;
|
|
--red: #fa3500;
|
|
--green: #009843;
|
|
--orange: #d06600;
|
|
--blue: #856cff;
|
|
--magenta: #ff1170;
|
|
--cyan: #008cca;
|
|
--white: #e2e2e2;
|
|
--bright-black: #848484;
|
|
--bright-red: #ff888e;
|
|
--bright-green: #00c55b;
|
|
--bright-orange: #ff8d48;
|
|
--bright-blue: #ac9fff;
|
|
--bright-magenta: #ffb1c0;
|
|
--bright-cyan: #92ccff;
|
|
--bright-white: #ffffff;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
:root {
|
|
--font-size: 12pt;
|
|
}
|
|
}
|
|
|
|
/* reset */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: unset;
|
|
hyphens: auto;
|
|
overflow-wrap: anywhere;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--blue) rgba(0,0,0,0);
|
|
}
|
|
|
|
/* root */
|
|
|
|
:root {
|
|
color: var(--white);
|
|
background-color: var(--black);
|
|
font: var(--font-size)/var(--line-height) var(--font-family);
|
|
}
|
|
|
|
::selection {
|
|
color: var(--black);
|
|
background-color: var(--white);
|
|
}
|
|
|
|
/* content sectioning */
|
|
|
|
address {
|
|
font-style: unset;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
hyphens: none;
|
|
font-size: unset;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1::before {
|
|
content: "#";
|
|
}
|
|
|
|
h2::before {
|
|
content: "##";
|
|
}
|
|
|
|
h3::before {
|
|
content: "###";
|
|
}
|
|
|
|
h4::before {
|
|
content: "####";
|
|
}
|
|
|
|
h5::before {
|
|
content: "#####";
|
|
}
|
|
|
|
h6::before {
|
|
content: "######";
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6)::before {
|
|
color: var(--blue);
|
|
}
|
|
|
|
:is(h1, h2, h3, h4, h5, h6) * {
|
|
hyphens: none;
|
|
}
|
|
|
|
/* text content */
|
|
|
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
margin-top: 2rlh;
|
|
margin-bottom: 1rlh;
|
|
}
|
|
|
|
:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) +
|
|
:is(aside, blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) {
|
|
margin-top: 1rlh;
|
|
}
|
|
|
|
blockquote {
|
|
position: relative;
|
|
margin-left: 1ch;
|
|
}
|
|
|
|
blockquote::before {
|
|
content: ">";
|
|
position: absolute;
|
|
left: -1ch;
|
|
color: var(--blue);
|
|
}
|
|
|
|
dt {
|
|
font-style: italic;
|
|
}
|
|
|
|
dd {
|
|
position: relative;
|
|
margin-left: 1ch;
|
|
}
|
|
|
|
dd::before {
|
|
content: ":";
|
|
position: absolute;
|
|
left: -1ch;
|
|
color: var(--blue);
|
|
}
|
|
|
|
dd :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
|
|
margin-top: unset;
|
|
}
|
|
|
|
figcaption {
|
|
position: relative;
|
|
margin-left: 1ch;
|
|
}
|
|
|
|
figcaption::before {
|
|
content: "!";
|
|
position: absolute;
|
|
left: -1ch;
|
|
color: var(--blue);
|
|
}
|
|
|
|
ol {
|
|
padding-left: 2ch;
|
|
}
|
|
|
|
ul, menu {
|
|
padding-left: 1ch;
|
|
}
|
|
|
|
:is(ol, ul, menu) :is(ol, ul, menu) {
|
|
margin-top: unset;
|
|
}
|
|
|
|
li::marker {
|
|
color: var(--blue);
|
|
}
|
|
|
|
ol>li::marker {
|
|
content: counter(list-item);
|
|
}
|
|
|
|
ul>li::marker {
|
|
content: "-";
|
|
}
|
|
|
|
li :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
|
|
margin-top: unset;
|
|
}
|
|
|
|
hr {
|
|
color: unset;
|
|
border: unset;
|
|
text-align: center;
|
|
}
|
|
|
|
hr::after {
|
|
content: "---";
|
|
color: var(--blue);
|
|
}
|
|
|
|
pre {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
pre::before,
|
|
pre::after {
|
|
display: block;
|
|
content: "```";
|
|
color: var(--blue);
|
|
}
|
|
|
|
/* inline text semantics */
|
|
|
|
a {
|
|
color: unset;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:link {
|
|
text-decoration-color: var(--blue);
|
|
}
|
|
|
|
a:link:active {
|
|
text-decoration-color: var(--red);
|
|
}
|
|
|
|
a:visited {
|
|
text-decoration-color: var(--magenta);
|
|
}
|
|
|
|
a:visited:active {
|
|
text-decoration-color: var(--red);
|
|
}
|
|
|
|
:not(pre)>code::before,
|
|
:not(pre)>code::after {
|
|
content: "`";
|
|
color: var(--blue);
|
|
}
|
|
|
|
sup {
|
|
line-height: 0;
|
|
}
|
|
|
|
|
|
/* image and multimedia */
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* table content */
|
|
|
|
table {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
th, td {
|
|
padding-inline: 1ch;
|
|
}
|
|
|
|
th {
|
|
hyphens: none;
|
|
}
|
|
|
|
tr {
|
|
line-height: calc(1rlh - 2px); /* @hack */
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
table caption {
|
|
text-align: unset;
|
|
}
|
|
|
|
table caption::before {
|
|
content: "!";
|
|
color: var(--blue);
|
|
}
|
|
|
|
/* layout */
|
|
|
|
body {
|
|
width: clamp(var(--col-w), calc(2*var(--col-w)), 100vw);
|
|
height: 100vh;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
main {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
main>* {
|
|
height: 100%;
|
|
}
|
|
|
|
main>article#recto {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
overflow-x: scroll;
|
|
scroll-snap-type: inline proximity;
|
|
}
|
|
|
|
main>article#recto>* {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
/* article.post */
|
|
|
|
article.post {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
article.post>header,
|
|
article.post>nav,
|
|
article.post>footer {
|
|
margin: 1rlh 0;
|
|
}
|
|
|
|
/* div.horizontal */
|
|
|
|
div.horizontal {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 100%;
|
|
overflow-x: scroll;
|
|
scroll-snap-type: inline proximity;
|
|
}
|
|
|
|
div.horizontal>* {
|
|
margin-top: unset;
|
|
scroll-snap-align: end;
|
|
}
|
|
|
|
/* .display.math */
|
|
|
|
.display.math {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
a.footnote-ref>sup {
|
|
font-size: unset;
|
|
vertical-align: unset;
|
|
}
|