puck/trmnlc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase font sizes and disable anti-aliasing for e-ink readability

Browse source 
Adds Geist and Geist Mono to fontconfig with anti-aliasing disabled
and full hinting for crisp rendering on e-ink. All font sizes scaled
up 15% via a central FONT_SCALE factor for easy tuning.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kate Meerburg 2026-05-25 00:41:21 +02:00
parent 8a1fd31e10
commit 74284f74f2
2 changed files with 27 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
fonts.conf
View file

@ -3,7 +3,7 @@
<fontconfig> <fontconfig>
<match target="font"> <match target="font">
<test name="family" compare="eq" qual="any"><string>NicoClean</string><string>NicoPups</string><string>Inter Variable</string><string>Inter</string></test> <test name="family" compare="eq" qual="any"><string>NicoClean</string><string>NicoPups</string><string>Inter Variable</string><string>Inter</string><string>Geist</string><string>Geist Mono</string></test>
<edit name="antialias" mode="assign"><bool>false</bool></edit> <edit name="antialias" mode="assign"><bool>false</bool></edit>
<edit name="autohint" mode="assign"><bool>true</bool></edit> <edit name="autohint" mode="assign"><bool>true</bool></edit>
<edit name="rgba" mode="assign"><const>none</const></edit> <edit name="rgba" mode="assign"><const>none</const></edit>

50
src/todayview.tsx
View file

