html {
max-width: 800px;
height: min(100%, 600px);
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
}
body {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.navbar {
padding: 0 .6em;
margin: .5em 0;
border-bottom: .2em solid #ccc;
color: #555;
display: flex;
flex-wrap: wrap;
}
.navbar a:link {
text-decoration: unset;
color: unset;
}
.navbar a:visited {
color: unset;
}
.navbar li {
display: inline;
padding: 0 .7em;
margin: 0 -.2em;
}
.navbar li.current {
background-color: #ccc;
color: #000;
}
.banner {
font-size: 1.5em;
font-weight: unset;
margin: 0;
}
#content {
flex-grow: 1;
}
#content > :first-child {
margin-top: 0;
}
#content > :last-child {
margin-bottom: 0;
}
hr {
/* Fixes <hr> collapsing to width 0 inside of a flex container */
margin-left: 0;
margin-right: 0;
align-self: stretch;
/* Same style as navbar */
border: 0;
border-bottom: .2em solid #ccc;
}
a.extlink {
white-space: nowrap;
}
a.extlink::after {
background-size: 0.5em 0.5em;
width: 0.5em;
height: 0.5em;
display: inline-block;
background-image: url('extlink.png');
content: "";
vertical-align: super;
}
.biglist {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1em;
padding: 0;
}
.biglist > li {
display: block;
}
.biglist > li > h2 {
float: left;
margin: 0;
font-size: unset;
}
.biglist > li > h2::after {
color: #555;
content: "—";
font-weight: initial;
margin: 0 .2em;
}
.biglist > li .description {
display: inline;
margin: 0;
}
.biglist > li .source {
float: right;
}
.biglist > li .source::before {
color: #555;
content: "—";
margin: 0 .2em;
}
.article {
text-align: justify;
hyphens: auto;
}
.pagesrc {
display: block;
text-align: right;
font-size: 0.75em;
}
table {
border-collapse: collapse;
}
th, td {
padding: 0;
border: 0 solid transparent;
background-clip: padding-box;
}
tr > td + td {
border-left-width: 1.5em;
}
tr + tr > td {
border-top-width: 0.2em;
}