85 lines
2.9 KiB
CSS
85 lines
2.9 KiB
CSS
/* 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; }
|
|
|
|
/* The navbar is sticky, so an element scrolled to the top of the viewport
|
|
lands underneath it. These two are everything an anchor in this app points
|
|
at -- chapter headings and verse numbers -- so the offset lives on them
|
|
rather than on a scroll container. Roughly the navbar's height. */
|
|
.chapter,
|
|
.v { scroll-margin-top: 4.5rem; }
|
|
|
|
/* The navbar's reference picker. form-select is width:100% by default, which
|
|
in a flex row means both selects try to take the whole navbar; and the
|
|
default right padding leaves the caret sitting on top of a three-digit
|
|
chapter number. */
|
|
.reference .form-select {
|
|
width: auto;
|
|
padding-right: 2rem;
|
|
}
|