vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: the quote card's opening mark lands on the text — two things had it reading as a smudge in the corner rather than as the note's own quotation mark. The card clips its overflow, so hanging the glyph off the top edge never bled it past the corner; it just cut away the half carrying the ink. And a fixed right offset put what survived outside the text column, floating against the card's edge instead of lining up with the words it belongs to. So the whole glyph stays inside the card and is set against the very padding the note is set against — one custom property now, since nyt pads these cards more than the base theme does — and the top offset takes back the leading above the ink so the mark starts on the note's first line rather than below it.

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-09-20 07:46:30 +00:00
parent a0738f5fc5
commit 6449569b34
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.css
View File

@@ -5632,15 +5632,25 @@ body.has-player .chat-fab {
/* ── Quote cards — the note is the subject, on an accent wash ── */
.journal-card--quote {
padding: 0.9rem;
--journal-quote-pad: 0.9rem;
padding: var(--journal-quote-pad);
gap: 0.4rem;
background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}
/* Two things had this mark reading as a smudge in the corner rather than as
the note's own opening quote. The card clips its overflow, so hanging the
glyph off the top edge didn't bleed it past the corner — it cut away the
half that carries the ink. And a fixed offset put what was left outside the
text column, floating against the card's edge instead of lining up with the
words it belongs to. So: keep the whole glyph inside the card, and set it
against the same padding the note is set against. The leading above the ink
is what the top offset takes back, so the mark starts on the note's first
line rather than below it. */
.journal-card-quotemark {
position: absolute;
top: -0.5rem;
right: 0.4rem;
top: calc(var(--journal-quote-pad) - 0.75rem);
right: var(--journal-quote-pad);
font-family: var(--font-display, Georgia, "Times New Roman", serif);
font-size: 4.5rem;
line-height: 1;

3
src/themes/nyt.css
View File

@@ -310,7 +310,8 @@
}
[data-style="nyt"] .journal-card--quote,
[data-style="nyt"] .journal-card--text {
padding: 1.05rem;
--journal-quote-pad: 1.05rem;
padding: var(--journal-quote-pad);
}
/* ── App header — crisp masthead rule ────────────────────────────── */