feat: responsive connection section

2026-07-24 22:25:50 +02:00
parent 62d3b22fea
commit a157b5f198
10 changed files with 245 additions and 183 deletions
--- a/src/variables.css
+++ b/src/variables.css
@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  --font-size: 18px;
+
+  /* ---------- Color ---------- */
+  --bg-void: #0d0f12;
+  --bg-panel: #16191d;
+  --bg-raised: #1e2227;
+  --border-hairline: #2a2f36;
+  --text-primary: #e8eaed;
+  --text-muted: #8b92a0;
+  --accent-brand: #5b8def;
+  --accent-live: #3ecf8e;
+  --accent-down: #ff5c5c;
+  --accent-connecting: #f5a623;
+
+  /* ---------- Type ---------- */
+  --font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
+
+  /* ---------- Font ---------- */
+  --font-xs: 0.75rem;
+  --font-sm: 0.875rem;
+  --font-md: 1rem;
+  --font-lg: 1.125rem;
+  --font-xl: 1.25rem;
+  --font-2xl: 1.5rem;
+
+  /* ---------- Typography ---------- */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* ---------- Spacing Scale ---------- */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* ---------- Border ---------- */
+  --border-width: 1px;
+  --border-width-active: 2px;
+
+  /* ---------- Radius ---------- */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-pill: 999px;
+
+  /* ---------- Motion ---------- */
+  --dur-fast: 100ms;
+  --dur-base: 180ms;
+  --dur-slow: 300ms;
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ---------- Shadow ---------- */
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  /* ---------- Animation ---------- */
+  --transition-fast: 120ms;
+  --transition-base: 180ms;
+
+  /* ---------- Header ---------- */
+  --header-height: 50px;
+  --font-size-header: 1rem;
+
+  --tab-height: calc(var(--header-height) * 0.75);
+
+  /* ---------- Card ---------- */
+  --card-width: 500px;
+  --card-control-height: 36px;
+
+  /* ---------- Button ---------- */
+  --disabled-opacity: 0.45;
+
+  /* ---------- SideBar ---------- */
+  --sidebar-width-collapsed: calc(var(--header-height) * 0.85 + 2 * var(--space-3));
+  --sidebar-width-expanded: 200px;
+}