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.

335 lines
5.7 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: min-content 1fr;
height: 100vh;
box-sizing: border-box;
}
h1, h2 {
display: block;
letter-spacing: 0.25em;
font-weight: 500;
}
h1 {
margin-bottom: var(--line-height);
}
aside h2 {
padding: .5rem 1.5rem .5rem 1.5rem;
border-bottom: 1px solid black;
}
h3 {
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) calc(2 * var(--line-height));
overflow-y: auto;
}
main, nav {
border-right: 1px solid black;
}
nav {
grid-column: 1;
}
aside {
grid-column: 2;
grid-row: 1 / 3;
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;
}
img {
max-width: 75%;
display: block;
margin: var(--line-height) 0;
}
ul#nav {
display: flex;
flex-direction: row;
border-bottom: 1px solid black;
}
ul#nav li {
border-right: 1px solid black;
padding: .5em 1.5em;
flex: 1 0;
}
ul#nav li:last-child {
border-right: 0;
}
ul#nav li a {
text-decoration: none;
/* text-transform: uppercase; */
/* font-weight: 500; */
letter-spacing: .25px;
white-space: nowrap;
}
main li:before,
aside li:before {
content: '*';
float: left;
margin-right: 1em;
}
@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 ↑";
}
.research details {
position: relative;
}
.research summary::after {
content: "Show questions ↓";
position: absolute;
right: 1.5rem;
top: 1rem;
}
.research [open] > summary::after {
content: "Hide questions ↑";
}
}
@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;
}
.research details:not([open]) summary::after {
content: "Show questions ↓";
background: none;
}
.research [open] > summary::after {
content: "Hide questions ↑";
}
nav {
margin: calc(-1 * var(--line-height)) calc(-2 * var(--line-height)) var(--line-height) calc(-1 * var(--line-height));
overflow-x: hidden;
border-right: none;
}
ul#nav {
flex-wrap: wrap;
border-bottom: none;
margin-right: -1px;
}
ul#nav li {
border-bottom: 1px solid black;
}
aside h2 {
padding: .5em 0;
border-bottom: none;
}
}