Decent

assets/app.css

@@ -0,0 +1,68 @@
+/* The text layer. Bootstrap styles the chrome; this styles scripture.
+   Every selector here is a class render_books.py already emits, so restyling
+   the text never means regenerating books/. */
+
+/* Serif everywhere, chrome included. Overriding Bootstrap's own variable
+   rather than setting font-family on elements means the navbar, modal and
+   buttons all follow, and a typeface is named in exactly one place. System
+   fonts on purpose: a webfont would be one more thing to keep cached for
+   offline, and one more request before the text can be read. */
+:root {
+  --bs-body-font-family: Georgia, "Iowan Old Style", "Palatino Linotype",
+                         "Times New Roman", serif;
+}
+
+/* Verse numbers. The markup is a <span>, not a <sup>, so the raise happens
+   here -- and line-height:0 keeps the raised number from opening up the line
+   it sits on. Not selectable, so copying a passage copies the words. */
+.v {
+  font-size: .7em;
+  font-weight: 700;
+  vertical-align: super;
+  line-height: 0;
+  margin-right: .15em;
+  color: var(--bs-secondary-color);
+  user-select: none;
+}
+
+/* app.js turns these into real buttons, so they need a visible focus ring. */
+.v:focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Chapter numbers are <h2>, which at heading size shouts over the text. */
+.chapter-number {
+  font-size: 2rem;
+  font-weight: 400;
+  color: var(--bs-secondary-color);
+  margin: 2rem 0 .75rem;
+}
+
+/* Poetry lines are paragraphs, so left alone each one carries a paragraph's
+   bottom margin and a psalm falls apart into separate blocks. Close the gap,
+   indent by the level the generator recorded, and hang the indent so a line
+   too long for the screen still reads as one line. */
+.poetry { margin-bottom: 1rem; }
+.poetry .line {
+  margin: 0;
+  padding-left: 1.5em;
+  text-indent: -1.5em;
+}
+.poetry .line[data-indent="2"] { padding-left: 3em; }
+.poetry .line[data-indent="3"] { padding-left: 4.5em; }
+
+/* Descriptive titles: "A Psalm by David". */
+.d {
+  font-style: italic;
+  color: var(--bs-secondary-color);
+}
+
+/* The notes are apparatus, not scripture, and should not read as it. */
+.footnotes {
+  font-size: .875rem;
+  color: var(--bs-secondary-color);
+}
+.footnotes-title { font-size: 1rem; }
+.marker { font-weight: 700; }