From a48e91b037b049fd06db551edc76b7ed40df8f4c Mon Sep 17 00:00:00 2001 From: Marius Peter Date: Sat, 18 Jul 2026 23:56:50 +0200 Subject: Restyle typography: Besley headings, IBM Plex Sans/Mono body, remove uppercase - Load Besley 600, IBM Plex Sans 400/500/700, IBM Plex Mono 400/500 via Google Fonts - Replace system serif/mono stacks with intentional font choices - Remove text-transform: uppercase everywhere except HITO logo - Update all template text from ALL CAPS to natural case - Bump mobile base font from 15px to 16px (prevents iOS input zoom) - Raise minimum font-size to 0.8rem across all small text - Fix WCAG AA contrast: --gold-dim to #9E8340, --red-bright to #E04530 - Ensure all touch targets meet 44px minimum (inputs, buttons, checkboxes) - Blockquotes now render in Besley for literary weight - Strong elements use bold weight instead of italic for sans-serif body --- static/css/hito.css | 154 ++++++++++++++++++++-------------------- templates/base.html | 3 + templates/dashboard.html | 10 +-- templates/exercises.html | 2 +- templates/override.html | 6 +- templates/session-complete.html | 2 +- templates/session.html | 2 +- templates/setup.html | 2 +- 8 files changed, 93 insertions(+), 88 deletions(-) diff --git a/static/css/hito.css b/static/css/hito.css index 1de9869..dcfb3ad 100644 --- a/static/css/hito.css +++ b/static/css/hito.css @@ -1,9 +1,8 @@ -/* HITO - Objectivist Aesthetic +/* HITO - Solid. Reliable. Authoritative. Black. Gold. White. No compromise. - Rectilinear. Architectural. Certain. - "A is A." The design reflects the philosophy: - clarity, purpose, and respect for the rational mind. */ + Besley for headings. Plex Sans for body. Plex Mono for data. + Accessibility-first, mobile-primary. Built for the gym. */ /* === VARIABLES === */ @@ -14,13 +13,13 @@ --fg: #F0EDE6; --fg-dim: #9A958D; --gold: #C5A24D; - --gold-dim: #8B7235; + --gold-dim: #9E8340; --red: #8B0000; - --red-bright: #CC2200; + --red-bright: #E04530; --green: #4A7A3A; - --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace; - --serif: Georgia, 'Times New Roman', 'Noto Serif', serif; - --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace; + --heading: 'Besley', Georgia, serif; + --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; } /* === RESET === */ @@ -41,7 +40,7 @@ html { body { background-color: var(--bg); color: var(--fg); - font-family: var(--serif); + font-family: var(--sans); min-height: 100vh; display: flex; justify-content: center; @@ -56,23 +55,22 @@ main { /* === TYPOGRAPHY === */ h1, h2, h3 { - font-family: var(--serif); - font-weight: normal; - letter-spacing: 0.05em; + font-family: var(--heading); + font-weight: 600; + letter-spacing: normal; } h2 { - font-size: 1.6rem; + font-size: 1.75rem; color: var(--gold); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.01em; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gold-dim); } h3 { - font-size: 1.1rem; + font-size: 1.15rem; color: var(--fg); margin-bottom: 0.5rem; } @@ -83,8 +81,7 @@ p { strong { color: var(--gold); - font-weight: normal; - font-style: italic; + font-weight: 700; } a { @@ -112,17 +109,15 @@ header { .logo { font-size: 2.5rem; - letter-spacing: 0.3em; + letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.1rem; - font-weight: normal; } .subtitle { - font-size: 0.75rem; - letter-spacing: 0.2em; - text-transform: uppercase; + font-size: 0.8rem; + letter-spacing: 0.1em; color: var(--fg-dim); font-family: var(--mono); } @@ -139,9 +134,10 @@ blockquote { border-left: 2px solid var(--gold-dim); padding-left: 1.25rem; margin: 0; - font-style: italic; + font-family: var(--heading); + font-weight: 600; color: var(--fg-dim); - font-size: 0.9rem; + font-size: 0.95rem; line-height: 1.7; } @@ -162,9 +158,8 @@ blockquote cite { color: var(--bg); font-family: var(--mono); font-size: 0.85rem; - font-weight: bold; - letter-spacing: 0.15em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; padding: 0.9rem 2rem; border: none; cursor: pointer; @@ -184,9 +179,9 @@ blockquote cite { color: var(--red-bright); font-family: var(--mono); font-size: 0.8rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.7rem 1.5rem; + letter-spacing: 0.05em; + padding: 0.85rem 1.5rem; + min-height: 2.75rem; border: 1px solid var(--red); cursor: pointer; text-decoration: none; @@ -206,9 +201,8 @@ blockquote cite { color: var(--fg); font-family: var(--mono); font-size: 0.85rem; - font-weight: bold; - letter-spacing: 0.1em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; padding: 0.9rem 2rem; border: none; cursor: pointer; @@ -226,9 +220,9 @@ blockquote cite { color: var(--fg-dim); font-family: var(--mono); font-size: 0.8rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.7rem 1.5rem; + letter-spacing: 0.05em; + padding: 0.85rem 1.5rem; + min-height: 2.75rem; border: 1px solid var(--fg-dim); text-decoration: none; margin-top: 1rem; @@ -253,8 +247,8 @@ fieldset { legend { font-family: var(--mono); font-size: 0.8rem; - letter-spacing: 0.15em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; color: var(--gold); padding-bottom: 0.75rem; margin-bottom: 1rem; @@ -278,7 +272,8 @@ input[type="text"] { color: var(--fg); font-family: var(--mono); font-size: 1rem; - padding: 0.5rem 0.5rem; + padding: 0.75rem 0.5rem; + min-height: 2.75rem; width: 100%; transition: border-color 0.15s; } @@ -319,10 +314,10 @@ input[type="number"]::placeholder { .unit { font-family: var(--mono); - font-size: 0.75rem; + font-size: 0.8rem; + font-weight: 500; color: var(--fg-dim); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; } /* === INSTRUCTIONS === */ @@ -382,9 +377,9 @@ input[type="number"]::placeholder { .days-remaining .label { font-family: var(--mono); font-size: 0.85rem; + font-weight: 500; color: var(--fg-dim); - text-transform: uppercase; - letter-spacing: 0.1em; + letter-spacing: 0.05em; } .next-date { @@ -409,8 +404,8 @@ input[type="number"]::placeholder { .history h3 { font-family: var(--mono); font-size: 0.8rem; - letter-spacing: 0.15em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; color: var(--fg-dim); margin-bottom: 1rem; } @@ -419,7 +414,7 @@ input[type="number"]::placeholder { display: flex; align-items: center; gap: 1rem; - padding: 0.5rem 0; + padding: 0.75rem 0; border-bottom: 1px solid var(--bg-raised); font-size: 0.9rem; } @@ -437,9 +432,9 @@ input[type="number"]::placeholder { .history-badge { font-family: var(--mono); - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.05em; padding: 0.15rem 0.4rem; } @@ -467,9 +462,9 @@ input[type="number"]::placeholder { .group-label { font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.15em; - text-transform: uppercase; + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.05em; color: var(--gold-dim); padding: 0; margin-bottom: 1rem; @@ -497,7 +492,6 @@ input[type="number"]::placeholder { .prescription strong { color: var(--gold); - font-style: normal; } .set-row { @@ -510,10 +504,10 @@ input[type="number"]::placeholder { .set-label { font-family: var(--mono); - font-size: 0.75rem; + font-size: 0.8rem; + font-weight: 500; color: var(--fg-dim); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; min-width: 3rem; } @@ -524,19 +518,21 @@ input[type="number"]::placeholder { .failure-check { display: flex; align-items: center; - gap: 0.3rem; + gap: 0.4rem; font-family: var(--mono); - font-size: 0.7rem; + font-size: 0.8rem; + font-weight: 500; color: var(--fg-dim); - text-transform: uppercase; - letter-spacing: 0.05em; + letter-spacing: 0.02em; cursor: pointer; + padding: 0.5rem 0.25rem; + min-height: 2.75rem; } .failure-check input[type="checkbox"] { accent-color: var(--gold); - width: 1rem; - height: 1rem; + width: 1.25rem; + height: 1.25rem; } /* === SESSION COMPLETE === */ @@ -600,8 +596,8 @@ input[type="number"]::placeholder { .recovery-info h3 { font-family: var(--mono); font-size: 0.8rem; - letter-spacing: 0.15em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; color: var(--fg-dim); margin-bottom: 0.75rem; } @@ -661,7 +657,7 @@ input[type="number"]::placeholder { @media (max-width: 480px) { html { - font-size: 15px; + font-size: 16px; } body { @@ -723,8 +719,8 @@ input[type="number"]::placeholder { .day-header { font-family: var(--mono); font-size: 0.85rem; - letter-spacing: 0.12em; - text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.05em; color: var(--gold); margin-bottom: 1rem; padding-bottom: 0.5rem; @@ -765,7 +761,8 @@ input[type="number"]::placeholder { color: var(--fg); font-family: var(--mono); font-size: 0.8rem; - padding: 0.4rem 0.5rem; + padding: 0.7rem 0.5rem; + min-height: 2.75rem; flex: 1; max-width: 20rem; } @@ -779,10 +776,11 @@ input[type="number"]::placeholder { background: transparent; color: var(--gold-dim); font-family: var(--mono); - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.35rem 0.75rem; + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.02em; + padding: 0.65rem 1rem; + min-height: 2.75rem; border: 1px solid var(--gold-dim); cursor: pointer; transition: all 0.15s; @@ -808,6 +806,9 @@ input[type="number"]::placeholder { font-size: 0.8rem; letter-spacing: 0.05em; color: var(--fg-dim); + display: inline-block; + padding: 0.75rem 0; + min-height: 2.75rem; } .nav-links a:hover { @@ -855,7 +856,8 @@ input[type="number"]::placeholder { display: block; font-family: var(--mono); font-size: 0.9rem; - letter-spacing: 0.15em; + font-weight: 500; + letter-spacing: 0.05em; color: var(--gold); margin-bottom: 0.4rem; } diff --git a/templates/base.html b/templates/base.html index 472d827..4a73e76 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,6 +4,9 @@ HITO{% block title %}{% endblock %} + + + diff --git a/templates/dashboard.html b/templates/dashboard.html index da294ee..b8e9466 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -7,20 +7,20 @@ {% if ready %}
-

