rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 20 Wiki Activity

An interface font and a reading font in Settings (#359)

Browse Source 
The font chosen before is the interface's, under the same cookie, so a
choice already made stays as it was. The reading font, ipx_rfont, sets
an item's title and text and is the interface's until chosen. Text read
in a serif gets a line height of 1.75 for 1.65, whichever setting put
it there. Each face's stack is a custom property, used by both.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-25 01:35:02 +00:00
parent 75afaa291c
commit 4249393f2a
7 changed files with 82 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/app.css
View File

@@ -1653,14 +1653,40 @@ body:has(#player.on) #status{padding-bottom:3px}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(/fonts/opendyslexic-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:OpenDyslexic;src:url(/fonts/opendyslexic-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* Each face once, for the interface's font (data-font) and the reading font (data-rfont) both. */
:root{
--f-inter:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--f-system:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Noto Sans",sans-serif;
--f-atkinson:"Atkinson Hyperlegible Next",system-ui,sans-serif;
--f-lexend:Lexend,system-ui,sans-serif;
--f-literata:Literata,Georgia,serif;
--f-source:"Source Serif 4",Georgia,serif;
--f-dyslexic:OpenDyslexic,system-ui,sans-serif;
--f-serif:Charter,"Iowan Old Style","Bitstream Charter",Georgia,Cambria,"Noto Serif",serif;
--f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
}
/* Last in the file: each rule ties with a theme's own body font, and the later one wins. No rule
for the default, which leaves each theme as it is. */
:root[data-font="inter"] body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-font="system"] body{font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,"Noto Sans",sans-serif}
:root[data-font="atkinson"] body{font-family:"Atkinson Hyperlegible Next",system-ui,sans-serif}
:root[data-font="lexend"] body{font-family:Lexend,system-ui,sans-serif}
:root[data-font="literata"] body{font-family:Literata,Georgia,serif}
:root[data-font="source"] body{font-family:"Source Serif 4",Georgia,serif}
:root[data-font="dyslexic"] body{font-family:OpenDyslexic,system-ui,sans-serif}
:root[data-font="serif"] body{font-family:Charter,"Iowan Old Style","Bitstream Charter",Georgia,Cambria,"Noto Serif",serif}
:root[data-font="mono"] body{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace}
:root[data-font="inter"] body{font-family:var(--f-inter)}
:root[data-font="system"] body{font-family:var(--f-system)}
:root[data-font="atkinson"] body{font-family:var(--f-atkinson)}
:root[data-font="lexend"] body{font-family:var(--f-lexend)}
:root[data-font="literata"] body{font-family:var(--f-literata)}
:root[data-font="source"] body{font-family:var(--f-source)}
:root[data-font="dyslexic"] body{font-family:var(--f-dyslexic)}
:root[data-font="serif"] body{font-family:var(--f-serif)}
:root[data-font="mono"] body{font-family:var(--f-mono)}
/* The reading font: an item's title and text. Without one they are in the interface's. */
:root[data-rfont="inter"] :is(.dt,.dbody){font-family:var(--f-inter)}
:root[data-rfont="system"] :is(.dt,.dbody){font-family:var(--f-system)}
:root[data-rfont="atkinson"] :is(.dt,.dbody){font-family:var(--f-atkinson)}
:root[data-rfont="lexend"] :is(.dt,.dbody){font-family:var(--f-lexend)}
:root[data-rfont="literata"] :is(.dt,.dbody){font-family:var(--f-literata)}
:root[data-rfont="source"] :is(.dt,.dbody){font-family:var(--f-source)}
:root[data-rfont="dyslexic"] :is(.dt,.dbody){font-family:var(--f-dyslexic)}
:root[data-rfont="serif"] :is(.dt,.dbody){font-family:var(--f-serif)}
:root[data-rfont="mono"] :is(.dt,.dbody){font-family:var(--f-mono)}
/* A serif wants more room between its lines than a sans: the text read in one, whether chosen for
reading or the interface's and not overruled, gets it, on a phone too. */
:root:is([data-rfont="literata"],[data-rfont="source"],[data-rfont="serif"],
[data-font="literata"]:not([data-rfont]),[data-font="source"]:not([data-rfont]),[data-font="serif"]:not([data-rfont])) .dbody{line-height:1.75}