bavbavhaus.net/public_html/css/style.css

246 lines
3.0 KiB
CSS
Raw Normal View History

2024-01-14 23:03:14 +01:00
/* variables */
2024-01-12 15:08:12 +01:00
:root {
2024-05-16 23:09:03 +02:00
--font-size: 12pt;
--line-height: 1.25;
2024-01-14 23:03:14 +01:00
--font-family: monospace;
/* font-derived column width */
2024-05-04 23:56:29 +02:00
--col-w: clamp(33.333vw, 80ch, 80vw);
2024-01-14 23:03:14 +01:00
/* colors */
2024-03-19 02:08:26 +01:00
--fg-c: #000000;
--bg-c: #e2e2e2;
2024-03-18 21:08:22 +01:00
--link-c: #856cff;
--visited-c: #ff1170;
--active-c: #fa3500;
2024-01-14 23:03:14 +01:00
}
@media (prefers-color-scheme: dark) {
:root {
2024-03-19 02:08:26 +01:00
--fg-c: #e2e2e2;
2024-01-14 23:03:14 +01:00
--bg-c: #000000;
}
2024-01-12 15:08:12 +01:00
}
/* reset */
2024-04-22 15:21:20 +02:00
2024-01-12 15:08:12 +01:00
* {
box-sizing: border-box;
2024-01-14 23:03:14 +01:00
margin: unset;
hyphens: auto;
2024-04-23 10:00:22 +02:00
scrollbar-width: thin;
scrollbar-color: var(--link-c) rgba(0,0,0,0);
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-03-18 21:08:22 +01:00
::selection {
color: var(--bg-c);
background-color: var(--fg-c);
2024-03-17 16:54:31 +01:00
}
2024-01-14 23:03:14 +01:00
/* root */
2024-04-22 15:21:20 +02:00
2024-01-14 23:03:14 +01:00
:root {
color: var(--fg-c);
background-color: var(--bg-c);
font: var(--font-size)/var(--line-height) var(--font-family);
}
2024-03-19 02:08:26 +01:00
body {
margin: 0;
}
2024-01-14 23:03:14 +01:00
/* content sectioning */
2024-04-22 15:21:20 +02:00
2024-01-14 23:03:14 +01:00
address {
font-style: unset;
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-01-12 15:08:12 +01:00
h1, h2, h3, h4, h5, h6 {
2024-04-22 23:45:06 +02:00
hyphens: none;
2024-01-14 23:03:14 +01:00
font-size: unset;
2024-03-19 02:08:26 +01:00
}
2024-04-22 23:45:06 +02:00
:is(h1, h2, h3, h4, h5, h6) * {
hyphens: none;
}
2024-04-23 10:00:22 +02:00
h1, h2 {
2024-01-14 23:03:14 +01:00
font-weight: bold;
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-04-23 10:00:22 +02:00
h3, h4, h5, h6 {
2024-04-22 15:21:20 +02:00
font-weight: unset;
2024-03-19 02:08:26 +01:00
font-style: italic;
}
2024-01-14 23:03:14 +01:00
/* text content */
2024-03-18 21:08:22 +01:00
:is(h1, h2, h3, h4, h5, h6) {
2024-04-23 10:00:22 +02:00
margin-block-start: 2rlh;
margin-block-end: 1rlh;
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-04-22 15:21:20 +02:00
:is(blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) +
:is(blockquote, div, dl, figure, hr, menu, ol, p, pre, table, ul) {
2024-04-23 10:00:22 +02:00
margin-block-start: 1rlh;
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-03-18 21:08:22 +01:00
blockquote {
2024-04-23 10:00:22 +02:00
margin-inline: 2ch;
2024-01-14 23:03:14 +01:00
}
2024-03-18 21:08:22 +01:00
dt {
font-style: italic;
2024-03-17 16:54:31 +01:00
}
2024-03-18 21:08:22 +01:00
dd {
2024-04-23 10:00:22 +02:00
padding-inline-start: 2ch;
2024-01-14 23:03:14 +01:00
}
2024-05-02 20:16:54 +02:00
figure {
margin-inline: 2ch;
}
2024-01-14 23:03:14 +01:00
ol, ul, menu {
2024-04-23 10:00:22 +02:00
padding-inline-start: 5ch;
2024-01-14 23:03:14 +01:00
}
:is(ol, ul, menu) :is(ol, ul, menu) {
margin-block: unset;
}
2024-03-18 21:08:22 +01:00
li :is(blockquote, div, dl, figure, hr, menu, ol, p, pre, ul) {
margin-block: unset;
}
2024-01-14 23:03:14 +01:00
ul>li::marker {
content: "- ";
}
2024-01-12 15:08:12 +01:00
hr {
2024-01-14 23:03:14 +01:00
color: unset;
border: unset;
text-align: center;
2024-01-12 15:08:12 +01:00
}
2024-01-14 23:03:14 +01:00
2024-04-12 23:18:20 +02:00
hr::after {
2024-01-14 23:03:14 +01:00
content: "---";
2024-01-12 15:08:12 +01:00
}
2024-03-18 21:08:22 +01:00
pre {
2024-04-23 10:00:22 +02:00
margin-inline: 2ch;
2024-03-18 21:08:22 +01:00
color: var(--link-c);
overflow-y: scroll;
2024-01-14 23:03:14 +01:00
}
2024-01-12 15:08:12 +01:00
2024-01-14 23:03:14 +01:00
/* inline text semantics */
2024-04-22 15:21:20 +02:00
2024-01-14 23:03:14 +01:00
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);
}
2024-03-19 02:08:26 +01:00
code {
color: var(--link-c);
}
2024-05-16 23:09:03 +02:00
sup {
line-height: 0;
}
2024-04-22 15:21:20 +02:00
2024-05-02 20:16:54 +02:00
/* image and multimedia */
img {
max-width: 100%;
}
2024-04-22 15:21:20 +02:00
/* table content */
table {
table-layout: fixed;
border-collapse: collapse;
}
th, td {
padding-inline: 1ch;
}
th {
border-bottom: thin solid;
vertical-align: bottom;
hyphens: none;
}
td {
vertical-align: top;
}
2024-01-14 23:03:14 +01:00
/* layout */
2024-04-22 15:21:20 +02:00
2024-05-02 20:16:54 +02:00
main {
2024-05-04 18:55:46 +02:00
height: 100vh;
2024-05-04 19:25:18 +02:00
display: grid;
2024-05-04 18:55:46 +02:00
grid-auto-flow: column;
grid-auto-columns: var(--col-w);
2024-05-04 19:25:18 +02:00
overflow-x: scroll;
2024-01-12 15:08:12 +01:00
}
2024-03-17 16:54:31 +01:00
2024-05-04 19:25:18 +02:00
main>* {
2024-05-04 18:55:46 +02:00
padding: 1rlh 1ch;
2024-05-04 19:25:18 +02:00
overflow-y: scroll;
2024-05-04 18:55:46 +02:00
}
2024-05-04 19:25:18 +02:00
/* article.post */
2024-05-02 20:16:54 +02:00
article.post>header,
article.post>nav {
2024-04-23 10:00:22 +02:00
margin-block: 1rlh;
2024-03-18 21:08:22 +01:00
}
2024-05-04 23:26:10 +02:00
/* div.fauxnote */
div.fauxnote {
opacity: 0.667;
}
2024-05-02 20:16:54 +02:00
/* div.horizontal */
2024-03-19 02:08:26 +01:00
2024-03-17 16:54:31 +01:00
div.horizontal {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
2024-04-23 10:00:22 +02:00
gap: 1ch;
2024-03-17 16:54:31 +01:00
overflow-x: scroll;
}
2024-03-18 21:08:22 +01:00
div.horizontal>* {
margin-block: unset;
}
2024-05-02 20:16:54 +02:00
/* .display.math */
2024-03-19 02:08:26 +01:00
2024-03-18 21:08:22 +01:00
.display.math {
display: block;
text-align: center;
}