469 lines
6.6 KiB
CSS
469 lines
6.6 KiB
CSS
/*
|
|
* css styling for bavbavhaus.net
|
|
*
|
|
* A dark mono-sized monofont, two-column layout stylesheet with "compact"
|
|
* markdown formatting of html generated by `pandoc`.
|
|
*
|
|
*/
|
|
|
|
/* variables */
|
|
|
|
:root {
|
|
--font-size: 9pt;
|
|
--line-height: 1.25;
|
|
--font-family: monospace;
|
|
|
|
/* 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;
|
|
--md-formatting-color: var(--blue);
|
|
--error-color: var(--red);
|
|
}
|
|
|
|
/* wider screens */
|
|
@media (min-width: 120ch) {
|
|
:root {
|
|
--font-size: 12pt;
|
|
}
|
|
}
|
|
|
|
/* reset */
|
|
|
|
:root {
|
|
box-sizing: border-box;
|
|
text-size-adjust: none;
|
|
-moz-text-size-adjust: none;
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
/* root, * */
|
|
|
|
:root {
|
|
color: var(--white);
|
|
background-color: var(--black);
|
|
font: var(--font-size)/var(--line-height) var(--font-family);
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
font: inherit;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
::selection {
|
|
color: var(--black);
|
|
background-color: var(--white);
|
|
}
|
|
|
|
/* blocks */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
text-wrap: balance;
|
|
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(--md-formatting-color);
|
|
}
|
|
|
|
article :is(h2, h3, h4, h5, h6) {
|
|
margin-top: 2rlh;
|
|
}
|
|
|
|
article :is(blockquote, dl, div, figure, hr, menu, ol, p, pre, ul) {
|
|
margin-top: 1rlh;
|
|
}
|
|
|
|
article :is(blockquote, div)>:is(blockquote, div, figure, hr, menu, ol, p, pre, ul):first-child {
|
|
margin-top: unset;
|
|
}
|
|
|
|
blockquote,
|
|
figcaption,
|
|
dd {
|
|
position: relative;
|
|
margin-left: 1ch;
|
|
}
|
|
|
|
blockquote::before,
|
|
figcaption::before,
|
|
dd::before {
|
|
position: absolute;
|
|
left: -1ch;
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
blockquote::before {
|
|
content: ">";
|
|
}
|
|
|
|
figcaption::before {
|
|
content: "!";
|
|
}
|
|
|
|
dd::before {
|
|
content: ":";
|
|
}
|
|
|
|
dt {
|
|
font-style: italic;
|
|
}
|
|
|
|
figure {
|
|
display: grid;
|
|
grid-template-rows: round(down, calc(min(160ch, 100vw)/2), 1rlh) auto;
|
|
}
|
|
|
|
figure img {
|
|
place-self: center;
|
|
}
|
|
|
|
hr {
|
|
color: unset;
|
|
border: unset;
|
|
}
|
|
|
|
hr::after {
|
|
content: "***";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
:is(ol, ul, menu, dd, li) :is(blockquote, div, figure, hr, menu, ol, p, pre, ul) {
|
|
margin-top: unset;
|
|
}
|
|
|
|
ul, menu {
|
|
padding-left: 1ch;
|
|
}
|
|
|
|
ol {
|
|
padding-left: 2ch;
|
|
}
|
|
|
|
ol:has(li:nth-child(10)) {
|
|
padding-left: 3ch;
|
|
}
|
|
|
|
ol:has(li:nth-child(100)) {
|
|
padding-left: 4ch;
|
|
}
|
|
|
|
li::marker {
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
ol>li::marker {
|
|
content: counter(list-item) ".";
|
|
}
|
|
|
|
ul>li::marker {
|
|
content: "-";
|
|
}
|
|
|
|
li p + p {
|
|
text-indent: 2ch;
|
|
}
|
|
|
|
p {
|
|
hyphens: auto;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
pre::before,
|
|
pre::after {
|
|
display: block;
|
|
content: "```";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
|
|
img, svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.math.diplay {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.math.display::before,
|
|
.math.display::after {
|
|
content: "$$";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
|
|
/* inlines */
|
|
|
|
a {
|
|
color: inherit;
|
|
cursor: pointer;
|
|
text-decoration: underline solid;
|
|
text-decoration-color: var(--md-formatting-color);
|
|
}
|
|
|
|
a:active {
|
|
color: var(--red);
|
|
text-decoration-color: var(--red);
|
|
}
|
|
|
|
a:visited {
|
|
text-decoration-color: var(--magenta);
|
|
}
|
|
|
|
a:visited:active {
|
|
text-decoration-color: var(--red);
|
|
}
|
|
|
|
code {
|
|
font-family: monospace;
|
|
}
|
|
|
|
:not(pre)>code::before,
|
|
:not(pre)>code::after {
|
|
content: "`";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
mark {
|
|
color: var(--orange);
|
|
background: unset;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
sup, sub {
|
|
font-size: unset;
|
|
vertical-align: unset;
|
|
line-height: 0;
|
|
}
|
|
|
|
sup::before,
|
|
sup::after {
|
|
content: "^";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
sub::before,
|
|
sub::after {
|
|
content: "~";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
u {
|
|
text-decoration: underline wavy var(--red) 1pt;
|
|
}
|
|
|
|
del, ins {
|
|
text-decoration: unset;
|
|
}
|
|
|
|
del { color: var(--red); }
|
|
del::before { content: "[-"; }
|
|
del::after { content: "-]"; }
|
|
|
|
ins { color: var(--green); }
|
|
ins::before { content: "{+"; }
|
|
ins::after { content: "+}"; }
|
|
|
|
.math.inline::before,
|
|
.math.inline::after {
|
|
content: "$";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
.smallcaps {
|
|
font-variant: small-caps;
|
|
}
|
|
|
|
|
|
/* tables */
|
|
|
|
table {
|
|
display: block;
|
|
margin-top: 1rlh;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-spacing: 0;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
thead {
|
|
font-weight: bold;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
th, td {
|
|
padding-left: 1ch;
|
|
padding-right: 1ch;
|
|
}
|
|
|
|
th {
|
|
vertical-align: bottom;
|
|
border-bottom: 1pt solid white;
|
|
}
|
|
|
|
td {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
table caption {
|
|
text-align: unset;
|
|
}
|
|
|
|
table caption::before {
|
|
content: "!";
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
|
|
/* layout */
|
|
|
|
body {
|
|
width: round(down, min(160ch, 100vw), 2ch);
|
|
height: round(down, 100vh, 1rlh);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-top: 1rlh;
|
|
padding-bottom: 1rlh;
|
|
}
|
|
|
|
main {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
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: end;
|
|
}
|
|
|
|
main>article#verso,
|
|
main>article#recto>article.post {
|
|
height: 100%;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
overflow: hidden;
|
|
}
|
|
|
|
main>article#verso>div.content,
|
|
main>article#recto>article.post>div.content {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* footnotes */
|
|
|
|
a.footnote-ref sup::before {
|
|
content: "[^";
|
|
}
|
|
|
|
a.footnote-ref sup::after {
|
|
content: "]";
|
|
}
|
|
|
|
a.footnote-ref:active sup::before,
|
|
a.footnote-ref:active sup::after {
|
|
color: var(--red);
|
|
}
|
|
|
|
#footnotes>ol {
|
|
list-style-position: inside;
|
|
padding-left: unset;
|
|
}
|
|
|
|
#footnotes>ol>li>*:first-child {
|
|
display: inline;
|
|
}
|
|
|
|
#footnotes>ol>li::marker {
|
|
content: "[^" counter(list-item) "]:";
|
|
}
|
|
|
|
#footnotes a.footnote-back {
|
|
color: var(--md-formatting-color);
|
|
}
|
|
|
|
#footnotes a.footnote-back:active {
|
|
color: var(--red);
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
/* */
|
|
|
|
.warn {
|
|
text-decoration: underline wavy var(--orange) 1pt;
|
|
}
|
|
|
|
.error {
|
|
text-decoration: underline wavy var(--red) 1pt;
|
|
}
|
|
|