body {
  /* Horizontally center everything. */
  margin: auto;
  /* Make sure the text can't start and stop exactly at the screen edges; leave some
   * space.
   */
  padding: 0 2mm;
  /* Set the maximum width in terms of the width of '0' in whatever font is used.  See
   * <https://developer.mozilla.org/en/docs/Web/CSS/length> and
   * <https://practicaltypography.com/line-length.html>.
   */
  max-width: 75ch;
  line-height: 1.4;
  /* Use the browser's default sans-serif font.  Don't impose anything more than that.
   * Someone could even set their default sans-serif font to a font with serifs.  When I
   * don't set `font-family` some browsers use a serif font by default, though.
   */
  font-family: sans-serif;
  /* See <https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering>. */
  text-rendering: optimizeLegibility;
  /* overflow-y: scroll; */
  overflow-x: hidden;
}

/* Fully justify text.  Also see <https://practicaltypography.com/hyphenation.html>. */
p {
  text-align: justify;
  /* See <http://caniuse.com/#search=hyphens>. */
  hyphens: auto;
}

/* Make sure full justification is disabled for these elements. */
blockquote, blockquote > p, ul, ol, dl, h1, h2, h3, h4, h5, h6 {
  text-align: initial;
  hyphens: initial;
}

/* Headings.  Only <h1>, <h2>, and <h3> should be used [1].  Their styles are those most
 * browsers use for <h2>, <h3>, and <h4>, respectively [2].  Since I only want to use
 * three levels of headings, <h4>, <h5>, and <h6> aren't visually distinct from <h3>.
 *
 * There's some weirdness going on with <h1> font sizes in most browsers (e.g. Firefox and
 * Chrome): <h1> headings become gradually smaller the deeper they are nested in
 * <article>, <aside>, <nav>, and <section> (see [3] in Firefox and [4]).  I think it's
 * rooted in the HTML5 specification.  See [5].
 *
 * [1]: https://practicaltypography.com/headings.html
 * [2]: https://www.w3schools.com/tags/tag_hn.asp
 * [3]: view-source:resource://gre-resources/html.css
 * [4]: https://stackoverflow.com/q/22898559 "Why is H2 larger than H1?"
 * [5]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm
 */
h1 {
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

h2 {
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
}

h3, h4, h5, h6 {
  font-size: 1.00em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

h1, h2 {
  font-variant: small-caps;
  /* See <https://practicaltypography.com/letterspacing.html>. */
  letter-spacing: 0.05em;
}

a {
  /* Only underline links on mouseover. */
  text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

/* Set the size of monospace text relative to the normal font size.  See [1], [2], and
 * [3].  Make it smaller, but not as excessively as typical browser defaults [4].  Just
 * using the same size as for proportional fonts unfortunately looks pretty bad with the
 * default fonts of most browsers I looked at.
 *
 * [1]: http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
 * [2]: https://stackoverflow.com/q/38781089
 *      "font-family: monospace, monospace"
 * [3]: https://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 * [4]: https://www.brunildo.org/test/monospace_fsize.html
 *      "monospace default font-size"
 */
pre, code, kbd, samp, tt {
  font-family: monospace, monospace;
  font-size: .9375em; /* 15/16 */
  hyphens: none;
}

/* Don't reduce the font size of code blocks twice. */
pre > code {
  font-size: 1em;
}

div.highlighter-rouge {
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  /* Only darken the background color of code blocks very slightly. */
  background-color: #f6f6f6;
  min-width: 100%;
  max-width: calc(50% + 50vw - 2mm);
  width: -moz-min-content;
  width: -webkit-min-content;
  margin: 1em -2mm;
  padding: 0 2mm;
  overflow-x: hidden;
}

pre {
  padding: .3em 0;
  margin: 0;
  overflow-x: auto;
}

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
  background-color: #f6f6f6;
}

/* Inline code */
code {
  padding: .1em .2em;
  background-color: #eee;
}

/* Images may generally use the whole viewport width and aren't restricted to the line
 * length.  Exceptions in Markdown files can be made using span IALs [2].  There are no
 * margins for images.
 *
 * [1]: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/
 *      "Breaking Out With Viewport Units and Calc"
 * [2]: https://kramdown.gettalong.org/syntax.html#span-ials
 */
img {
  display: block;
  max-width: 100vw;
  position: relative; /* This makes `left: 50vw` work. */
  left: 50vw;
  transform: translateX(-50%);
  margin-left: calc(-50vw + 50%);
  vertical-align: middle;
}

/* Class for images that disables most weird hacks. */
.normal-img {
  max-width: initial;
  position: initial;
  left: initial;
  transform: initial;
  margin-left: initial;
  vertical-align: initial;
}

/* Wrapper to make the following class work. */
.scrolled-img-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow-x: auto;
}

/* Class for images that shouldn't be scaled but instead have a horizontal scrollbar.
 * They are still centered on wide viewports.  The <img> element should be wrapped in a
 * <div> with the class `scrolled-img-wrapped`. */
.scrolled-img {
  display: block;
  /* Reset some properties set for <img> elements. */
  max-width: initial;
  position: initial;
  left: initial;
  transform: initial;
  vertical-align: initial;
  margin: 0 auto;
}

/* For images that shouldn't be (significantly) wider than the line length.  FIXME: I
 * think small images aren't centered. */
.confined-img {
  display: initial;
  max-width: calc(100% + 4mm);
  position: initial;
  left: initial;
  transform: initial;
  margin: 0 -2mm;
}

/* See <https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php>. */
div.youtube-wrapper {
  position: relative;
  width: calc(100% + 4mm);
  margin: 0 -2mm;
  height: 0;
  padding-bottom: calc(56.25% + 2.25mm); /* (9/16 + 9/16 * 4mm) */
}

iframe.youtube-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* See <https://stackoverflow.com/q/26274082>. */
}

