@import url("xcharter/xcharter.css");
@import url("xeb-garamond/xeb-garamond.css");
:root {
--font-family: 'XCharter', serif;
--font-feature-settings: "onum" 1, "cv01" 1;
--font-feature-lnum-settings: "onum" 0;
--font-family-heading: 'XEB Garamond', serif;
--font-feature-settings-heading: "onum" 0;
--font-family-monospace: 'DejaVu Sans Mono', 'Liberation Mono', 'Hack',
'Roboto Mono', monospace;
/* To make DejaVu Sans Mono's x-height match XCharter's (e.g. in
* inline . */
--font-size-monospace: 86%;
/* To make XEB Garamond's x-height match XCharter's. */
--font-size-heading: 109%;
/* The line height goes from 1.25rem to 1.4rem as the viewport width
* increases. This reaches its maximum at about 70ch width, which is
* the max for #content. */
--line-height: min(calc(1.25rem + 0.35vw), 1.4rem);
}
html {
counter-reset: subheading;
font-size: min(calc(0.95em + 0.2vw), 1.2em);
background-color: #888;
min-width: min-content;
}
@media (min-width: 40rem) {
html {
text-align: justify;
}
}
body {
font-family: var(--font-family);
font-feature-settings: var(--font-feature-settings);
margin: auto;
background-color: #fdfdfc;
color: #181818;
/* max-width: calc(70ch + 8*var(--line-height)); */
hyphens: auto;
hyphenate-limit-chars: 4 2 2;
min-height: 100vh;
line-height: var(--line-height);
}
/* Lining nums */
.lnum {
font-feature-settings: "onum" 0;
}
p {
margin: 0;
text-indent: 0;
}
p + p {
text-indent: var(--line-height);
}
/* This moves the Tags/Date line right below the H1 heading.*/
.post-data {
display: block;
margin-top: calc(-2*var(--line-height));
margin-bottom: var(--line-height);
/* text-indent: 0; */
font-size: 85%;
text-align: center;
}
div.br {
margin-top: var(--line-height);
}
h1 {
font-family: var(--font-family-heading);
font-feature-settings: var(--font-feature-settings-heading);
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.08em;
word-spacing: 0.08em;
line-height: calc(2*var(--line-height));
/* This makes the baselineskip 1.5 times the cap height. */
font-size: 1.67rem;
margin: calc(2*var(--line-height)) 0;
text-align: center;
}
h2:not(:only-of-type):before {
content: counter(subheading)" ";
counter-increment: subheading;
counter-reset: subsubheading;
}
h2 {
font-weight: normal;
font-variant: small-caps;
font-size: 1rem;
text-transform: lowercase;
letter-spacing: 0.08em;
word-spacing: 0.08em;
line-height: var(--line-height);
margin: var(--line-height) 0;
}
h3:before {
content: counter(subheading)"."counter(subsubheading)" ";
counter-increment: subsubheading;
}
h3 {
font-weight: normal;
font-size: 1rem;
font-style: italic;
line-height: var(--line-height);
margin: calc(0.5*var(--line-height)) 0;
}
h4, h5, h6 {
font-size: 1.0em;
line-height: var(--line-height);
font-weight: normal;
margin: calc(0.5*var(--line-height)) 0;
}
h1 a:link, h1 a:visited {
text-decoration: none;
color: #1a1a1a;
}
h1 a:hover {
text-decoration: none;
color: #233056;
/* Or when underlined, match horizontal stroke thickness. */
/* text-decoration-thickness: 0.035em; */
}
h2 a {
text-decoration: none;
color: #1a1a1a;
}
h3 a {
text-decoration: none;
color: #1a1a1a;
}
h4 a {
text-decoration: none;
color: #1a1a1a;
}
h5 a {
text-decoration: none;
color: #1a1a1a;
}
h6 a {
text-decoration: none;
color: #1a1a1a;
}
pre {
font-family: var(--font-family-monospace);
/* With DejaVu Sans Mono, 93% gets about 80 characters per line at
* full width (70ch). */
font-size: 93%;
line-height: 1.25em;
max-width: 87vw;
background-color: #F5F3ED;
padding: 0;
border: 0.1em solid #CCCCCC;
margin: 0;
overflow: auto;
}
code {
font-family: var(--font-family-monospace);
font-size: var(--font-size-monospace);
line-break: anywhere;
}
h2 code {
font-size: 75%;
font-variant: normal;
text-transform: none;
}
/* Only apply to direct children, don't mess with code e.g. in links. */
p > code {
color: #000;
/* Increase the font weight ever so slightly. */
/* text-shadow: 0.0em 0.0em 0.01em #AAA; */
}
hr {
height: 0.2em;
border: 0;
color: #CCCCCC;
background-color: #CCCCCC;
}
blockquote, table {
margin: var(--line-height) 0 0 0;
}
ul, ol, dl {
padding-left: var(--line-height);
margin: 0;
}
li {
margin: 0;
}
/* Link styling a'la Wikipedia, with hue changed from 220 to 225 to
* compensate for the off-white background. */
a:link, a:visited, a:focus {
color: #3359cc;
}
a:hover {
color: #304ea9;
}
a:active {
color: #233056;
}
a:link {
text-decoration: none;
}
a:focus, a:hover, a:active {
text-decoration: underline;
text-decoration-thickness: 0.06em;
/* About halfway down on descenders */
text-underline-offset: 0.07em;
}
a:focus {
border-radius: 0.1em 0.1em;
outline: 0.08em solid #304ea9;
outline-offset: 0.05em;
}
img {
display: block;
max-width: 90%;
margin: auto;
}
.reference-bullet {
}
.reference {
/* padding: 0.3em 0; */
/* background-color: #EEEEEE; */
}
.locative-type a {
text-decoration: none;
border-bottom: 0;
font-weight: bold;
}
.reference-object {
background-color: #EBE8E2;
padding: 0.1em;
border: solid 1px;
font-weight: bold;
}
.reference-object a {
border-bottom: none;
}
.locative-args {
font-style: italic;
}
.locative-args code {
font-family: sans-serif;
}
.navigation a {
color: #CCCCCC;
text-shadow: none;
border-bottom: none;
}
/* Navigation links: just hide the links in the previous line. Good
because there is no jumping around of content as with the other
otptions. */
.navigation {
display: block;
visibility: hidden;
margin-bottom: -1.5em;
}
.outer-navigation:hover .navigation {
visibility: visible;
}
/* Syntax highlighting with Colorize */
.symbol { color: #770055; font-style: normal; background-color: transparent; border: 0px; margin: 0px;}
a.symbol:link { color: #229955; background-color: transparent; text-decoration: none; border: 0px; margin: 0px; }
a.symbol:active { color: #229955; background-color: transparent; text-decoration: none; border: 0px; margin: 0px; }
a.symbol:visited { color: #229955; background-color: transparent; text-decoration: none; border: 0px; margin: 0px; }
a.symbol:hover { color: #229955; background-color: transparent; text-decoration: none; border: 0px; margin: 0px; }
.special { color: #FF5000; background-color: inherit; }
.keyword { color: #770000; background-color: inherit; }
.comment { color: #007777; background-color: inherit; }
.string { color: #777777; background-color: inherit; }
.atom { color: #314F4F; background-color: inherit; }
.macro { color: #FF5000; background-color: inherit; }
.variable { color: #36648B; background-color: inherit; }
.function { color: #8B4789; background-color: inherit; }
.attribute { color: #FF5000; background-color: inherit; }
.character { color: #0055AA; background-color: inherit; }
.syntaxerror { color: #FF0000; background-color: inherit; }
.diff-deleted { color: #5F2121; background-color: inherit; }
.diff-added { color: #215F21; background-color: inherit; }
#content-container
{
margin: 0;
padding: 0 0 var(--line-height) 0;
}
/* toc on the top */
#content
{
max-width: 70ch;
margin: 0 auto;
padding-left: 2ch;
padding-right: 2ch;
}
#toc {
background-color: #444;
color: #aaa;
font-family: var(--font-family-monospace);
font-size: var(--font-size-monospace);
/* With two lines, 2*0.8+2*0.2=2, so it likely starts out with the
* correct padding, but the Javascript padToBaselineGrid() will fix
* it up in any case. */
line-height: calc(0.8*var(--line-height));
padding: calc(0.2*var(--line-height)) 0;
}
#toc code {
/* Do not adjust the monospace font size to match XCharter's x-height
* because we use monospace everywhere in the #toc. */
font-size: 100%;
line-break: auto;
}
.current-category::before {
content: "»";
padding-right: 0.25em;
}
.current-category::after {
padding-left: 0.25em;
content: "«";
}
/* toc on the left */
/* #content */
/* { */
/* margin-left: min(16.5rem,33%); */
/* padding-left: 1em; */
/* max-width: 70ch; */
/* } */
/* */
/* #toc { */
/* top: 0px; */
/* left: 0px; */
/* height: 100%; */
/* width: 14rem; */
/* max-width: 33%; */
/* position: fixed; */
/* overflow-y:auto; */
/* overflow-x:hidden; */
/* background: #333; */
/* box-shadow: inset -5px 0 5px 0px #000; */
/* color: #aaa; */
/* font-family: monospace; */
/* } */
#toc a {
color: #fff;
text-decoration: none;
}
#toc a:focus {
outline-color: #fff;
}
#home {
background-color: #444;
color: #eee;
text-align: center;
letter-spacing: 0.02em;
}
#links {
text-align: center;
}
img[alt$="end-of-post"] {
height: calc(2*var(--line-height));
margin-top: calc(2*var(--line-height));
}
img[alt$="about-me-die"] {
width: 20%;
float: right;
}
img[alt$="2TA (orange) vs SWA (green)"] {
height: calc(8*var(--line-height));
}
img[alt$="try-emacs"] {
height: calc(10*var(--line-height));
}
img[alt$="typography-line-terms"] {
height: calc(8*var(--line-height));
}
img[alt$="cache-friendliness-regret"] {
height: calc(8*var(--line-height));
}
img[alt$="cache-friendliness-put"] {
height: calc(8*var(--line-height));
}
img[alt$="adaptive-hashing"] {
height: calc(16*var(--line-height));
}
img[alt$="adaptive-hash-eq-put"] {
height: calc(8*var(--line-height));
}
img[alt$="adaptive-hash-string-put"] {
height: calc(8*var(--line-height));
}
/* To debug alignment to baseline grid. */
/* body { */
/* background-size: 1000vw var(--line-height); */
/* background-image: */
/* linear-gradient(to bottom, grey 1px, transparent 1px); */
/* } */