mark/bible
1
0 Fork 0
Code Releases Activity

Work

Browse Source
This commit is contained in:
mark committed 2026-10-25 23:49:06 -04:00
1 parent 29b49f3588
commit a0c36853a1
7 files changed
+170 -46
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/app.css
+144 -33
View File
@@ -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;