YOU ARE READY

+

You Are Ready

Today you train Day {{ next_day }}: {{ next_day_name }}.

- BEGIN SESSION + Begin Session
{% else %}
-

RECOVERY IN PROGRESS

+

Recovery in Progress

{{ days_remaining }} day{{ days_plural }} remaining

Next session prescribed for {{ next_date }}.

{{ reason }}

- OVERRIDE RECOVERY + Override Recovery
{% endif %} @@ -32,7 +32,7 @@ {{ session.date }} Day {{ session.day }}: {{ session.day_name }} {% if session.override %} - OVERRIDE + Override {% endif %} {% endfor %} diff --git a/templates/exercises.html b/templates/exercises.html index cd7aa54..d19a73c 100644 --- a/templates/exercises.html +++ b/templates/exercises.html @@ -48,7 +48,7 @@ {% endfor %} - RETURN TO DASHBOARD + Return to Dashboard {% endblock %} diff --git a/templates/override.html b/templates/override.html index 02b6a3c..10decb7 100644 --- a/templates/override.html +++ b/templates/override.html @@ -4,7 +4,7 @@ {% block content %}
-

OVERRIDE RECOVERY GATE

+

Override Recovery Gate

{{ warning }}

@@ -17,8 +17,8 @@
- - RETURN TO DASHBOARD + + Return to Dashboard
diff --git a/templates/session-complete.html b/templates/session-complete.html index 8cd18b3..1297cea 100644 --- a/templates/session-complete.html +++ b/templates/session-complete.html @@ -33,7 +33,7 @@

{{ recovery_reason }}

- RETURN TO DASHBOARD + Return to Dashboard {% endblock %} diff --git a/templates/session.html b/templates/session.html index c419697..7b5f3f4 100644 --- a/templates/session.html +++ b/templates/session.html @@ -66,7 +66,7 @@ {% endfor %} - + {% endblock %} diff --git a/templates/setup.html b/templates/setup.html index 3653c06..2a2613f 100644 --- a/templates/setup.html +++ b/templates/setup.html @@ -42,7 +42,7 @@ - + {% endblock %} -- cgit v1.2.3