mark/bible
1
0 Fork 0
Code Releases Activity

update borders

Browse Source
This commit is contained in:
mark committed 2026-10-22 23:48:03 -04:00
1 parent 531a32e394
commit c66f9a1e2a
12 files changed
+378 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/app.css
+190 -5
View File
@@ -22,7 +22,11 @@
*::before,
*::after { box-sizing: border-box; }
/* 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. */
body {
display: flow-root;
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
@@ -74,19 +78,200 @@ sup {
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. */
.sidebar-shell {
--rule: 3px;
--corner: calc(var(--rule) * 6);
--inner: calc(var(--rule) * 2.5);
--run: calc(100% - var(--corner) * 2);
--margin: 1.5rem;
}
/* Over the text along the left edge, so the reading column stays centred on
the screen, with the same margin on every side. The dialog's own box has
no padding: a click that lands on it rather than on what is inside is a
click on the backdrop. */
.sidebar {
position: fixed;
inset: var(--margin) auto var(--margin) var(--margin);
z-index: 1;
width: auto;
height: auto;
max-height: none;
margin: 0;
padding: 0;
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(--background);
transition: opacity .15s ease-out;
}
/* Where the reading column has a margin beside it, the sidebar fills it, the
gap to the text the same as the margin round the rest. */
@media (min-width: 1200px) {
.sidebar {
width: calc((100% - var(--measure)) / 2 + var(--gutter) - var(--margin) * 2);
}
}
.sidebar-body { padding: calc(var(--corner) + 1rem); }
.sidebar::backdrop { background: rgb(0 0 0 / .3); }
/* Away from the top it fades out unless it is under the pointer. Focus does
not hold it: a select keeps focus after it is used, which would leave the
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
closes the dialog, stands in for the frame's bottom right corner. */
.sidebar-fab {
display: none;
width: 4rem;
height: 4rem;
padding: 0;
color: #000;
border: var(--rule) solid #000;
background: var(--background);
cursor: pointer;
}
.sidebar-fab::before {
content: "";
display: block;
width: 90%;
height: 90%;
margin: auto;
background: currentColor;
mask: url("../ornaments/mural-311a.svg") center / contain no-repeat;
}
.sidebar-fab:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.sidebar-open {
position: fixed;
right: max(var(--margin), env(safe-area-inset-right));
bottom: max(var(--margin), env(safe-area-inset-bottom));
z-index: 1;
transition: opacity .15s ease-out;
}
/* It fades out away from the top of the page but can still be tapped. Only a
real pointer brings it back on hover: a touch screen keeps :hover on
whatever was last tapped, which would leave it showing. */
.scrolled .sidebar-open:not(:focus-visible) { opacity: 0; }
@media (hover: hover) {
.scrolled .sidebar-open:hover { opacity: 1; }
}
.sidebar-close {
position: absolute;
right: 0;
bottom: 0;
}
@media (max-width: 767.98px) {
.sidebar-shell { --margin: 1rem; }
}
/* Without a margin beside the reading column to hold the sidebar, it waits
behind the button. Opened, it fills the screen less the margin all round,
clear of a notch or home indicator. */
@media (max-width: 1199.98px) {
.sidebar:not(:modal) { display: none; }
.sidebar-open,
.sidebar:modal .sidebar-close { display: block; }
.sidebar:modal {
inset: max(var(--margin), env(safe-area-inset-top))
max(var(--margin), env(safe-area-inset-right))
max(var(--margin), env(safe-area-inset-bottom))
max(var(--margin), env(safe-area-inset-left));
width: auto;
max-width: none;
}
}
.reference {
display: flex;
align-items: center;
gap: .25rem;
}
.reference-book {
font-weight: 700;
margin-right: .25rem;
}
/* A plain box in a hairline, square like the frame, with a small black
triangle in place of the system's arrow. */
.reference select {
appearance: none;
padding: .25rem 1.75rem .25rem .5rem;
font: inherit;
color: #000;
border: 1px solid #000;
border-radius: 0;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E")
right .5rem center / .625rem no-repeat,
var(--background);
cursor: pointer;
}
.reference select:focus-visible {
outline: 2px solid var(--focus);
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. */
a laptop, and a measure that grows a step with the screen beyond that. The
sidebar sizes itself from the same two values. */
:root { --gutter: .75rem; }
main {
margin: 1.5rem auto;
padding: 0 .75rem;
padding: 0 var(--gutter);
}
@media (min-width: 1200px) {
main { max-width: 760px; }
:root { --measure: 760px; }
main { max-width: var(--measure); }
}
@media (min-width: 1400px) {
main { max-width: 880px; }
:root { --measure: 880px; }
}
/* Only A-Z and a-z: the compiler puts a drop cap on a chapter only when it
@@ -196,7 +381,7 @@ main {
gap: .4em;
font-size: 2rem;
font-weight: 400;
color: var(--text-muted);
color: var(--text);
margin: 5rem 0 .75rem;
}