@ -68,6 +68,8 @@ export interface TodayConfig extends TodayData {
const FONT_BODY = '"Geist", system-ui, sans-serif'; const FONT_BODY = '"Geist", system-ui, sans-serif';
const FONT_MONO = '"Geist Mono", ui-monospace, monospace'; const FONT_MONO = '"Geist Mono", ui-monospace, monospace';
const FONT_SCALE = 1.15; // scale factor for all font sizes
const fs = (px: number) => px * FONT_SCALE;
const STYLES = ` const STYLES = `
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");
@ -144,7 +146,7 @@ const SectionTitle = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 10, fontSize: fs(10),
fontWeight: 600, fontWeight: 600,
letterSpacing: '0.14em', letterSpacing: '0.14em',
textTransform: 'uppercase', textTransform: 'uppercase',
@ -152,7 +154,7 @@ const SectionTitle = ({
{children} {children}
</span> </span>
{count != null && ( {count != null && (
<span style={{ fontFamily: FONT_MONO, fontSize: 10, color: 'var(--ink-3)' }}> <span style={{ fontFamily: FONT_MONO, fontSize: fs(10), color: 'var(--ink-3)' }}>
&middot; {count} &middot; {count}
</span> </span>
)} )}
@ -161,7 +163,7 @@ const SectionTitle = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9.5, fontSize: fs(9.5),
color: 'var(--ink-3)', color: 'var(--ink-3)',
letterSpacing: '0.08em', letterSpacing: '0.08em',
textTransform: 'uppercase', textTransform: 'uppercase',
@ -194,7 +196,7 @@ const FocusLine = ({ label, text }: { label: string; text: string }) => (
<div <div
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9.5, fontSize: fs(9.5),
fontWeight: 600, fontWeight: 600,
letterSpacing: '0.16em', letterSpacing: '0.16em',
color: 'var(--ink-3)', color: 'var(--ink-3)',
@ -205,7 +207,7 @@ const FocusLine = ({ label, text }: { label: string; text: string }) => (
<div <div
style={{ style={{
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 15.5, fontSize: fs(15.5),
lineHeight: 1.25, lineHeight: 1.25,
fontWeight: 450, fontWeight: 450,
letterSpacing: '-0.005em', letterSpacing: '-0.005em',
@ -232,7 +234,7 @@ const TopBar = ({ data }: { data: TodayData }) => {
<div <div
style={{ style={{
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 56, fontSize: fs(56),
lineHeight: 0.9, lineHeight: 0.9,
fontWeight: 500, fontWeight: 500,
letterSpacing: '-0.04em', letterSpacing: '-0.04em',
@ -241,13 +243,13 @@ const TopBar = ({ data }: { data: TodayData }) => {
{big} {big}
</div> </div>
<div style={{ display: 'flex', flexDirection: 'column', gap: 1, paddingTop: 4 }}> <div style={{ display: 'flex', flexDirection: 'column', gap: 1, paddingTop: 4 }}>
<div style={{ fontFamily: FONT_BODY, fontSize: 17, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.01em' }}> <div style={{ fontFamily: FONT_BODY, fontSize: fs(17), lineHeight: 1, fontWeight: 500, letterSpacing: '-0.01em' }}>
{DOW[d.getDay()]} {DOW[d.getDay()]}
</div> </div>
<div <div
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 10, fontSize: fs(10),
letterSpacing: '0.12em', letterSpacing: '0.12em',
textTransform: 'uppercase', textTransform: 'uppercase',
color: 'var(--ink-2)', color: 'var(--ink-2)',
@ -257,7 +259,7 @@ const TopBar = ({ data }: { data: TodayData }) => {
<div <div
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9, fontSize: fs(9),
letterSpacing: '0.18em', letterSpacing: '0.18em',
textTransform: 'uppercase', textTransform: 'uppercase',
color: 'var(--ink-3)', color: 'var(--ink-3)',
@ -358,7 +360,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
const p = (h * 60 - startMin) / rangeMin; const p = (h * 60 - startMin) / rangeMin;
return ( return (
<div key={h} style={{ position: 'absolute', top: `${p * 100}%`, left: 0, right: -1, borderTop: '1px solid var(--rule)' }}> <div key={h} style={{ position: 'absolute', top: `${p * 100}%`, left: 0, right: -1, borderTop: '1px solid var(--rule)' }}>
<span style={{ position: 'absolute', left: -2, top: -6, fontFamily: FONT_MONO, fontSize: 8, color: 'var(--ink-3)' }}> <span style={{ position: 'absolute', left: -2, top: -6, fontFamily: FONT_MONO, fontSize: fs(8), color: 'var(--ink-3)' }}>
{String(h).padStart(2, '0')} {String(h).padStart(2, '0')}
</span> </span>
</div> </div>
@ -388,7 +390,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
<div <div
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 10, fontSize: fs(10),
lineHeight: 1.2, lineHeight: 1.2,
fontWeight: 500, fontWeight: 500,
paddingTop: 2, paddingTop: 2,
@ -415,7 +417,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
<span <span
style={{ style={{
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 13.5, fontSize: fs(13.5),
fontWeight: current ? 600 : 500, fontWeight: current ? 600 : 500,
lineHeight: 1.15, lineHeight: 1.15,
letterSpacing: '-0.005em', letterSpacing: '-0.005em',
@ -431,7 +433,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
<div <div
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9.5, fontSize: fs(9.5),
color: 'var(--ink-3)', color: 'var(--ink-3)',
letterSpacing: '0.04em', letterSpacing: '0.04em',
marginTop: 1, marginTop: 1,
@ -463,7 +465,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
right: 0, right: 0,
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 8, fontSize: fs(8),
color: 'var(--ink-3)', color: 'var(--ink-3)',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
}}> }}>
@ -490,7 +492,7 @@ const OverdueBadge = ({ days }: { days: number }) => (
height: 16, height: 16,
border: '1.5px solid var(--ink)', border: '1.5px solid var(--ink)',
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9, fontSize: fs(9),
fontWeight: 600, fontWeight: 600,
lineHeight: 1, lineHeight: 1,
flex: '0 0 16px', flex: '0 0 16px',
@ -523,7 +525,7 @@ const Chores = ({ items }: { items: ChoreItem[] }) => (
gap: 9, gap: 9,
width: '100%', width: '100%',
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 13, fontSize: fs(13),
lineHeight: 1.2, lineHeight: 1.2,
fontWeight: 450, fontWeight: 450,
color: 'var(--ink)', color: 'var(--ink)',
@ -535,7 +537,7 @@ const Chores = ({ items }: { items: ChoreItem[] }) => (
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9, fontSize: fs(9),
color: 'var(--ink-3)', color: 'var(--ink-3)',
letterSpacing: '0.08em', letterSpacing: '0.08em',
textTransform: 'uppercase', textTransform: 'uppercase',
@ -599,7 +601,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 13, fontSize: fs(13),
fontWeight: 450, fontWeight: 450,
lineHeight: 1.2, lineHeight: 1.2,
textDecoration: t.done ? 'line-through' : 'none', textDecoration: t.done ? 'line-through' : 'none',
@ -611,7 +613,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9, fontSize: fs(9),
color: 'var(--ink-3)', color: 'var(--ink-3)',
letterSpacing: '0.08em', letterSpacing: '0.08em',
textTransform: 'uppercase', textTransform: 'uppercase',
@ -626,7 +628,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 10, fontSize: fs(10),
color: 'var(--ink-2)', color: 'var(--ink-2)',
fontVariantNumeric: 'tabular-nums', fontVariantNumeric: 'tabular-nums',
}}> }}>
@ -663,7 +665,7 @@ const Tasks = ({
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontWeight: 700, fontWeight: 700,
fontSize: 14, fontSize: fs(14),
lineHeight: 1, lineHeight: 1,
transform: 'translateY(2px)', transform: 'translateY(2px)',
}}> }}>
@ -672,7 +674,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_BODY, fontFamily: FONT_BODY,
fontSize: 13, fontSize: fs(13),
fontWeight: 450, fontWeight: 450,
lineHeight: 1.2, lineHeight: 1.2,
textDecoration: 'underline', textDecoration: 'underline',
@ -687,7 +689,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 9, fontSize: fs(9),
color: 'var(--ink-3)', color: 'var(--ink-3)',
letterSpacing: '0.08em', letterSpacing: '0.08em',
textTransform: 'uppercase', textTransform: 'uppercase',
@ -703,7 +705,7 @@ const Tasks = ({
<span <span
style={{ style={{
fontFamily: FONT_MONO, fontFamily: FONT_MONO,
fontSize: 10, fontSize: fs(10),
color: 'var(--ink)', color: 'var(--ink)',
fontVariantNumeric: 'tabular-nums', fontVariantNumeric: 'tabular-nums',
padding: '1px 4px', padding: '1px 4px',