polish: clean header, unified IBM Plex Sans typography
- Remove Daily Briefing title and live indicator from header - Center clock prominently in header bar - Switch all section headings to IBM Plex Sans (matching card titles) - Remove unused Outfit font import Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam
parent
e94a7706ab
commit
e25d055ba2
5 changed files with 31 additions and 67 deletions
|
|
@ -6,7 +6,7 @@
|
||||||
<title>Daily Briefing</title>
|
<title>Daily Briefing</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||||
</head>
|
</head>
|
||||||
<body class="antialiased">
|
<body class="antialiased">
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
||||||
|
|
@ -20,26 +20,24 @@ export default function Clock() {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex flex-col items-center">
|
||||||
<div className="flex flex-col items-end">
|
<div className="flex items-baseline gap-0">
|
||||||
<div className="flex items-baseline gap-0">
|
<span className="text-3xl sm:text-4xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
{hours}
|
||||||
{hours}
|
</span>
|
||||||
</span>
|
<span className="text-3xl sm:text-4xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
|
||||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
|
:
|
||||||
:
|
</span>
|
||||||
</span>
|
<span className="text-3xl sm:text-4xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
{minutes}
|
||||||
{minutes}
|
</span>
|
||||||
</span>
|
<span className="text-base font-mono font-medium text-base-500 ml-0.5">
|
||||||
<span className="text-sm font-mono font-medium text-base-500 ml-0.5">
|
{seconds}
|
||||||
{seconds}
|
</span>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase mt-0.5">
|
|
||||||
{dateStr}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase">
|
||||||
|
{dateStr}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,10 @@ import ServerCard from "../components/ServerCard";
|
||||||
import HomeAssistant from "../components/HomeAssistant";
|
import HomeAssistant from "../components/HomeAssistant";
|
||||||
import TasksCard from "../components/TasksCard";
|
import TasksCard from "../components/TasksCard";
|
||||||
import MqttCard from "../components/MqttCard";
|
import MqttCard from "../components/MqttCard";
|
||||||
import { RefreshCw, Wifi, WifiOff, AlertTriangle, Settings } from "lucide-react";
|
import { RefreshCw, AlertTriangle, Settings } from "lucide-react";
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const { data, loading, error, connected, refresh } = useDashboard();
|
const { data, loading, error, refresh } = useDashboard();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen text-base-800">
|
<div className="min-h-screen text-base-800">
|
||||||
|
|
@ -31,15 +31,9 @@ export default function Dashboard() {
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="sticky top-0 z-40 border-b border-base-300 bg-base-50/95 backdrop-blur-sm">
|
<header className="sticky top-0 z-40 border-b border-base-300 bg-base-50/95 backdrop-blur-sm">
|
||||||
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||||
<div className="flex items-center gap-4">
|
{/* Left: utility buttons */}
|
||||||
<h1 className="font-serif italic text-lg sm:text-xl text-base-900 tracking-tight">
|
<div className="flex items-center gap-2">
|
||||||
Daily Briefing
|
|
||||||
</h1>
|
|
||||||
<LiveIndicator connected={connected} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<button
|
<button
|
||||||
onClick={refresh}
|
onClick={refresh}
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
|
|
@ -57,8 +51,13 @@ export default function Dashboard() {
|
||||||
>
|
>
|
||||||
<Settings className="w-3.5 h-3.5 text-base-600" />
|
<Settings className="w-3.5 h-3.5 text-base-600" />
|
||||||
</Link>
|
</Link>
|
||||||
<Clock />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Center: clock */}
|
||||||
|
<Clock />
|
||||||
|
|
||||||
|
{/* Right: spacer to balance layout */}
|
||||||
|
<div className="w-[72px]" />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -143,39 +142,6 @@ export default function Dashboard() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Live indicator ─────────────────────────────────────── */
|
|
||||||
|
|
||||||
function LiveIndicator({ connected }: { connected: boolean }) {
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-2 px-2.5 py-1 border border-base-300">
|
|
||||||
<div className="relative">
|
|
||||||
<div
|
|
||||||
className={`w-1.5 h-1.5 ${connected ? "bg-mint" : "bg-base-500"}`}
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
/>
|
|
||||||
{connected && (
|
|
||||||
<div
|
|
||||||
className="absolute inset-0 w-1.5 h-1.5 bg-mint animate-ping opacity-40"
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className={`text-[10px] font-mono font-medium ${
|
|
||||||
connected ? "text-mint" : "text-base-500"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{connected ? "Live" : "Offline"}
|
|
||||||
</span>
|
|
||||||
{connected ? (
|
|
||||||
<Wifi className="w-3 h-3 text-mint/50" />
|
|
||||||
) : (
|
|
||||||
<WifiOff className="w-3 h-3 text-base-500" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Loading skeleton ───────────────────────────────────── */
|
/* ── Loading skeleton ───────────────────────────────────── */
|
||||||
|
|
||||||
function LoadingSkeleton() {
|
function LoadingSkeleton() {
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,7 @@
|
||||||
@apply font-mono text-[10px] font-semibold tracking-widest text-base-500 uppercase;
|
@apply font-mono text-[10px] font-semibold tracking-widest text-base-500 uppercase;
|
||||||
}
|
}
|
||||||
.section-title {
|
.section-title {
|
||||||
@apply font-serif italic text-lg text-base-900 tracking-tight;
|
@apply font-sans font-bold text-base uppercase text-base-900 tracking-wide;
|
||||||
}
|
}
|
||||||
.section-rule {
|
.section-rule {
|
||||||
@apply flex-1 h-px bg-base-300;
|
@apply flex-1 h-px bg-base-300;
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
serif: ['"Instrument Serif"', "Georgia", "serif"],
|
serif: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
||||||
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
||||||
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
|
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue