teernisse
40b3ccf33e
Establish a cohesive dark UI foundation: - Define CSS custom properties for surfaces (4-level depth hierarchy), borders, foreground text (3-tier), accent colors, and canvas background - Add Inter (text) and JetBrains Mono (code) font loading via Google Fonts - Extend Tailwind with semantic color tokens, typography scale (caption/body/ subheading/heading), box shadows (card, glow), and animations (fade-in, slide-in, skeleton shimmer) - Add component-layer utilities: .btn system (primary/secondary/ghost/danger), .glass frosted overlays, .custom-checkbox, .skeleton loaders - Add .prose-message typographic styles for rendered markdown content - Add search minimap CSS (tick marks, viewport indicator) - Restyle scrollbars for thin dark appearance (WebKit + Firefox) - Replace hardcoded Tailwind color classes in CATEGORY_COLORS with semantic tokens (dot/border/text) mapped to the new design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
16 lines
596 B
HTML
16 lines
596 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Session Viewer</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=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="./main.tsx"></script>
|
|
</body>
|
|
</html>
|