You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

245 lines
4.2 KiB
CSS

@font-face {
font-family: "Fira mono";
src: url("../fonts/fira-mono/FiraMono-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Fira mono";
src: url("../fonts/fira-mono/FiraMono-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Fira mono";
src: url("../fonts/fira-mono/FiraMono-Bold.ttf") format("truetype");
font-weight: 600;
font-style: bold;
}
:root {
--line-height: 16pt;
--font-size: 11pt;
}
html, body {
font-family: "Fira mono";
font-size: var(--font-size);
line-height: var(--line-height);
}
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100vh;
box-sizing: border-box;
}
h1, h2 {
display: block;
letter-spacing: 0.25em;
font-weight: 500;
}
h1 {
margin-bottom: var(--line-height);
}
h2 {
letter-spacing: .05em;
text-decoration: underline;
cursor: pointer;
}
p {
max-width: 80ch;
margin-bottom: var(--line-height);
}
main {
grid-column: 1;
padding: var(--line-height) calc(3 * var(--line-height)) var(--line-height) var(--line-height);
overflow-y: auto;
}
main {
border-right: 1px solid black;
}
aside {
grid-column: 2;
overflow-y: auto;
}
summary {
padding: calc(.5 * var(--line-height)) 0;
list-style: none;
border: none;
outline: none;
}
.read-online-link {
letter-spacing: .1em;
}
dd.read-online-link {
margin-top: calc(var(--line-height) * .425);
}
dd.read-online-link a {
text-decoration-style: solid;
}
details > summary::-webkit-details-marker {
display: none;
}
details {
border-bottom: 1px solid black;
padding: calc(.5 * var(--line-height)) calc(2.5 * var(--line-height)) calc(.5 * var(--line-height)) var(--line-height);
}
details[open] {
padding-bottom: calc(2.5 * var(--line-height));
}
details[open] > summary {
margin-bottom: calc(var(--line-height) * .5);
}
details + details {
margin-top: -1px;
}
a {
color: currentColor;
}
a:hover {
text-decoration: none;
}
dl {
margin: var(--line-height) 0 0 0;
display: grid;
grid-template-columns: 15ch 1fr;
max-width: 80ch;
font-size: 85%;
}
dl a {
text-decoration-style: dotted;
}
summary dl {
margin-top: calc(var(--line-height) * .425);
}
strong {
font-weight: 500;
}
@media screen and (min-width: 601px) {
summary::after {
content: "Show details ↓";
font-size: 85%;
margin-top: calc(var(--line-height) * .425);
display: block;
cursor: pointer;
margin-left: 15ch;
}
[open] > summary::after {
content: "Hide details ↑";
}
}
@media screen and (max-width: 600px) {
body {
display: block;
padding: var(--line-height) calc(2 * var(--line-height)) var(--line-height) var(--line-height);
height: initial;
box-sizing: border-box;
}
main, aside {
padding: 0;
height: initial;
overflow-y: initial;
}
main {
border-right: none;
}
dl {
display: initial;
}
dt {
margin-top: calc(var(--line-height) * .425);
}
dt::after {
content: ':';
}
dt:empty::after {
content: '';
}
details, details[open] {
padding-left: calc(1 * var(--line-height));
padding-right: calc(2 * var(--line-height));
padding-bottom: var(--line-height);
border-bottom: 0;
border-top: 1px solid black;
margin-left: calc(-1 * var(--line-height));
margin-right: calc(-2 * var(--line-height));
}
details {
max-height: 50vh;
position: relative;
overflow-y: hidden;
}
details[open] {
max-height: initial;
}
details:not([open]) summary::after {
display: block;
content: 'show details ↓';
position: absolute;
bottom: 0px;
left: 0;
right: 0;
height: calc(3.5 * var(--line-height));
z-index: 1;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1) calc(2 * var(--line-height)));
box-sizing: border-box;
font-size: 85%;
padding: calc(2 * var(--line-height)) 0 0 var(--line-height);
/* pointer-events: none; */
}
details[open]::after {
content: none;
}
[open] > summary::after {
content: "Hide details ↑";
font-size: 85%;
margin-top: calc(var(--line-height) * .85);
display: block;
cursor: pointer;
}
}
img {max-width: 100%;}