Crowmate/Nest
Archived
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update font styles and improve button sizing for better UI consistency

Browse Source
This commit is contained in:
Thibault Pouch
2026-02-18 12:38:18 +01:00
parent 0021787af7
commit c5b4b44bb8
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
nest-front/client/src/index.css
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Courier+Prime:wght@400;700&family=Share+Tech+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@import "tailwindcss"; @import "tailwindcss";
/* ── Design Tokens — White Theme ─────────────────── */ /* ── Design Tokens — White Theme ─────────────────── */
@@ -36,8 +36,8 @@
--color-amber: #d97706; --color-amber: #d97706;
--color-amber-dim: #b45309; --color-amber-dim: #b45309;
--font-mono: 'Share Tech Mono', 'Courier Prime', monospace; --font-mono: 'JetBrains Mono', 'Courier New', monospace;
--font-heading: 'VT323', 'Press Start 2P', monospace; --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
} }
/* ── Base ──────────────────────────────────────────────── */ /* ── Base ──────────────────────────────────────────────── */
@@ -54,10 +54,13 @@ body {
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 17px;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
line-height: 1.6; line-height: 1.7;
display: block; display: block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
#root { #root {
@@ -73,8 +76,8 @@ body {
/* ── Typography ────────────────────────────────────────── */ /* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: var(--font-heading); font-family: var(--font-heading);
letter-spacing: 0.04em; font-weight: 600;
text-transform: uppercase; letter-spacing: -0.02em;
margin: 0; margin: 0;
} }
@@ -138,17 +141,18 @@ a:hover { color: var(--color-yellow-dim); }
background: var(--color-bg); background: var(--color-bg);
border: 2px solid var(--color-yellow); border: 2px solid var(--color-yellow);
color: var(--color-yellow); color: var(--color-yellow);
padding: 0.4rem 1.1rem; padding: 0.6rem 1.3rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.5rem;
font-size: 0.85rem; font-size: 1rem;
border-radius: 6px; border-radius: 6px;
text-decoration: none; text-decoration: none;
font-weight: 500;
} }
.btn-terminal::before { display: none; } .btn-terminal::before { display: none; }
.btn-terminal:hover { .btn-terminal:hover {
@@ -181,8 +185,8 @@ a:hover { color: var(--color-yellow-dim); }
border-radius: 6px; border-radius: 6px;
color: var(--color-text); color: var(--color-text);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.9rem; font-size: 1.05rem;
padding: 0.4rem 0.7rem; padding: 0.6rem 0.9rem;
width: 100%; width: 100%;
transition: border-color 0.15s, box-shadow 0.15s; transition: border-color 0.15s, box-shadow 0.15s;
outline: none; outline: none;
@@ -203,10 +207,11 @@ a:hover { color: var(--color-yellow-dim); }
/* ── Section label ─────────────────────────────────────── */ /* ── Section label ─────────────────────────────────────── */
.section-label { .section-label {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.85rem;
font-weight: 500;
color: var(--color-text-dim); color: var(--color-text-dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.2em; letter-spacing: 0.15em;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -222,8 +227,8 @@ a:hover { color: var(--color-yellow-dim); }
/* ── Status badges — clean style ──────────────────────── */ /* ── Status badges — clean style ──────────────────────── */
.badge { .badge {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.65rem; font-size: 0.75rem;
padding: 0.1rem 0.45rem; padding: 0.2rem 0.5rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
border-radius: 4px; border-radius: 4px;