root/daily-briefing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

polish: clean header, unified IBM Plex Sans typography

Browse source 
- 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 2026-03-02 12:04:47 +01:00
parent e94a7706ab
commit e25d055ba2
5 changed files with 31 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/index.html
View file

@ -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>

14
web/src/components/Clock.tsx
View file

@ -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-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold"> <span className="text-3xl sm:text-4xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
{hours} {hours}
</span> </span>
<span className="text-2xl sm:text-3xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse"> <span className="text-3xl sm:text-4xl font-mono font-bold text-gold/60 tracking-tighter animate-glow-pulse">
: :
</span> </span>
<span className="text-2xl sm:text-3xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold"> <span className="text-3xl sm:text-4xl font-mono font-bold text-base-900 tracking-tighter data-glow-gold">
{minutes} {minutes}
</span> </span>
<span className="text-sm font-mono font-medium text-base-500 ml-0.5"> <span className="text-base font-mono font-medium text-base-500 ml-0.5">
{seconds} {seconds}
</span> </span>
</div> </div>
<p className="text-[10px] font-mono text-base-500 tracking-wider uppercase mt-0.5"> <p className="text-[10px] font-mono text-base-500 tracking-wider uppercase">
{dateStr} {dateStr}
</p> </p>
</div> </div>
</div>
); );
} }

56
web/src/pages/Dashboard.tsx
View file

@ -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() {

2
web/src/styles/globals.css
View file

@ -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;

2
web/tailwind.config.js
View file

@ -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"],
}, },