Schuil

assets/css/app.css

@@ -1,7 +1,26 @@
 /* Colours and type for the whole app. The values are the ones Bootstrap
    gave the page before it was taken out, so nothing shifts. */
+/* Variable fonts, one file per style covering weights 400 to 800. They are
+   cut down to Latin, Greek and punctuation; Hebrew falls back to the next
+   font in the stack. */
+@font-face {
+  font-family: "EB Garamond";
+  src: url("../fonts/EBGaramond.woff2") format("woff2");
+  font-weight: 400 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "EB Garamond";
+  src: url("../fonts/EBGaramond-Italic.woff2") format("woff2");
+  font-weight: 400 800;
+  font-style: italic;
+  font-display: swap;
+}
+
 :root {
-  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype",
+  --font-body: "EB Garamond", Georgia, "Iowan Old Style", "Palatino Linotype",
                "Times New Roman", serif;
   --text: #212529;
   --text-muted: rgb(33 37 41 / .75);
@@ -24,13 +43,14 @@
 
 /* flow-root keeps main's top margin inside the body. Let through, it moves
    the body's top edge down the page, and htmx scrolls a boosted page to that
-   edge, not to the very top. */
+   edge, not to the very top. EB Garamond's x-height is a fifth smaller than
+   Georgia's, so it is set a size up to read the same. */
 body {
   display: flow-root;
   margin: 0;
   font-family: var(--font-body);
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 1.1875rem;
+  line-height: 1.55;
   color: var(--text);
   background: var(--background);
   -webkit-tap-highlight-color: transparent;
@@ -131,7 +151,33 @@ a:hover { color: var(--link-hover); }
   }
 }
 
-.sidebar-body { padding: calc(var(--corner) + 1rem); }
+/* The title over a rule, then the selects, then the link back to the index
+   pushed down to the foot of the frame by the row between that takes up the
+   rest. */
+.sidebar-body {
+  display: grid;
+  grid-template-rows: auto auto auto 1fr auto;
+  height: 100%;
+  padding: calc(var(--corner) + 1rem);
+}
+
+.sidebar-title {
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+/* A hairline, like the selects' boxes. */
+.sidebar-rule {
+  width: 100%;
+  margin: 0 0 1rem;
+  border: 0;
+  border-top: 1px solid #000;
+}
+
+.sidebar-index {
+  grid-row: 5;
+  justify-self: center;
+}
 
 .sidebar::backdrop { background: rgb(0 0 0 / .3); }
 
@@ -214,15 +260,12 @@ a:hover { color: var(--link-hover); }
   }
 }
 
+/* Each label on the left with its select set flush to the right. */
 .reference {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  gap: .25rem;
-}
-
-.reference-book {
-  font-weight: 700;
-  margin-right: .25rem;
+  gap: .5rem 1rem;
 }
 
 /* A plain box in a hairline, square like the frame, with a small black
@@ -246,15 +289,6 @@ a:hover { color: var(--link-hover); }
   outline-offset: 2px;
 }
 
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 /* 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. The
    sidebar sizes itself from the same two values. */
@@ -291,6 +325,11 @@ main {
   text-decoration: none;
 }
 
+/* Garamond's numbers are old-style by default; in a superscript or beside
+   the flourishes they sink below the line, so these use lining ones. */
+.v,
+.chapter-number { font-variant-numeric: lining-nums; }
+
 .v {
   font-size: .7em;
   font-weight: 700;
@@ -315,7 +354,7 @@ main {
   font-family: "Day Leaf Initials", var(--font-body);
   font-size: 5em;
   line-height: .8;
-  margin: .06em .08em 0 0;
+  margin: .1em .08em 0 0;
 }
 
 /* The first line pulled in closer to the letter than the lines below it, so
@@ -342,12 +381,10 @@ main {
 /* 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;
+  margin: 10rem 0;
 }
 
 .book-header h1 {
@@ -382,7 +419,7 @@ main {
   font-size: 2rem;
   font-weight: 400;
   color: var(--text);
-  margin: 5rem 0 .75rem;
+  margin: 10rem 0 .75rem;
 }
 
 .chapter-number::before,
@@ -391,9 +428,10 @@ main {
   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;
+  /* Flex centres on the line box. In EB Garamond its middle is .35em above
+     the baseline and a lining numeral's is .33em, so this lowers the
+     flourish the difference to sit level with the number. */
+  translate: 0 .05em;
   background: currentColor;
   mask: url("../ornaments/group-l-49.svg") center / contain no-repeat;
 }
@@ -438,10 +476,10 @@ main {
 }
 
 .footnotes {
-  font-size: .875rem;
+  font-size: .875em;
   color: var(--text-muted);
 }
-.footnotes-title { font-size: 1rem; }
+.footnotes-title { font-size: 1em; }
 .marker { font-weight: 700; }
 
 .noteref,
@@ -472,7 +510,8 @@ main {
 }
 
 @media (max-width: 767.98px) {
-  .book { line-height: 1.45; }
+  body { font-size: 1.0625rem; }
+  .book { line-height: 1.5; }
   .book .p,
   .book .m,
   .book .pi,