.post-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.post-meta {
  color: #666;
}

/* Block quotations.  Originally based on the Minima theme [1].  Heavily modified by
 * observing how they are usually typeset in TeX documents:
 *
 * 1. Don't screw with the font color.
 * 2. Probably don't screw with the tracking (letter-spacing).  Especially not using
 *    pixels as the unit.  How is the supposed to be portable?
 * 3. Don't make all of it italic.  That's too much emphasis.
 * 4. Definitely don't combine all of the above.
 *
 * [1]: https://github.com/jekyll/minima/blob/affcd93be22e960afd2be08e6891d99b31bcf920/_sass/minima/_base.scss#L117
 */
blockquote {
  border-left: .3em solid #ddd;
  margin-left: 0;
  margin-right: 0;
  padding-left: 2ch;
  padding-right: 2ch;
}

blockquote:last-child {
  margin-bottom: 0;
}

/* Tables
 *
 * Inspired by booktabs [1] and the Minima theme [2].  FIXME: the text alignment looks
 * stupid when the table only has two columns.
 *
 * [1]: https://ctan.org/pkg/booktabs
 * [2]: https://github.com/jekyll/minima/blob/affcd93be22e960afd2be08e6891d99b31bcf920/_sass/minima/_base.scss#L220
 */
table {
  text-align: center;
  border-collapse: collapse;
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  /* Horizontally center tables but don't stretch them to the width of the main text and
   * add a horizontal scrollbar if the table is too wide.  See [1] and [2].
   *
   * [1]: https://stackoverflow.com/a/30423904
   *      "Add horizontal scrollbar to html table"
   * [2]: https://stackoverflow.com/a/34071945
   *      "Is it possible to center an inline-block element and if so, how?"
   *
   * Additionally, allow tables to be wider than the main text.  See [3], [4], and
   * especially [5].  FIXME: this breaks when there is a non-overlay vertical scrollbar
   * (one that reduces the width of the viewport): the `vw` (viewport width) unit ignores
   * any reduction of the available space by scrollbars.  A workaround (which I'm
   * currently not using) is `body { overflow-y: scroll; }` [3].  It makes the `vw` unit
   * behave sensibly at the cost of always displaying a scrollbar (and it apparently
   * doesn't work in Chrome and Safari [3]).
   *
   * [3]: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/
   *      "Breaking Out With Viewport Units and Calc"
   * [4]: https://stackoverflow.com/a/24895631
   *      "Is there a way to make a child DIV wider than the parent DIV using CSS?"
   * [5]: https://stackoverflow.com/a/20214782
   *      "Can you make a child div larger than parent without position absolute?"
   */
  display: inline-block; /* TODO: this adds padding at the bottom of the table. */
  overflow-x: auto;
  /* Eventually add a horizontal scrollbar. */
  max-width: calc(100vw - 2mm);
  /* This makes `left: 50vw` work. */
  position: relative;
  /* Move the table so it starts at the very left of the viewport.  This is the real magic
   * because it increases how big the automatically calculated width of the table can be
   * to the viewport width.  Taken from [5].  */
  margin-left: calc(-50vw + 50% - 2mm);
  /* Move the table to the right by half the viewport width.  This will make it start at
   * the center of the viewport when combined with the above line (without it we would use
   * 50%). */
  left: calc(50vw + 2mm);
  /* Finally move the table to the left by half of its width.  This will center it. */
  transform: translateX(-50%);
}

