Increase font sizes and disable anti-aliasing for e-ink readability
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
parent
8a1fd31e10
commit
74284f74f2
2 changed files with 27 additions and 25 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<fontconfig>
|
||||
|
||||
<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="autohint" mode="assign"><bool>true</bool></edit>
|
||||
<edit name="rgba" mode="assign"><const>none</const></edit>
|
||||
|
|
|
|||
|
|
@ -68,6 +68,8 @@ export interface TodayConfig extends TodayData {
|
|||
|
||||
const FONT_BODY = '"Geist", system-ui, sans-serif';
|
||||
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 = `
|
||||
@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
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 10,
|
||||
fontSize: fs(10),
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.14em',
|
||||
textTransform: 'uppercase',
|
||||
|
|
@ -152,7 +154,7 @@ const SectionTitle = ({
|
|||
{children}
|
||||
</span>
|
||||
{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)' }}>
|
||||
· {count}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -161,7 +163,7 @@ const SectionTitle = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9.5,
|
||||
fontSize: fs(9.5),
|
||||
color: 'var(--ink-3)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
|
|
@ -194,7 +196,7 @@ const FocusLine = ({ label, text }: { label: string; text: string }) => (
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9.5,
|
||||
fontSize: fs(9.5),
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.16em',
|
||||
color: 'var(--ink-3)',
|
||||
|
|
@ -205,7 +207,7 @@ const FocusLine = ({ label, text }: { label: string; text: string }) => (
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 15.5,
|
||||
fontSize: fs(15.5),
|
||||
lineHeight: 1.25,
|
||||
fontWeight: 450,
|
||||
letterSpacing: '-0.005em',
|
||||
|
|
@ -232,7 +234,7 @@ const TopBar = ({ data }: { data: TodayData }) => {
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 56,
|
||||
fontSize: fs(56),
|
||||
lineHeight: 0.9,
|
||||
fontWeight: 500,
|
||||
letterSpacing: '-0.04em',
|
||||
|
|
@ -241,13 +243,13 @@ const TopBar = ({ data }: { data: TodayData }) => {
|
|||
{big}
|
||||
</div>
|
||||
<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()]}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 10,
|
||||
fontSize: fs(10),
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--ink-2)',
|
||||
|
|
@ -257,7 +259,7 @@ const TopBar = ({ data }: { data: TodayData }) => {
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9,
|
||||
fontSize: fs(9),
|
||||
letterSpacing: '0.18em',
|
||||
textTransform: 'uppercase',
|
||||
color: 'var(--ink-3)',
|
||||
|
|
@ -358,7 +360,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
|
|||
const p = (h * 60 - startMin) / rangeMin;
|
||||
return (
|
||||
<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')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -388,7 +390,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 10,
|
||||
fontSize: fs(10),
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 500,
|
||||
paddingTop: 2,
|
||||
|
|
@ -415,7 +417,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 13.5,
|
||||
fontSize: fs(13.5),
|
||||
fontWeight: current ? 600 : 500,
|
||||
lineHeight: 1.15,
|
||||
letterSpacing: '-0.005em',
|
||||
|
|
@ -431,7 +433,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
|
|||
<div
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9.5,
|
||||
fontSize: fs(9.5),
|
||||
color: 'var(--ink-3)',
|
||||
letterSpacing: '0.04em',
|
||||
marginTop: 1,
|
||||
|
|
@ -463,7 +465,7 @@ const Agenda = ({ events, weather }: { events: AgendaEvent[]; weather?: WeatherD
|
|||
right: 0,
|
||||
transform: 'translateY(-50%)',
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 8,
|
||||
fontSize: fs(8),
|
||||
color: 'var(--ink-3)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
|
|
@ -490,7 +492,7 @@ const OverdueBadge = ({ days }: { days: number }) => (
|
|||
height: 16,
|
||||
border: '1.5px solid var(--ink)',
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9,
|
||||
fontSize: fs(9),
|
||||
fontWeight: 600,
|
||||
lineHeight: 1,
|
||||
flex: '0 0 16px',
|
||||
|
|
@ -523,7 +525,7 @@ const Chores = ({ items }: { items: ChoreItem[] }) => (
|
|||
gap: 9,
|
||||
width: '100%',
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 13,
|
||||
fontSize: fs(13),
|
||||
lineHeight: 1.2,
|
||||
fontWeight: 450,
|
||||
color: 'var(--ink)',
|
||||
|
|
@ -535,7 +537,7 @@ const Chores = ({ items }: { items: ChoreItem[] }) => (
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9,
|
||||
fontSize: fs(9),
|
||||
color: 'var(--ink-3)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
|
|
@ -599,7 +601,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 13,
|
||||
fontSize: fs(13),
|
||||
fontWeight: 450,
|
||||
lineHeight: 1.2,
|
||||
textDecoration: t.done ? 'line-through' : 'none',
|
||||
|
|
@ -611,7 +613,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9,
|
||||
fontSize: fs(9),
|
||||
color: 'var(--ink-3)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
|
|
@ -626,7 +628,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 10,
|
||||
fontSize: fs(10),
|
||||
color: 'var(--ink-2)',
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}}>
|
||||
|
|
@ -663,7 +665,7 @@ const Tasks = ({
|
|||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontWeight: 700,
|
||||
fontSize: 14,
|
||||
fontSize: fs(14),
|
||||
lineHeight: 1,
|
||||
transform: 'translateY(2px)',
|
||||
}}>
|
||||
|
|
@ -672,7 +674,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_BODY,
|
||||
fontSize: 13,
|
||||
fontSize: fs(13),
|
||||
fontWeight: 450,
|
||||
lineHeight: 1.2,
|
||||
textDecoration: 'underline',
|
||||
|
|
@ -687,7 +689,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 9,
|
||||
fontSize: fs(9),
|
||||
color: 'var(--ink-3)',
|
||||
letterSpacing: '0.08em',
|
||||
textTransform: 'uppercase',
|
||||
|
|
@ -703,7 +705,7 @@ const Tasks = ({
|
|||
<span
|
||||
style={{
|
||||
fontFamily: FONT_MONO,
|
||||
fontSize: 10,
|
||||
fontSize: fs(10),
|
||||
color: 'var(--ink)',
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
padding: '1px 4px',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue