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>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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>
|
||||
<body class="antialiased">
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
|
|
@ -20,26 +20,24 @@ export default function Clock() {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex flex-col items-end">
|
||||
<div className="flex items-baseline gap-0">
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||
{hours}
|
||||
</span>
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
|
||||
:
|
||||
</span>
|
||||
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||
{minutes}
|
||||
</span>
|
||||
<span className="text-sm font-mono font-medium text-base-500 ml-0.5">
|
||||
{seconds}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase mt-0.5">
|
||||
{dateStr}
|
||||
</p>
|
||||
<div className="flex flex-col items-center">
|
||||
<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">
|
||||
{hours}
|
||||
</span>
|
||||
<span className="text-3xl sm:text-4xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
|
||||
:
|
||||
</span>
|
||||
<span className="text-3xl sm:text-4xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
|
||||
{minutes}
|
||||
</span>
|
||||
<span className="text-base font-mono font-medium text-base-500 ml-0.5">
|
||||
{seconds}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase">
|
||||
{dateStr}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import ServerCard from "../components/ServerCard";
|
|||
import HomeAssistant from "../components/HomeAssistant";
|
||||
import TasksCard from "../components/TasksCard";
|
||||
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() {
|
||||
const { data, loading, error, connected, refresh } = useDashboard();
|
||||
const { data, loading, error, refresh } = useDashboard();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen text-base-800">
|
||||
|
|
@ -31,15 +31,9 @@ export default function Dashboard() {
|
|||
|
||||
{/* Header */}
|
||||
<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="flex items-center gap-4">
|
||||
<h1 className="font-serif italic text-lg sm:text-xl text-base-900 tracking-tight">
|
||||
Daily Briefing
|
||||
</h1>
|
||||
<LiveIndicator connected={connected} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
{/* Left: utility buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
|
|
@ -57,8 +51,13 @@ export default function Dashboard() {
|
|||
>
|
||||
<Settings className="w-3.5 h-3.5 text-base-600" />
|
||||
</Link>
|
||||
<Clock />
|
||||
</div>
|
||||
|
||||
{/* Center: clock */}
|
||||
<Clock />
|
||||
|
||||
{/* Right: spacer to balance layout */}
|
||||
<div className="w-[72px]" />
|
||||
</div>
|
||||
</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 ───────────────────────────────────── */
|
||||
|
||||
function LoadingSkeleton() {
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
@apply font-mono text-[10px] font-semibold tracking-widest text-base-500 uppercase;
|
||||
}
|
||||
.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 {
|
||||
@apply flex-1 h-px bg-base-300;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
},
|
||||
},
|
||||
fontFamily: {
|
||||
serif: ['"Instrument Serif"', "Georgia", "serif"],
|
||||
serif: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
||||
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
|
||||
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue