ReKoPub/internal/build/style.css

/*
 * Stylesheet for grayscale e-ink readers (reMarkable 2, Kobo Clara HD).
 *
 * - Pure black only: no colours, no gray text, no background shading.
 *   Gray text looks faint on e-ink and light fills turn into dithered noise.
 * - Font family, size, line spacing and margins are left to the reader's
 *   own settings; sizes below are relative (em) only.
 * - Simple CSS only: Kobo's RMSDK renderer and the reMarkable ignore or
 *   mis-render flexbox, grid, calc() and custom properties.
 */

body {
  font-family: serif;
  color: #000;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
  page-break-after: avoid;
}

h1 { font-size: 1.6em; margin: 0 0 0.4em 0; }
h2 { font-size: 1.3em; margin: 1.4em 0 0.5em 0; }
h3 { font-size: 1.15em; margin: 1.2em 0 0.4em 0; }
h4, h5, h6 { font-size: 1em; margin: 1em 0 0.3em 0; }

.byline {
  font-style: italic;
  margin: 0;
  text-indent: 0;
}

.source {
  font-size: 0.85em;
  margin: 0.2em 0 1.8em 0;
  text-indent: 0;
  word-wrap: break-word;
}

/* Links are shown by an underline, not by colour. */
a {
  color: #000;
  text-decoration: underline;
}

blockquote {
  margin: 1em 0 1em 0.4em;
  padding: 0 0 0 0.8em;
  border-left: 3px solid #000;
}

/* E-ink readers can't scroll sideways, so long lines must wrap. */
pre {
  font-family: monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 1em 0;
  padding: 0.4em 0 0.4em 0.6em;
  border-left: 1px solid #000;
}

code {
  font-family: monospace;
}

ul, ol {
  margin: 0.8em 0;
  padding-left: 1.6em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 0 0.6em 1.4em;
}

table {
  border-collapse: collapse;
  margin: 1em 0;
}

th, td {
  border: 1px solid #000;
  padding: 0.2em 0.4em;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: bold;
}

hr {
  border: 0;
  border-top: 1px solid #000;
  margin: 1.5em 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Images are already grayscale and sized for the screen (see internal/assets). */
figure {
  margin: 1em 0;
  text-align: center;
  page-break-inside: avoid;
}

figure img {
  display: block;
  margin: 0 auto;
}

/* Stands in for an image that couldn't be downloaded. */
.missing-image {
  font-style: italic;
}

figcaption {
  text-align: left;
  font-style: italic;
  font-size: 0.9em;
  margin-top: 0.3em;
}

aside {
  margin: 1em 0;
  padding-left: 0.8em;
  border-left: 1px solid #000;
}