update `public_html` static files
parent
548be4b606
commit
1fb497d22f
|
|
@ -1,4 +1,13 @@
|
|||
/*
|
||||
* 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;
|
||||
|
|
@ -21,8 +30,11 @@
|
|||
--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;
|
||||
|
|
@ -31,20 +43,36 @@
|
|||
|
||||
/* reset */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: unset;
|
||||
hyphens: auto;
|
||||
overflow-wrap: anywhere;
|
||||
scrollbar-width: none;
|
||||
:root {
|
||||
box-sizing: border-box;
|
||||
text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
/* root */
|
||||
*,
|
||||
*::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 {
|
||||
|
|
@ -52,120 +80,104 @@
|
|||
background-color: var(--white);
|
||||
}
|
||||
|
||||
/* content sectioning */
|
||||
|
||||
address {
|
||||
font-style: unset;
|
||||
}
|
||||
/* blocks */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
hyphens: none;
|
||||
font-size: unset;
|
||||
text-wrap: balance;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1::before {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
h2::before {
|
||||
content: "##";
|
||||
}
|
||||
|
||||
h3::before {
|
||||
content: "###";
|
||||
}
|
||||
|
||||
h4::before {
|
||||
content: "####";
|
||||
}
|
||||
|
||||
h5::before {
|
||||
content: "#####";
|
||||
}
|
||||
|
||||
h6::before {
|
||||
content: "######";
|
||||
}
|
||||
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);
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) * {
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* text content */
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
article :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) {
|
||||
article :is(blockquote, dl, div, figure, hr, menu, ol, p, pre, ul) {
|
||||
margin-top: 1rlh;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
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;
|
||||
margin-left: 1ch;
|
||||
}
|
||||
|
||||
blockquote::before,
|
||||
figcaption::before,
|
||||
dd::before {
|
||||
position: absolute;
|
||||
left: -1ch;
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: ">";
|
||||
position: absolute;
|
||||
left: -1ch;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
figcaption::before {
|
||||
content: "!";
|
||||
}
|
||||
|
||||
dd::before {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
dt {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dd {
|
||||
position: relative;
|
||||
margin-left: 1ch;
|
||||
figure {
|
||||
display: grid;
|
||||
grid-template-rows: round(down, calc(min(160ch, 100vw)/2), 1rlh) auto;
|
||||
}
|
||||
|
||||
dd::before {
|
||||
content: ":";
|
||||
position: absolute;
|
||||
left: -1ch;
|
||||
color: var(--blue);
|
||||
figure img {
|
||||
place-self: center;
|
||||
}
|
||||
|
||||
dd :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
|
||||
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;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
position: relative;
|
||||
margin-left: 1ch;
|
||||
}
|
||||
|
||||
figcaption::before {
|
||||
content: "!";
|
||||
position: absolute;
|
||||
left: -1ch;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 2ch;
|
||||
}
|
||||
|
||||
ul, menu {
|
||||
ol, ul, menu {
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
:is(ol, ul, menu) :is(ol, ul, menu) {
|
||||
margin-top: unset;
|
||||
ol:has(li:nth-child(10)) {
|
||||
padding-left: 2ch;
|
||||
}
|
||||
|
||||
ol:has(li:nth-child(100)) {
|
||||
padding-left: 3ch;
|
||||
}
|
||||
|
||||
li::marker {
|
||||
color: var(--blue);
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
ol>li::marker {
|
||||
|
|
@ -176,45 +188,46 @@ ul>li::marker {
|
|||
content: "-";
|
||||
}
|
||||
|
||||
li :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
|
||||
margin-top: unset;
|
||||
li p + p {
|
||||
text-indent: 2ch;
|
||||
}
|
||||
|
||||
li p+p {
|
||||
text-indent: 1ch;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: unset;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
hr::after {
|
||||
content: "---";
|
||||
color: var(--blue);
|
||||
p {
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
pre::before,
|
||||
pre::after {
|
||||
display: block;
|
||||
content: "```";
|
||||
color: var(--blue);
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
/* inline text semantics */
|
||||
|
||||
img, svg {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.math.display::before,
|
||||
.math.display::after {
|
||||
content: "$$";
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
|
||||
/* inlines */
|
||||
|
||||
a {
|
||||
color: unset;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration-color: var(--blue);
|
||||
text-decoration: underline solid var(--blue) 1pt;
|
||||
}
|
||||
|
||||
a:active {
|
||||
|
|
@ -230,42 +243,98 @@ a:visited:active {
|
|||
text-decoration-color: var(--red);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
:not(pre)>code::before,
|
||||
:not(pre)>code::after {
|
||||
content: "`";
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
sup {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
/* image and multimedia */
|
||||
sub::before,
|
||||
sub::after {
|
||||
content: "~";
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
u {
|
||||
text-decoration: var(--red) wavy underline;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
/* table content */
|
||||
/* tables */
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
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-inline: 1ch;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
|
||||
th {
|
||||
hyphens: none;
|
||||
vertical-align: bottom;
|
||||
border-bottom: 1pt solid white;
|
||||
}
|
||||
|
||||
tr {
|
||||
line-height: calc(1rlh - 2px); /* @hack */
|
||||
td {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
|
@ -275,13 +344,14 @@ table caption {
|
|||
|
||||
table caption::before {
|
||||
content: "!";
|
||||
color: var(--blue);
|
||||
color: var(--md-formatting-color);
|
||||
}
|
||||
|
||||
|
||||
/* layout */
|
||||
|
||||
body {
|
||||
width: round(down, min(160ch, 100vw), 1ch);
|
||||
width: round(down, min(160ch, 100vw), 2ch);
|
||||
height: 100vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -311,13 +381,6 @@ main>article#recto>* {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* article.post */
|
||||
|
||||
article.post>header,
|
||||
article.post>nav {
|
||||
margin-top: 1rlh;
|
||||
margin-bottom: 1rlh;
|
||||
}
|
||||
|
||||
/* div.horizontal */
|
||||
|
||||
|
|
@ -334,7 +397,11 @@ div.horizontal>* {
|
|||
scroll-snap-align: end;
|
||||
}
|
||||
|
||||
/* .display.math */
|
||||
/* pandoc specific */
|
||||
|
||||
.smallcaps {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
|
||||
.display.math {
|
||||
display: block;
|
||||
|
|
@ -352,11 +419,6 @@ div.horizontal>* {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
a.footnote-ref>sup {
|
||||
font-size: unset;
|
||||
vertical-align: unset;
|
||||
}
|
||||
|
||||
a.footnote-back {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue