summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/css/hito.css154
-rw-r--r--templates/base.html3
-rw-r--r--templates/dashboard.html10
-rw-r--r--templates/exercises.html2
-rw-r--r--templates/override.html6
-rw-r--r--templates/session-complete.html2
-rw-r--r--templates/session.html2
-rw-r--r--templates/setup.html2
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 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HITO{% block title %}{% endblock %}</title>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Besley:wght@600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;700&display=swap">
<link rel="stylesheet" href="/static/css/hito.css">
</head>
<body>
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 %}
<div class="status ready">
- <h2>YOU ARE READY</h2>
+ <h2>You Are Ready</h2>
<p class="next-workout">Today you train <strong>Day {{ next_day }}: {{ next_day_name }}</strong>.</p>
- <a href="/session" class="btn-primary">BEGIN SESSION</a>
+ <a href="/session" class="btn-primary">Begin Session</a>
</div>
{% else %}
<div class="status recovering">
- <h2>RECOVERY IN PROGRESS</h2>
+ <h2>Recovery in Progress</h2>
<p class="days-remaining">
<span class="big-number">{{ days_remaining }}</span>
<span class="label">day{{ days_plural }} remaining</span>
</p>
<p class="next-date">Next session prescribed for <strong>{{ next_date }}</strong>.</p>
<p class="recovery-reason">{{ reason }}</p>
- <a href="/override" class="btn-warning">OVERRIDE RECOVERY</a>
+ <a href="/override" class="btn-warning">Override Recovery</a>
</div>
{% endif %}
@@ -32,7 +32,7 @@
<span class="history-date">{{ session.date }}</span>
<span class="history-day">Day {{ session.day }}: {{ session.day_name }}</span>
{% if session.override %}
- <span class="history-badge override">OVERRIDE</span>
+ <span class="history-badge override">Override</span>
{% endif %}
</div>
{% 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 @@
</div>
{% endfor %}
- <a href="/" class="btn-secondary">RETURN TO DASHBOARD</a>
+ <a href="/" class="btn-secondary">Return to Dashboard</a>
</section>
{% 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 %}
<section class="override-page">
- <h2>OVERRIDE RECOVERY GATE</h2>
+ <h2>Override Recovery Gate</h2>
<div class="warning-block">
<p class="warning-text">{{ warning }}</p>
@@ -17,8 +17,8 @@
<form method="post" action="/override/confirm">
<div class="override-actions">
- <button type="submit" class="btn-danger">I UNDERSTAND. PROCEED.</button>
- <a href="/" class="btn-secondary">RETURN TO DASHBOARD</a>
+ <button type="submit" class="btn-danger">I understand. Proceed.</button>
+ <a href="/" class="btn-secondary">Return to Dashboard</a>
</div>
</form>
</section>
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 @@
<p class="recovery-reason">{{ recovery_reason }}</p>
</div>
- <a href="/" class="btn-primary">RETURN TO DASHBOARD</a>
+ <a href="/" class="btn-primary">Return to Dashboard</a>
</section>
{% 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 @@
</fieldset>
{% endfor %}
- <button type="submit" class="btn-primary">LOG SESSION</button>
+ <button type="submit" class="btn-primary">Log Session</button>
</form>
</section>
{% 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 @@
</label>
</div>
- <button type="submit" class="btn-primary">BEGIN TRAINING</button>
+ <button type="submit" class="btn-primary">Begin Training</button>
</form>
</section>
{% endblock %}
Copyright 2019--2026 Marius PETER