summaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/hito.css154
1 files changed, 78 insertions, 76 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;
}
Copyright 2019--2026 Marius PETER