/* =========================================================================== LOOKS — the other half of a theme. themes.css repaints; this reshapes. A theme says what color the page is; a look says what kind of page it is — what it is set in, how much air the lines have, whether the panels are cards with a shadow or nothing at all. The two are chosen separately because they answer different questions, and somebody who wants Midnight Blue does not necessarily want it as a card. Each look is one block of overrides on , layered over everything else, so the four hundred rules in styles.css stay as they are and a new look is a block rather than a sweep. "classic" is the app as it has always been and therefore holds nothing. =========================================================================== */ /* ---------- Paper ---------- A printed page. No cards, no shadows, no rounded corners: one hairline between things and a lot of room to breathe. For reading rather than for using — which is why the type is larger and the lines further apart than anywhere else here. */ html[data-look="paper"] body { background: var(--parchment); } html[data-look="paper"] .panel, html[data-look="paper"] .mode-card, html[data-look="paper"] .online-chat, html[data-look="paper"] .invite-bar, html[data-look="paper"] .marks-bar, html[data-look="paper"] .plan-strip, html[data-look="paper"] .reading-options, html[data-look="paper"] #scripture { background: transparent; border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); } html[data-look="paper"] .scripture { font-size: 1.12em; line-height: 1.85; max-width: 34rem; margin-inline: auto; } html[data-look="paper"] .verse { margin-block: .55rem; } html[data-look="paper"] .btn, html[data-look="paper"] select, html[data-look="paper"] input[type=text] { border-radius: 2px; box-shadow: none; } html[data-look="paper"] h2, html[data-look="paper"] h3 { font-weight: 600; letter-spacing: .01em; } /* ---------- Broadsheet ---------- A newspaper: condensed heads in small capitals, rules instead of boxes, and the text set tight and narrow the way a column is. Everything is closer together than anywhere else here, which is the point — a broadsheet fits a great deal on a page and expects you to read it. */ html[data-look="broadsheet"] { --radius: 0; } html[data-look="broadsheet"] body { font-family: "Times New Roman", Times, Georgia, serif; background: var(--parchment); } html[data-look="broadsheet"] h1, html[data-look="broadsheet"] h2, html[data-look="broadsheet"] h3, html[data-look="broadsheet"] .hub-head h2 { font-variant-caps: small-caps; letter-spacing: .06em; font-weight: 700; border-bottom: 3px double var(--line); padding-bottom: .2rem; } html[data-look="broadsheet"] .panel, html[data-look="broadsheet"] .mode-card, html[data-look="broadsheet"] .invite-bar, html[data-look="broadsheet"] .marks-bar, html[data-look="broadsheet"] .plan-strip, html[data-look="broadsheet"] .online-chat { border-radius: 0; box-shadow: none; border: 1px solid var(--line); background: var(--card); } html[data-look="broadsheet"] .scripture { font-size: 1.02em; line-height: 1.5; text-align: justify; hyphens: auto; } html[data-look="broadsheet"] .verse { margin-block: .2rem; } html[data-look="broadsheet"] .btn { border-radius: 0; font-size: .88rem; } html[data-look="broadsheet"] .vn { font-weight: 700; } /* ---------- Typewriter ---------- Monospace, flat, and deliberately a little severe: everything the same width, nothing rounded, no color doing any work that the words are not. Some people think better in a fixed pitch — it slows the eye down. */ html[data-look="typewriter"] body { font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: -.01em; } html[data-look="typewriter"] .scripture { font-size: .96em; line-height: 1.75; max-width: 38rem; margin-inline: auto; } html[data-look="typewriter"] .panel, html[data-look="typewriter"] .mode-card, html[data-look="typewriter"] .invite-bar, html[data-look="typewriter"] .marks-bar, html[data-look="typewriter"] .plan-strip, html[data-look="typewriter"] .online-chat, html[data-look="typewriter"] .btn, html[data-look="typewriter"] select, html[data-look="typewriter"] input[type=text] { border-radius: 0; box-shadow: none; border: 1px solid var(--line); } html[data-look="typewriter"] .btn { text-transform: lowercase; font-size: .85rem; } html[data-look="typewriter"] h2, html[data-look="typewriter"] h3 { text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; } /* ---------- Soft ---------- The opposite of Broadsheet: sans-serif, generous corners, gentle shadows, and space around everything. What a phone app looks like now, for people to whom the serif and the parchment read as fussy. */ html[data-look="soft"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-look="soft"] .panel, html[data-look="soft"] .mode-card, html[data-look="soft"] .invite-bar, html[data-look="soft"] .marks-bar, html[data-look="soft"] .plan-strip, html[data-look="soft"] .online-chat, html[data-look="soft"] #scripture { border-radius: 20px; border: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .10); padding: 1rem 1.1rem; } html[data-look="soft"] .btn, html[data-look="soft"] select, html[data-look="soft"] input[type=text] { border-radius: 999px; padding-inline: 1rem; } html[data-look="soft"] .scripture { font-size: 1.05em; line-height: 1.75; } html[data-look="soft"] h2, html[data-look="soft"] h3 { font-weight: 700; letter-spacing: -.01em; } /* ---------- Large print ---------- Not a style so much as a need. Bigger than the A+ button reaches, heavier strokes, more space between lines, and controls big enough to hit without aiming. Everything else here is a preference; this one is the difference between reading and not. */ html[data-look="largeprint"] .scripture { font-size: 1.45em; line-height: 2; letter-spacing: .01em; max-width: 30rem; margin-inline: auto; } html[data-look="largeprint"] .verse { margin-block: .8rem; } html[data-look="largeprint"] .vn { font-size: .8em; font-weight: 700; } html[data-look="largeprint"] .btn, html[data-look="largeprint"] select { font-size: 1.05rem; padding: .6rem .9rem; min-height: 2.9rem; } html[data-look="largeprint"] h2 { font-size: 1.6rem; } html[data-look="largeprint"] h3 { font-size: 1.25rem; } html[data-look="largeprint"] .hint, html[data-look="largeprint"] .muted { font-size: 1rem; } /* ---------- Two columns ---------- A chapter set as a printed Bible sets it. On a wide screen a single column of text runs to a line so long the eye loses its place coming back; two short ones read faster. Collapses to one below 900px, because a column of four words is worse than a long line. */ html[data-look="columns"] .scripture { column-count: 2; column-gap: 2.4rem; column-rule: 1px solid var(--line); max-width: 62rem; margin-inline: auto; text-align: justify; hyphens: auto; line-height: 1.6; } html[data-look="columns"] .verse { break-inside: avoid-column; margin-block: .3rem; } html[data-look="columns"] .panel, html[data-look="columns"] .marks-bar, html[data-look="columns"] .invite-bar { max-width: 62rem; margin-inline: auto; } @media (max-width: 900px) { html[data-look="columns"] .scripture { column-count: 1; text-align: left; } } /* ---------- Quiet ---------- For reading a long stretch without being spoken to. The furniture is still there and still works, but it waits: dimmed until the pointer or a finger comes near, so what is bright on the screen is the chapter. Nothing is hidden — a control you cannot find is worse than one you can see — it is only turned down. */ html[data-look="quiet"] .reading-options, html[data-look="quiet"] .marks-bar, html[data-look="quiet"] .theme-bar, html[data-look="quiet"] .verse-nav { opacity: .25; transition: opacity .18s ease; } html[data-look="quiet"] .reading-options:hover, html[data-look="quiet"] .marks-bar:hover, html[data-look="quiet"] .theme-bar:hover, html[data-look="quiet"] .verse-nav:hover, html[data-look="quiet"] .reading-options:focus-within, html[data-look="quiet"] .marks-bar:focus-within { opacity: 1; } html[data-look="quiet"] .scripture { font-size: 1.1em; line-height: 1.9; max-width: 33rem; margin-inline: auto; } html[data-look="quiet"] .panel, html[data-look="quiet"] #scripture { border: 0; box-shadow: none; background: transparent; } /* a finger has no hover, so on a touch screen they simply stay legible */ @media (hover: none) { html[data-look="quiet"] .reading-options, html[data-look="quiet"] .marks-bar, html[data-look="quiet"] .theme-bar, html[data-look="quiet"] .verse-nav { opacity: .7; } } /* ---------- Manuscript ---------- No verse numbers, no cards, no breaks: the chapter as a single piece of prose, which is how it was written and how it was heard. The numbers are a finding aid from the sixteenth century and they change how a paragraph reads — this look sets them aside without turning the setting off, so they come straight back with the next look. */ html[data-look="manuscript"] .scripture .vn { display: none; } html[data-look="manuscript"] .scripture { font-size: 1.12em; line-height: 1.95; max-width: 34rem; margin-inline: auto; text-indent: 1.4rem; } html[data-look="manuscript"] .verse { display: inline; margin: 0; } html[data-look="manuscript"] .verse::after { content: ' '; } html[data-look="manuscript"] .panel, html[data-look="manuscript"] #scripture { border: 0; box-shadow: none; background: transparent; } html[data-look="manuscript"] h2 { font-variant-caps: small-caps; letter-spacing: .05em; } /* ---------- Wide ---------- The other direction: no measure at all, for a big screen where somebody would rather see forty verses at once than read a narrow column. Small type, tight lines, everything the width of the window. */ html[data-look="wide"] .scripture, html[data-look="wide"] .panel, html[data-look="wide"] .marks-bar, html[data-look="wide"] .invite-bar, html[data-look="wide"] .online-chat { max-width: none; } html[data-look="wide"] .scripture { font-size: .96em; line-height: 1.5; } html[data-look="wide"] .verse { margin-block: .15rem; } /* =========================================================================== More looks. Each one answers "what kind of page is this" differently — a pocket Bible, a ledger, a notebook, a poster — rather than repainting the same page. Where one needs the verses to become blocks (cards, bubbles, rows) it says so, because .verse is a div in flow layout and inline in focus, and a look that assumed either would break the other. =========================================================================== */ /* ---------- Pocket ---------- The small Bible somebody carries: a narrow measure, small type, thin margins, and as little furniture as will still work. */ html[data-look="pocket"] .scripture { font-size: .88em; line-height: 1.55; max-width: 24rem; margin-inline: auto; } html[data-look="pocket"] .verse { margin-block: .12rem; } html[data-look="pocket"] .vn { font-size: .62em; } html[data-look="pocket"] .panel, html[data-look="pocket"] #scripture { padding: .5rem .6rem; } html[data-look="pocket"] .btn { font-size: .8rem; padding: .25rem .5rem; } /* ---------- Study desk ---------- Text on the left, a wide empty right margin to think in. The margin is not decoration: it is where a shared note lands, so what somebody wrote sits beside the verse rather than under it. */ html[data-look="desk"] .scripture { max-width: 60rem; margin-inline: auto; } html[data-look="desk"] .verse-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.6fr); gap: 1.2rem; align-items: start; } html[data-look="desk"] .verse-wrap > .verse { grid-column: 1; } html[data-look="desk"] .verse-wrap > .verse-note { grid-column: 2; grid-row: 1 / span 9; margin: 0; font-size: .82rem; border-left: 2px solid var(--line); background: transparent; } @media (max-width: 820px) { html[data-look="desk"] .verse-wrap { display: block; } html[data-look="desk"] .verse-wrap > .verse-note { border-left-width: 3px; } } /* ---------- Notebook ---------- Ruled paper. The lines are drawn behind the text at the line height, so the words sit on them rather than near them, and a red margin rule down the left the way an exercise book has. */ html[data-look="notebook"] .scripture { line-height: 2; background-image: repeating-linear-gradient(var(--parchment), var(--parchment) calc(2em - 1px), var(--line) 2em); background-attachment: local; padding-left: 2.6rem; border-left: 2px solid var(--wine); max-width: 40rem; margin-inline: auto; } html[data-look="notebook"] .verse { margin: 0; } html[data-look="notebook"] #scripture { border: 0; box-shadow: none; } /* ---------- Ledger ---------- A verse to a row, banded, the way a table of accounts is set. Nothing to do with beauty: banding is the fastest way to keep your place across a wide line, which is why every ledger ever ruled has it. */ html[data-look="ledger"] .verse { display: block; padding: .3rem .6rem; margin: 0; border-bottom: 1px solid var(--line); } html[data-look="ledger"] .verse:nth-child(odd) { background: var(--parchment-2); } html[data-look="ledger"] .vn { display: inline-block; min-width: 2.2rem; font-weight: 700; opacity: .6; } html[data-look="ledger"] .scripture { line-height: 1.5; } html[data-look="ledger"] #scripture { padding: 0; overflow: hidden; } /* ---------- Bubbles ---------- Each verse as a message. It reads as a conversation, which several of the epistles very nearly are, and it makes a long chapter feel like something arriving a piece at a time rather than a wall. */ html[data-look="bubbles"] .verse { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: .55rem .8rem; margin: .45rem 0; max-width: 40rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); } html[data-look="bubbles"] .vn { display: block; font-size: .68em; opacity: .6; margin-bottom: .1rem; } html[data-look="bubbles"] #scripture { background: transparent; border: 0; box-shadow: none; } /* ---------- Cards ---------- One verse to a card, laid out as many across as the screen will take. For picking a verse out rather than reading a chapter through — the shape you want when you are looking for the one that says the thing. */ html[data-look="cards"] .scripture { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; } html[data-look="cards"] .verse { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; margin: 0; font-size: .92em; } html[data-look="cards"] .vn { display: block; font-weight: 700; opacity: .55; margin-bottom: .15rem; } html[data-look="cards"] #scripture { background: transparent; border: 0; box-shadow: none; } /* ---------- Magazine ---------- A drop capital on the first verse, wide margins, and generous leading. The opening letter is doing what it has always done: telling the eye where the piece begins. */ html[data-look="magazine"] .scripture { max-width: 38rem; margin-inline: auto; font-size: 1.06em; line-height: 1.8; } html[data-look="magazine"] .verse:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .82; padding: .1rem .5rem 0 0; font-weight: 700; color: var(--gold); } html[data-look="magazine"] .vn { font-size: .62em; vertical-align: super; opacity: .5; } html[data-look="magazine"] h2 { font-size: 1.9rem; letter-spacing: -.02em; } /* ---------- Codex ---------- Two pages and a gutter, as a bound book falls open. The rule down the middle is the spine; the outer margins are wider than the inner ones, because that is how a book is set and it is why a book is comfortable. */ html[data-look="codex"] .scripture { column-count: 2; column-gap: 3.5rem; column-rule: 2px solid var(--line); max-width: 58rem; margin-inline: auto; padding: 1rem 2.4rem; background: var(--card); border-radius: 4px; box-shadow: inset 0 0 40px rgba(0,0,0,.05); text-align: justify; hyphens: auto; } html[data-look="codex"] .verse { break-inside: avoid-column; margin-block: .25rem; } @media (max-width: 900px) { html[data-look="codex"] .scripture { column-count: 1; padding: 1rem; text-align: left; } } /* ---------- Poster ---------- Very large type, a few words at a time. Made for the focus layout and for a screen somebody is reading from across a room — a phone propped on a table, or a television in a hall. */ html[data-look="poster"] .scripture { font-size: 1.9em; line-height: 1.45; font-weight: 600; max-width: 26rem; margin-inline: auto; text-align: center; } html[data-look="poster"] .vn { display: none; } html[data-look="poster"] .verse { margin-block: 1rem; } html[data-look="poster"] .panel, html[data-look="poster"] #scripture { border: 0; box-shadow: none; background: transparent; } /* ---------- Terminal ---------- Fixed pitch, verse numbers set as line numbers in a gutter, and nothing rounded. It reads like something being printed out. */ html[data-look="terminal"] body { font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; } html[data-look="terminal"] .verse { display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; margin: 0; padding: .1rem 0; border: 0; } html[data-look="terminal"] .vn { text-align: right; opacity: .45; border-right: 1px solid var(--line); padding-right: .5rem; } html[data-look="terminal"] .scripture { font-size: .92em; line-height: 1.6; } html[data-look="terminal"] .btn, html[data-look="terminal"] select { border-radius: 0; font-family: inherit; font-size: .82rem; } /* ---------- Indexed ---------- The verse number is the point: big, in a column of its own, so somebody working from a list of references can find 17 without reading 1 to 16. */ html[data-look="indexed"] .verse { display: grid; grid-template-columns: 2.6rem 1fr; gap: .7rem; margin-block: .35rem; align-items: baseline; } html[data-look="indexed"] .vn { font-size: 1.15em; font-weight: 700; color: var(--gold); text-align: right; opacity: 1; } html[data-look="indexed"] .scripture { max-width: 42rem; margin-inline: auto; line-height: 1.65; } /* ---------- Airy ---------- One thing at a time with a great deal of nothing around it. For a slow read, or for anybody who finds a dense page hard to settle into. */ html[data-look="airy"] .scripture { font-size: 1.08em; line-height: 2.1; max-width: 30rem; margin-inline: auto; } html[data-look="airy"] .verse { margin-block: 1.1rem; } html[data-look="airy"] .panel, html[data-look="airy"] .marks-bar, html[data-look="airy"] .invite-bar { margin-block: 1.2rem; padding: .9rem 1rem; } html[data-look="airy"] #scripture { border: 0; box-shadow: none; background: transparent; } /* ---------- Blueprint ---------- Squared paper under the text and hard edges over it. A drawing-office look, for people who like a grid to hang things on. */ html[data-look="blueprint"] body { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; background-attachment: fixed; } html[data-look="blueprint"] .panel, html[data-look="blueprint"] .marks-bar, html[data-look="blueprint"] #scripture, html[data-look="blueprint"] .invite-bar { border-radius: 0; border: 1px solid var(--ink-soft); box-shadow: none; background: var(--card); } html[data-look="blueprint"] .vn { font-family: monospace; } html[data-look="blueprint"] h2, html[data-look="blueprint"] h3 { text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; } /* ---------- Centred ---------- Everything on the middle line — headings, controls, and the text itself. Unusual for prose and deliberately so: it reads like an inscription, which suits a psalm better than it suits Chronicles. */ html[data-look="centred"] .scripture { text-align: center; max-width: 32rem; margin-inline: auto; line-height: 1.85; } html[data-look="centred"] .verse { margin-block: .7rem; } html[data-look="centred"] .vn { display: block; font-size: .62em; opacity: .5; } html[data-look="centred"] .marks-bar, html[data-look="centred"] .reading-options { justify-content: center; } html[data-look="centred"] h2, html[data-look="centred"] h3 { text-align: center; } /* ---------- Contrast ---------- Not a mood: heavier strokes, harder edges, a thicker focus ring. For a screen in sunlight, or eyes that want the letters to stop being polite. */ html[data-look="contrast"] .scripture { font-weight: 600; letter-spacing: .005em; line-height: 1.7; } html[data-look="contrast"] .vn { font-weight: 800; opacity: .95; } html[data-look="contrast"] .panel, html[data-look="contrast"] .marks-bar, html[data-look="contrast"] #scripture, html[data-look="contrast"] .btn, html[data-look="contrast"] select { border: 2px solid var(--ink); box-shadow: none; } html[data-look="contrast"] .btn { font-weight: 700; } html[data-look="contrast"] :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* =========================================================================== Looks that move the furniture, not the type. The ones above mostly reset the words. These change where everything else goes — the toolbars to the bottom or the side or out of the way entirely, the numbers into the margin, the page into screens. In all of them the rule is the same and it is the only rule that matters: whatever else moves, the Scripture keeps the middle and the light. =========================================================================== */ /* ---------- Bottom bar ---------- Every control to a bar along the foot of the screen, where a thumb already is, and the whole top of the page to the chapter. This is how a phone is actually held, and it is the top of the screen that is hardest to reach. */ html[data-look="bottombar"] #readerHl, html[data-look="bottombar"] .reading-options { position: fixed; left: 0; right: 0; z-index: 60; background: var(--card); border-top: 1px solid var(--line); padding: .3rem .5rem; margin: 0; overflow-x: auto; white-space: nowrap; box-shadow: 0 -4px 14px rgba(0,0,0,.08); } html[data-look="bottombar"] .reading-options { bottom: calc(var(--exitbar) + 2.6rem); } html[data-look="bottombar"] #readerHl { bottom: var(--exitbar); } html[data-look="bottombar"] .marks-bar, html[data-look="bottombar"] .theme-bar { border: 0; background: transparent; margin: 0; } html[data-look="bottombar"] #view-reader { padding-bottom: 7rem; } /* ---------- Side rail ---------- The same idea for a wide screen: the controls stand in a narrow column down the left, and the chapter has the rest. Nothing above the text at all, so the first line begins where the page begins. */ @media (min-width: 950px) { html[data-look="siderail"] #view-reader { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.4rem; align-items: start; } html[data-look="siderail"] .reading-options, html[data-look="siderail"] #readerHl { grid-column: 1; position: sticky; top: calc(var(--exitbar) + .6rem); display: flex; flex-direction: column; align-items: stretch; gap: .35rem; } html[data-look="siderail"] #readerHl { top: calc(var(--exitbar) + 12rem); } html[data-look="siderail"] .marks-bar { flex-wrap: wrap; } html[data-look="siderail"] .scripture, html[data-look="siderail"] #scripture, html[data-look="siderail"] .row-actions { grid-column: 2; } html[data-look="siderail"] .ro-group { flex-direction: column; } } /* ---------- Immersive ---------- Nothing but the chapter until you ask. The furniture is there and reachable — it comes back the moment the pointer goes near the top, or on a tap — but at rest the screen holds Scripture and nothing else. */ html[data-look="immersive"] .reading-options, html[data-look="immersive"] #readerHl, html[data-look="immersive"] .row-actions { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .2s ease, opacity .2s ease; } html[data-look="immersive"] #view-reader:hover .reading-options, html[data-look="immersive"] #view-reader:hover #readerHl, html[data-look="immersive"] #view-reader:focus-within .reading-options, html[data-look="immersive"] #view-reader:focus-within #readerHl, html[data-look="immersive"] #view-reader:hover .row-actions { max-height: 20rem; opacity: 1; } html[data-look="immersive"] .scripture { font-size: 1.1em; line-height: 1.85; max-width: 36rem; margin-inline: auto; } html[data-look="immersive"] #scripture { border: 0; box-shadow: none; background: transparent; } /* a finger cannot hover, so on a touch screen they stay — small, but there */ @media (hover: none) { html[data-look="immersive"] .reading-options, html[data-look="immersive"] #readerHl { max-height: 20rem; opacity: .8; } } /* ---------- Marginalia ---------- Verse numbers hang outside the text, in the margin where a printed Bible puts them. The column of prose is then unbroken — no numerals interrupting a sentence — which is most of what makes a page of Scripture readable. */ html[data-look="marginalia"] .scripture { max-width: 34rem; margin-inline: auto; padding-left: 3rem; line-height: 1.8; } html[data-look="marginalia"] .verse { position: relative; margin-block: .5rem; } html[data-look="marginalia"] .vn { position: absolute; left: -3rem; width: 2.4rem; text-align: right; font-size: .72em; opacity: .55; } /* ---------- Hanging ---------- Each verse begins flush and its later lines are indented, the way an entry in a dictionary or a hymn book is set. It makes the start of every verse findable at a glance without a number doing the work. */ html[data-look="hanging"] .verse { display: block; padding-left: 1.6rem; text-indent: -1.6rem; margin-block: .45rem; } html[data-look="hanging"] .scripture { max-width: 36rem; margin-inline: auto; line-height: 1.7; } html[data-look="hanging"] .vn { font-weight: 700; opacity: .6; } /* ---------- Timeline ---------- A rail down the side with a mark at each verse. Narrative books read as a sequence of things that happened, and this says so — useful in Acts or Kings, faintly absurd in Proverbs, which is the reader's own business. */ html[data-look="timeline"] .scripture { max-width: 38rem; margin-inline: auto; border-left: 2px solid var(--line); padding-left: 1.6rem; } html[data-look="timeline"] .verse { position: relative; display: block; margin-block: .7rem; } html[data-look="timeline"] .verse::before { content: ''; position: absolute; left: -2.05rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--parchment); } html[data-look="timeline"] .vn { font-size: .7em; opacity: .55; } /* ---------- One at a time ---------- A screen to a verse, and the next one a swipe away. Scroll snapping does the work, so it is the ordinary page underneath — nothing is hidden, it is only spaced so that one verse is what fits. */ html[data-look="paged"] #scripture { scroll-snap-type: y mandatory; max-height: 72vh; overflow-y: auto; } html[data-look="paged"] .verse { scroll-snap-align: center; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; font-size: 1.25em; line-height: 1.7; text-align: center; max-width: 30rem; margin-inline: auto; } html[data-look="paged"] .vn { display: block; font-size: .55em; opacity: .5; margin-bottom: .6rem; } /* ---------- Spotlight ---------- The verse in focus is bright and the rest are turned down. For reading with somebody else, or slowly: the eye is told where it is without the page moving under it. */ html[data-look="spotlight"] .verse { opacity: .38; transition: opacity .2s ease; } html[data-look="spotlight"] .verse.cur, html[data-look="spotlight"] .verse.focus, html[data-look="spotlight"] .verse:hover { opacity: 1; } html[data-look="spotlight"] .scripture { font-size: 1.05em; line-height: 1.8; max-width: 34rem; margin-inline: auto; } /* ---------- Interlinear ---------- Wide open lines, with room between them to write. Made for a printed page somebody is going to annotate, and for anybody whose eye needs a clear corridor to travel along. */ html[data-look="interlinear"] .scripture { line-height: 2.6; font-size: 1.02em; max-width: 36rem; margin-inline: auto; } html[data-look="interlinear"] .verse { margin-block: .9rem; border-bottom: 1px dotted var(--line); padding-bottom: .5rem; } html[data-look="interlinear"] .vn { font-size: .68em; opacity: .5; } /* ---------- Running head ---------- The book and chapter stay at the top of the screen as the page moves under them, the way the running head of a printed Bible tells you where you are halfway down a column. */ html[data-look="runninghead"] #view-reader > .hub-head, html[data-look="runninghead"] #view-reader > h2 { position: sticky; top: var(--exitbar); z-index: 40; background: var(--parchment); border-bottom: 1px solid var(--line); padding: .35rem 0; margin: 0 0 .5rem; font-variant-caps: small-caps; letter-spacing: .05em; } html[data-look="runninghead"] .scripture { max-width: 36rem; margin-inline: auto; line-height: 1.75; } /* ---------- Cinema ---------- Letterboxed: a wide dark band above and below, the text in the middle, set large. For a screen at the front of a room, or a phone lying flat while somebody reads aloud. */ html[data-look="cinema"] #scripture { padding: 3.5rem 1rem; border-radius: 0; border: 0; box-shadow: inset 0 90px 60px -60px rgba(0,0,0,.35), inset 0 -90px 60px -60px rgba(0,0,0,.35); } html[data-look="cinema"] .scripture { font-size: 1.5em; line-height: 1.6; max-width: 34rem; margin-inline: auto; text-align: center; } html[data-look="cinema"] .vn { display: none; } html[data-look="cinema"] .verse { margin-block: .8rem; } /* ---------- Lede ---------- The first verse set large, as a newspaper sets its opening sentence, and the rest at reading size. It gives a chapter a way in — the eye lands somewhere on purpose rather than at the top-left by default. */ html[data-look="lede"] .verse:first-of-type { font-size: 1.45em; line-height: 1.5; font-weight: 600; margin-bottom: .8rem; } html[data-look="lede"] .scripture { max-width: 36rem; margin-inline: auto; line-height: 1.7; } /* ---------- Compare ready ---------- Half the width kept clear on a wide screen, so a second translation has somewhere to go without the page rearranging itself when it arrives. */ @media (min-width: 1000px) { html[data-look="compareready"] .scripture, html[data-look="compareready"] .cmp-col { max-width: 34rem; } html[data-look="compareready"] #scripture { display: flex; gap: 2rem; justify-content: center; } html[data-look="compareready"] .scripture { flex: 1 1 34rem; } } /* ---------- Tabular ---------- Verse numbers in a fixed left column and the text ragged-right beside them, so every line begins on the same vertical. It reads like a reference work, which for looking things up is exactly right. */ html[data-look="tabular"] .verse { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; margin: 0; padding: .25rem 0; align-items: baseline; } html[data-look="tabular"] .verse + .verse { border-top: 1px solid var(--line); } html[data-look="tabular"] .vn { text-align: right; font-variant-numeric: tabular-nums; opacity: .6; } html[data-look="tabular"] .scripture { max-width: 44rem; margin-inline: auto; line-height: 1.6; } /* ---------- Scroll ---------- No page at all: no card, no border, no end — the chapter as a continuous band of text down the middle of the screen, the way a scroll gives you no edges to stop at. */ html[data-look="scroll"] .panel, html[data-look="scroll"] #scripture, html[data-look="scroll"] .marks-bar, html[data-look="scroll"] .reading-options { border: 0; box-shadow: none; background: transparent; border-radius: 0; } html[data-look="scroll"] .scripture { max-width: 32rem; margin-inline: auto; line-height: 2; font-size: 1.06em; } html[data-look="scroll"] .verse { margin-block: .6rem; } html[data-look="scroll"] .vn { font-size: .6em; opacity: .4; vertical-align: super; }