bible/assets/css/app.css

/* Colours and type for the whole app. The values are the ones Bootstrap
   gave the page before it was taken out, so nothing shifts. */
:root {
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype",
               "Times New Roman", serif;
  --text: #212529;
  --text-muted: rgb(33 37 41 / .75);
  --background: #f8f9fa;
  --link: #0d6efd;
  --link-hover: #0a58ca;
  --focus: #0d6efd;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Headings grow with the viewport up to their full size on a wide screen. */
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}

p,
ul,
ol { margin: 0 0 1rem; }

ul,
ol { padding-left: 2rem; }

:is(ul, ol) :is(ul, ol) { margin-bottom: 0; }

/* Footnote callers sit above the line without pushing it apart. */
sup {
  position: relative;
  top: -.5em;
  font-size: .75em;
  line-height: 0;
  vertical-align: baseline;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* One reading column: the full width less a gutter on anything narrower than
   a laptop, and a measure that grows a step with the screen beyond that. */
main {
  margin: 1.5rem auto;
  padding: 0 .75rem;
}

@media (min-width: 1200px) {
  main { max-width: 760px; }
}

@media (min-width: 1400px) {
  main { max-width: 880px; }
}

/* Only A-Z and a-z: the compiler puts a drop cap on a chapter only when it
   opens on a letter. */
@font-face {
  font-family: "Day Leaf Initials";
  src: url("../fonts/DayLeafInitials.woff2") format("woff2");
  font-display: swap;
}

/* Both of these are links to their own id. They keep the text colour they
   had as plain numbers, since an underlined blue verse number in the middle
   of a sentence reads as part of the text. */
.v,
.chapter-number a {
  color: var(--text);
  text-decoration: none;
}

.v {
  font-size: .7em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-right: .15em;
  user-select: none;
}

.v:focus-visible,
.chapter-number a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Three lines deep. The verse number it replaces is still there for its id
   and the keyboard, as the chapter number above already says where verse 1
   is -- the way a printed Bible drops it. */
.dropcap {
  float: left;
  font-family: "Day Leaf Initials", var(--font-body);
  font-size: 5em;
  line-height: .8;
  margin: .06em .08em 0 0;
}

/* The first line pulled in closer to the letter than the lines below it, so
   the rest of the first word reads as part of it. .chapter makes this beat
   the list's and the poetry's own first-line indents. */
.chapter :is(p, li):has(.dropcap) { text-indent: -.4em; }

/* The rest of the first line in small caps, as a lead-in from the initial.
   The letter can sit inside a span, such as .wj. */
:is(p, li):has(.dropcap)::first-line {
  font-variant: small-caps;
  letter-spacing: .05em;
}

.v:has(+ .dropcap):not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The book's title, centred with room around it. --u shrinks with the header
   on a phone. */
.book-header {
  --u: min(1rem, 100cqi / 22);
  container-type: inline-size;
  display: grid;
  place-items: center;
  padding: calc(var(--u) * 4.5) calc(var(--u) * 3.5);
  margin: 1rem 0 2rem;
}

.book-header h1 {
  max-width: 100%;
  margin: 0;
  padding: .6em 1.2em;
  text-align: center;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

/* The lines above and below the name itself, such as "The First Book of
   Moses, Commonly Called", on lines of their own in small caps. */
.book-header :is(.mt1, .mt2, .mt3, .mt4) {
  display: block;
  font-size: .45em;
  font-variant: small-caps;
  letter-spacing: .08em;
  margin: .3em 0;
}

.book-header .mt { display: block; }

/* Centred between two flourishes (Group L 49), the left one mirrored so
   their curls point in at the number. */
.chapter-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  font-size: 2rem;
  font-weight: 400;
  color: var(--text-muted);
  margin: 5rem 0 .75rem;
}

.chapter-number::before,
.chapter-number::after {
  content: "";
  flex: none;
  width: 3.2em;
  height: .8em;
  /* Flex centres on the line box, which leaves room below for descenders;
     numerals have none, so this lifts the flourish to their middle. */
  translate: 0 -.1em;
  background: currentColor;
  mask: url("../ornaments/group-l-49.svg") center / contain no-repeat;
}

.chapter-number::before { transform: scaleX(-1); }

/* The export marks these up as list items but hides the marker, indenting the
   first line instead, which is how a printed Bible sets them -- Ezra 10:18-44
   and the like are prose, not a bulleted list. Only the glossary and front
   matter items it actually marks, with a square. The list markup is worth
   keeping for what it means; the bullet is not. */
.list {
  list-style: none;
  padding-left: 0;
}

.list .li { text-indent: 2em; }

.list .ili {
  list-style: square;
  margin-left: 2em;
}

.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; }

/* A poetry line's indent is padding, which a float covers. Each line after
   the drop cap becomes its own block beside the letter, so its indent counts
   from the letter's edge; the drop cap's own line has no indent of its own. */
.poetry .line:has(.dropcap) { padding-left: 0; }
.poetry .line:not(:has(.dropcap)) { display: flow-root; }

.d {
  font-style: italic;
  color: var(--text-muted);
}

.footnotes {
  font-size: .875rem;
  color: var(--text-muted);
}
.footnotes-title { font-size: 1rem; }
.marker { font-weight: 700; }

.noteref,
.marker { font-variant-emoji: text; }

.chapter,
.v { scroll-margin-top: 1rem; }

.index ul {
  list-style: none;
  padding-left: 0;
}

.index .count { display: none; }

.book .p,
.book .m,
.book .pi,
.book .ip,
.book .li,
.book .ili,
.footnotes .note {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

@media (max-width: 767.98px) {
  .book { line-height: 1.45; }
  .book .p,
  .book .m,
  .book .pi,
  .book .ip,
  .book .li,
  .book .ili,
  .footnotes .note { word-spacing: -.04em; }
}

.poetry .line,
.book .sp,
.book .d {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.app-version {
  margin: 3rem 0 .5rem;
  text-align: center;
}

.app-version p {
  margin: .25rem 0 0;
  font-size: .875em;
  color: var(--text-muted);
}

/* The page shown while the service worker installs. */
.boot {
  margin: 0 auto;
  padding: 3rem .75rem;
  text-align: center;
}

.boot p { color: var(--text-muted); }

.spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  border: .25em solid #6c757d;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.boot .boot-warning {
  display: inline-block;
  padding: 1rem;
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: .375rem;
}