From a0c36853a102d6a3d3b2227f10bb0df3d7552118 Mon Sep 17 00:00:00 2001 From: Mark Wissink Date: Sun, 25 Oct 2026 21:53:54 -0400 Subject: [PATCH] Work --- assets/css/app.css | 177 ++++++++++++++++++++++++------ assets/ornaments/schuil-10-bl.svg | 1 + assets/ornaments/schuil-10-br.svg | 1 + assets/ornaments/schuil-10-tl.svg | 1 + assets/ornaments/schuil-10-tr.svg | 1 + assets/sw.js | 10 +- assets/templates/home.njk | 25 +++-- 7 files changed, 170 insertions(+), 46 deletions(-) create mode 100644 assets/ornaments/schuil-10-bl.svg create mode 100644 assets/ornaments/schuil-10-br.svg create mode 100644 assets/ornaments/schuil-10-tl.svg create mode 100644 assets/ornaments/schuil-10-tr.svg diff --git a/assets/css/app.css b/assets/css/app.css index 667d236..a497140 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -99,16 +99,25 @@ a { color: var(--link); } a:hover { color: var(--link-hover); } /* The frame's measures, shared by the sidebar and the button that opens it - below a laptop. A corner is six rules square, set turned half round from how - the piece is drawn, so its small square sits outermost. The frame runs two - rules along each side, one on the edge and one 2.5 rules in, both meeting - the corner's far side. */ + below a laptop, in the Schuil tiles' units as on the index. A schuil-10 + sits in each corner, and brass runs along each side between them, its two + strokes in line with the corner's arm, 8 and 34 units in from the edge, + and standing off from the tiles as the index's brass does. The unit is + the index's at its full size, on every screen. */ .sidebar-shell { - --rule: 3px; - --corner: calc(var(--rule) * 6); - --inner: calc(var(--rule) * 2.5); + --u: .22px; + --corner: calc(var(--u) * 150); + --stroke: calc(var(--u) * 8); + --outer: calc(var(--u) * 8); + --inner: calc(var(--u) * 34); --run: calc(100% - var(--corner) * 2); + --corners: + url("../ornaments/schuil-10-tl.svg") left top / var(--corner) no-repeat, + url("../ornaments/schuil-10-tr.svg") right top / var(--corner) no-repeat, + url("../ornaments/schuil-10-bl.svg") left bottom / var(--corner) no-repeat, + url("../ornaments/schuil-10-br.svg") right bottom / var(--corner) no-repeat; --margin: 1.5rem; + --fab: 4rem; } /* Over the text along the left edge, so the reading column stays centred on @@ -127,18 +136,15 @@ a:hover { color: var(--link-hover); } color: var(--text); border: 0; background: - url("../ornaments/uniform-rule-corner-br.svg") left top / var(--corner) no-repeat, - url("../ornaments/uniform-rule-corner-bl.svg") right top / var(--corner) no-repeat, - url("../ornaments/uniform-rule-corner-tr.svg") left bottom / var(--corner) no-repeat, - url("../ornaments/uniform-rule-corner-tl.svg") right bottom / var(--corner) no-repeat, - linear-gradient(#000 0 0) var(--corner) var(--inner) / var(--run) var(--rule) no-repeat, - linear-gradient(#000 0 0) var(--corner) 0 / var(--run) var(--rule) no-repeat, - linear-gradient(#000 0 0) var(--corner) calc(100% - var(--inner)) / var(--run) var(--rule) no-repeat, - linear-gradient(#000 0 0) var(--corner) 100% / var(--run) var(--rule) no-repeat, - linear-gradient(#000 0 0) var(--inner) var(--corner) / var(--rule) var(--run) no-repeat, - linear-gradient(#000 0 0) 0 var(--corner) / var(--rule) var(--run) no-repeat, - linear-gradient(#000 0 0) calc(100% - var(--inner)) var(--corner) / var(--rule) var(--run) no-repeat, - linear-gradient(#000 0 0) 100% var(--corner) / var(--rule) var(--run) no-repeat, + var(--corners), + linear-gradient(#000 0 0) var(--corner) var(--outer) / var(--run) var(--stroke) no-repeat, + linear-gradient(#000 0 0) var(--corner) var(--inner) / var(--run) var(--stroke) no-repeat, + linear-gradient(#000 0 0) var(--corner) calc(100% - var(--outer)) / var(--run) var(--stroke) no-repeat, + linear-gradient(#000 0 0) var(--corner) calc(100% - var(--inner)) / var(--run) var(--stroke) no-repeat, + linear-gradient(#000 0 0) var(--outer) var(--corner) / var(--stroke) var(--run) no-repeat, + linear-gradient(#000 0 0) var(--inner) var(--corner) / var(--stroke) var(--run) no-repeat, + linear-gradient(#000 0 0) calc(100% - var(--outer)) var(--corner) / var(--stroke) var(--run) no-repeat, + linear-gradient(#000 0 0) calc(100% - var(--inner)) var(--corner) / var(--stroke) var(--run) no-repeat, var(--background); transition: opacity .15s ease-out; } @@ -186,25 +192,25 @@ a:hover { color: var(--link-hover); } sidebar over the text. */ .scrolled .sidebar:not(:modal, :hover) { opacity: 0; } -/* Below a laptop the sidebar waits behind a button in the corner, a box in the - frame's rule. Opened, the frame grows out of it and a copy of it, which +/* Below a laptop the sidebar waits behind a button in the corner, a box + marked out by the frame's four corners. Opened, the frame grows out of it and a copy of it, which closes the dialog, stands in for the frame's bottom right corner. */ .sidebar-fab { display: none; - width: 4rem; - height: 4rem; + width: var(--fab); + height: var(--fab); padding: 0; color: #000; - border: var(--rule) solid #000; - background: var(--background); + border: 0; + background: var(--corners), var(--background); cursor: pointer; } .sidebar-fab::before { content: ""; display: block; - width: 90%; - height: 90%; + width: 60%; + height: 60%; margin: auto; background: currentColor; mask: url("../ornaments/mural-311a.svg") center / contain no-repeat; @@ -258,6 +264,39 @@ a:hover { color: var(--link-hover); } width: auto; max-width: none; } + + /* Heads that lead the brass into the button's box: schuil-07 along the + foot, its curl against the box, and schuil-08 turned to run up the side + from the box's head. Each stands off the brass as schuil-13's heads + stand off its bar: its foot stroke, 10 units up the tile, clears the + brass's inner stroke by about 17 units. */ + .sidebar:modal::before, + .sidebar:modal::after { + content: ""; + position: absolute; + width: calc(var(--u) * 300); + height: calc(var(--u) * 100); + background: #000; + mask-size: 100% 100%; + mask-repeat: no-repeat; + pointer-events: none; + } + + .sidebar:modal::before { + right: var(--fab); + bottom: calc(var(--u) * 50); + mask-image: url("../ornaments/schuil-07.svg"); + } + + /* Turned a quarter left about its foot's left end, which comes to sit at + the box's head, its foot to the right. */ + .sidebar:modal::after { + right: calc(var(--u) * (50 - 300)); + bottom: var(--fab); + transform-origin: 0 100%; + transform: rotate(-90deg); + mask-image: url("../ornaments/schuil-08.svg"); + } } /* Each label on the left with its select set flush to the right. */ @@ -410,8 +449,10 @@ main { .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 { + their curls point in at the number. The index's testaments are set the + same way. */ +.chapter-number, +.index h2 { display: flex; align-items: center; justify-content: center; @@ -419,11 +460,13 @@ main { font-size: 2rem; font-weight: 400; color: var(--text); - margin: 10rem 0 .75rem; + margin: 5rem 0 .75rem; } .chapter-number::before, -.chapter-number::after { +.chapter-number::after, +.index h2::before, +.index h2::after { content: ""; flex: none; width: 3.2em; @@ -436,7 +479,8 @@ main { mask: url("../ornaments/group-l-49.svg") center / contain no-repeat; } -.chapter-number::before { transform: scaleX(-1); } +.chapter-number::before, +.index h2::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 @@ -493,7 +537,41 @@ main { padding-left: 0; } -.index .count { display: none; } +/* A testament's name is longer than a chapter number, so on a phone it + keeps to one line and the flourishes narrow to make room. */ +.index h2 { white-space: nowrap; } + +.index h2::before, +.index h2::after { flex-shrink: 1; } + +/* Each book's chapter count set to the right, led to by a row of periods. + The count has a column three figures wide, and the periods run from its + side, so they line up from row to row. */ +.index li { + display: flex; + align-items: baseline; +} + +.index .count { + display: grid; + grid-template-columns: 1fr 3ch; + justify-items: end; + align-items: baseline; + flex: 1; + min-width: 0; + font-variant-numeric: tabular-nums; +} + +.index .count::before { + content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; + justify-self: stretch; + min-width: 0; + margin: 0 .4em; + overflow: hidden; + white-space: nowrap; + direction: rtl; + color: var(--text-muted); +} .book .p, .book .m, @@ -586,6 +664,8 @@ main { .schuil-14 { --w: 300; --h: 600; mask-image: url("../ornaments/schuil-14.svg"); } .schuil-15 { --w: 350; --h: 350; mask-image: url("../ornaments/schuil-15.svg"); } .schuil-16 { --w: 350; --h: 700; mask-image: url("../ornaments/schuil-16.svg"); } +.schuil-07 { --w: 300; --h: 100; mask-image: url("../ornaments/schuil-07.svg"); } +.schuil-08 { --w: 300; --h: 100; mask-image: url("../ornaments/schuil-08.svg"); } .schuil-brass-v { --w: 50; --h: 100; mask-image: url("../ornaments/schuil-brass-v.svg"); } /* Brass rule that stretches: two 8 unit strokes in a six point body, drawn @@ -631,6 +711,37 @@ main { text-transform: uppercase; } +/* On a phone the frame is only the panel round the title, moved up to the + head, at full width and full size. A pair of heads stands on it and + another hangs from it, each clear of the brass by about 17 units as the + sidebar's heads are. The title keeps to one line, smaller if the panel is + narrower than it. The space over the frame, with main's margin, matches + the space under it to the first testament: that one's 5rem margin and + the leading over its capitals. */ +.schuil-crest { display: none; } + +@media (max-width: 767.98px) { + .schuil { + --u: .22px; + min-height: 0; + margin-top: 4rem; + padding: calc(var(--u) * 700) 0 0; + } + + .schuil-ornaments :is(.schuil-tile, .schuil-rule, .schuil-rule-v):not(.schuil-panel, .schuil-crest) { + display: none; + } + + .schuil-crest { display: block; } + .schuil-panel { margin: calc(var(--u) * -325) 0 0 calc(var(--u) * -425); } + .schuil-rule.schuil-panel { margin-right: calc(var(--u) * -425); } + .schuil-title { + inset: calc(var(--u) * 150) calc(var(--u) * 50) auto; + font-size: min(var(--u) * 220, (100cqw - var(--u) * 100) / 7); + white-space: nowrap; + } +} + .app-version { margin: 3rem 0 .5rem; text-align: center; diff --git a/assets/ornaments/schuil-10-bl.svg b/assets/ornaments/schuil-10-bl.svg new file mode 100644 index 0000000..e1a2993 --- /dev/null +++ b/assets/ornaments/schuil-10-bl.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-10-br.svg b/assets/ornaments/schuil-10-br.svg new file mode 100644 index 0000000..622537b --- /dev/null +++ b/assets/ornaments/schuil-10-br.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-10-tl.svg b/assets/ornaments/schuil-10-tl.svg new file mode 100644 index 0000000..f88d438 --- /dev/null +++ b/assets/ornaments/schuil-10-tl.svg @@ -0,0 +1 @@ + diff --git a/assets/ornaments/schuil-10-tr.svg b/assets/ornaments/schuil-10-tr.svg new file mode 100644 index 0000000..23f4583 --- /dev/null +++ b/assets/ornaments/schuil-10-tr.svg @@ -0,0 +1 @@ + diff --git a/assets/sw.js b/assets/sw.js index 2ab0db5..14d36c3 100644 --- a/assets/sw.js +++ b/assets/sw.js @@ -29,6 +29,8 @@ const PRECACHE = [ './ornaments/mural-311a.svg', './ornaments/schuil-01.svg', './ornaments/schuil-06.svg', + './ornaments/schuil-07.svg', + './ornaments/schuil-08.svg', './ornaments/schuil-10.svg', './ornaments/schuil-11.svg', './ornaments/schuil-12.svg', @@ -37,10 +39,10 @@ const PRECACHE = [ './ornaments/schuil-15.svg', './ornaments/schuil-16.svg', './ornaments/schuil-brass-v.svg', - './ornaments/uniform-rule-corner-tl.svg', - './ornaments/uniform-rule-corner-tr.svg', - './ornaments/uniform-rule-corner-bl.svg', - './ornaments/uniform-rule-corner-br.svg', + './ornaments/schuil-10-tl.svg', + './ornaments/schuil-10-tr.svg', + './ornaments/schuil-10-bl.svg', + './ornaments/schuil-10-br.svg', './js/htmx.min.js' ].concat(TEMPLATE_URLS); diff --git a/assets/templates/home.njk b/assets/templates/home.njk index 964a4a6..994b691 100644 --- a/assets/templates/home.njk +++ b/assets/templates/home.njk @@ -47,13 +47,13 @@ {# The panel round the title. #} - - - - - - - + + + + + + + {# The band under the title: a curved corner off the junction, brass, and four heads joined in the middle. #} @@ -76,8 +76,15 @@ - - + + + + {# On a phone the panel stands alone, a pair of heads on its head and a + pair hung from its foot, their curls meeting in the middle. #} + + + +

Holy Bible