Replace Discord flex layout with CSS Grid on desktop (312px sidebar + 1fr main) and overlay drawer on mobile. Migrate all discord-* class references to Aether Drift design tokens across 15 files (~200 refs). Layout: ServerSidebar becomes a fixed glass strip (md:glass-strip), ChannelSidebar gets pl-[72px] offset, bottom bar is a glass-bubble (z-105), MessageInput floats as absolute glass pill on desktop (z-110). MemberSidebar/ActivityPanel hidden on mobile via hidden md:block. Z-index stack: MobileNav backdrop z-35, sidebar z-40, glass strip z-100, bottom bar z-105, input bubble z-110, hamburger z-120, profile popout z-145, device panels z-150, modals z-200.
18 lines
747 B
HTML
18 lines
747 B
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="aether-drift">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="color-scheme" content="dark" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<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;500;600;700&display=swap" rel="stylesheet" />
|
|
<title>Backspace</title>
|
|
</head>
|
|
<body class="bg-discord-bg-primary text-discord-text-primary">
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|