tbody {
  /* This seems to be the default behavior of Firefox but not Chromium: don't wrap text in
   * table cells. */
  white-space: nowrap;
}

td:first-child, th:first-child {
  text-align: left;
  padding-left: 1mm;
}

td:last-child, th:last-child {
  text-align: right;
  padding-right: 1mm;
}

tr:nth-child(even) {
  background-color: #eee;
}

th, td {
  padding: .05em 1ch;
}

th {
  font-weight: normal;
  border-bottom: 1px solid #000;
  padding-top: .2em;
  padding-bottom: .2em;
}

/* Add the same abount of vertical padding below the line that seperates the table heading
 * and data as above.  Actually looks pretty bad because the first row of the table is
 * higher than the rest. */
tbody > tr:first-child > td {
  /* padding-top: .2em; */
}

/* Rules for syntax highlighting copied from [1].  Only the color in the first line is
 * modified.  Also see [2].
 *
 * [1]: https://github.com/mojombo/tpw/blob/master/css/syntax.css
 * [2]: https://jekyllrb.com/docs/templates/#code-snippet-highlighting
 */
.highlight  { background: #f6f6f6; }
.highlight .c { color: #999988; font-style: italic }
.highlight .err { color: #a61717; background-color: #e3d2d2 }
.highlight .k { font-weight: bold }
.highlight .o { font-weight: bold }
.highlight .cm { color: #999988; font-style: italic }
.highlight .cp { color: #999999; font-weight: bold }
.highlight .c1 { color: #999988; font-style: italic }
.highlight .cs { color: #999999; font-weight: bold; font-style: italic }
.highlight .gd { color: #000000; background-color: #ffdddd }
.highlight .gd .x { color: #000000; background-color: #ffaaaa }
.highlight .ge { font-style: italic }
.highlight .gr { color: #aa0000 }
.highlight .gh { color: #999999 }
.highlight .gi { color: #000000; background-color: #ddffdd }
.highlight .gi .x { color: #000000; background-color: #aaffaa }
.highlight .go { color: #888888 }
.highlight .gp { color: #555555 }
.highlight .gs { font-weight: bold }
.highlight .gu { color: #aaaaaa }
.highlight .gt { color: #aa0000 }
.highlight .kc { font-weight: bold }
.highlight .kd { font-weight: bold }
.highlight .kp { font-weight: bold }
.highlight .kr { font-weight: bold }
.highlight .kt { color: #445588; font-weight: bold }
.highlight .m { color: #009999 }
.highlight .s { color: #d14 }
.highlight .na { color: #008080 }
.highlight .nb { color: #0086B3 }
.highlight .nc { color: #445588; font-weight: bold }
.highlight .no { color: #008080 }
.highlight .ni { color: #800080 }
.highlight .ne { color: #990000; font-weight: bold }
.highlight .nf { color: #990000; font-weight: bold }
.highlight .nn { color: #555555 }
.highlight .nt { color: #000080 }
.highlight .nv { color: #008080 }
.highlight .ow { font-weight: bold }
.highlight .w { color: #bbbbbb }
.highlight .mf { color: #009999 }
.highlight .mh { color: #009999 }
.highlight .mi { color: #009999 }
.highlight .mo { color: #009999 }
.highlight .sb { color: #d14 }
.highlight .sc { color: #d14 }
.highlight .sd { color: #d14 }
.highlight .s2 { color: #d14 }
.highlight .se { color: #d14 }
.highlight .sh { color: #d14 }
.highlight .si { color: #d14 }
.highlight .sx { color: #d14 }
.highlight .sr { color: #009926 }
.highlight .s1 { color: #d14 }
.highlight .ss { color: #990073 }
.highlight .bp { color: #999999 }
.highlight .vc { color: #008080 }
.highlight .vg { color: #008080 }
.highlight .vi { color: #008080 }
.highlight .il { color: #009999 }

/* vim: set tw=90 sts=-1 sw=2 et: */