bavbavhaus.net/css/style.css

215 lines
3.7 KiB
CSS

/* variables */
:root {
--font-size: 12pt;
--line-height: 1.625;
--font-family: monospace;
/* font-derived vertical and horizontal units */
--v-un: calc(var(--font-size) * var(--line-height));
--h-un: 1ch;
/* gaps and paddings */
--body-padding-h: var(--h-un);
--body-padding-v: var(--v-un);
--main-gap-h: calc(2 * var(--h-un));
--main-gap-v: 0;
/* font-derived column width */
--max-col-w: calc(100vw - (2 * var(--body-padding-h)) - var(--main-gap-h) - 1ch);
--col-w: clamp(32ch, 72ch, var(--max-col-w));
/* colors */
--fg-c: #000000;
--bg-c: #ffffff;
--link-c: hsl(240 100% 50%);
--visited-c: hsl(270 100% 50%);
--active-c: hsl(0 100% 50%);
}
@media (prefers-color-scheme: dark) {
:root {
--fg-c: #ffffff;
--bg-c: #000000;
--link-c: hsl(240 100% 75%);
--visited-c: hsl(270 100% 75%);
--active-c: hsl(0 100% 75%);
}
}
/* reset */
* {
box-sizing: border-box;
margin: unset;
hyphens: auto;
}
/* root */
:root {
color: var(--fg-c);
background-color: var(--bg-c);
font: var(--font-size)/var(--line-height) var(--font-family);
}
/* content sectioning */
address {
font-style: unset;
}
h1, h2, h3, h4, h5, h6 {
font-size: unset;
font-weight: bold;
}
article {
counter-reset: heading;
}
article h1:before {
content:
counter(heading)". ";
counter-increment: heading;
}
article h1 {
counter-reset: subheading;
}
article h2:before {
content:
counter(heading)"."
counter(subheading)". ";
counter-increment: subheading;
}
article h2 {
counter-reset: subsubheading;
}
article h3:before {
content:
counter(heading)"."
counter(subheading)"."
counter(subsubheading)". ";
counter-increment: subsubheading;
}
article h3 {
counter-reset: subsubsubheading;
}
article h4:before {
content:
counter(heading)"."
counter(subheading)"."
counter(subsubheading)"."
counter(subsubsubheading)". ";
counter-increment: subsubsubheading;
}
article h4 {
counter-reset: subsubsubsubheading;
}
article h5:before {
content:
counter(heading)"."
counter(subheading)"."
counter(subsubheading)"."
counter(subsubsubheading)"."
counter(subsubsubsubheading)". ";
counter-increment: subsubsubsubheading;
}
article h5 {
counter-reset: subsubsubsubsubheading;
}
article h6:before {
content:
counter(heading)"."
counter(subheading)"."
counter(subsubheading)"."
counter(subsubsubheading)"."
counter(subsubsubsubheading)"."
counter(subsubsubsubsubheading)". ";
counter-increment: subsubsubsubsubheading;
}
/* text content */
:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) +
:is(blockquote, dl, figure, hr, menu, ol, p, pre, ul) {
margin-block-start: var(--v-un);
}
blockquote {
margin-inline: calc(4 * var(--h-un));
}
ol, ul, menu {
padding-inline-start: calc(4 * var(--h-un));
}
:is(ol, ul, menu) :is(ol, ul, menu) {
margin-block: unset;
}
ul>li::marker {
content: "- ";
}
hr {
color: unset;
border: unset;
border-top: var(--fg-c) dotted 0.1pt;
}
/* inline text semantics */
a {
cursor: pointer;
text-decoration: underline;
}
a:link {
color: var(--link-c);
}
a:link:active {
color: var(--active-c);
}
a:visited {
color: var(--visited-c);
}
a:visited:active {
color: var(--active-c);
}
/* layout */
body {
width: 100vw;
height: 100vh;
padding: var(--body-padding-v) var(--body-padding-h);
}
body>main {
height: 100%;
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--col-w);
gap: var(--main-gap-v) var(--main-gap-h);
overflow-x: scroll;
}
body>main>article {
overflow-y: scroll;
}
body>main>article>header {
margin-block-end: var(--v-un);
}
body>main>article>footer {
margin-block-start: var(--v-un);
}