Add public VOD mode, queue sync fixes, and full docs

Allow streamer/VOD browsing without Twitch credentials via public GraphQL fallback, harden queue visibility by syncing renderer state with backend updates, and ship a comprehensive Astro/MDX documentation set similar to established downloader projects.
2026-02-13 12:01:09 +01:00
parent 46f7085342
commit 7f208cf369
20 changed files with 930 additions and 58 deletions
@@ -1,22 +1,205 @@
 :root {
  color-scheme: dark;
  font-family: 'Segoe UI', Tahoma, sans-serif;
-  background: #101216;
-  color: #f2f4f8;
+  --bg-1: #0f1217;
+  --bg-2: #161c26;
+  --bg-3: #1d2734;
+  --text: #eef3fb;
+  --muted: #aab8cf;
+  --line: #2b3546;
+  --link: #7db6ff;
+  --link-hover: #a8cdff;
+  --chip: #22344b;
+}
+
+* {
+  box-sizing: border-box;
 }

 body {
  margin: 0;
  min-height: 100vh;
-  background: radial-gradient(circle at top, #1a2330 0%, #101216 55%);
+  background: radial-gradient(circle at top, #1a2432 0%, var(--bg-1) 55%);
+  color: var(--text);
 }

-.container {
-  max-width: 860px;
+.layout {
+  max-width: 1280px;
  margin: 0 auto;
-  padding: 40px 20px;
+  padding: 28px;
+  display: grid;
+  grid-template-columns: 290px minmax(0, 1fr);
+  gap: 24px;
+}
+
+.sidebar {
+  position: sticky;
+  top: 18px;
+  align-self: start;
+  background: linear-gradient(180deg, var(--bg-2), #131922);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 18px;
+}
+
+.brand {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.tagline {
+  margin-top: 8px;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.nav-list {
+  list-style: none;
+  margin: 20px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.nav-list a {
+  display: block;
+  padding: 8px 10px;
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--muted);
+  border: 1px solid transparent;
+}
+
+.nav-list a:hover {
+  color: var(--text);
+  border-color: var(--line);
+  background: rgba(125, 182, 255, 0.08);
+}
+
+.nav-list a.active {
+  color: var(--text);
+  background: rgba(125, 182, 255, 0.16);
+  border-color: rgba(125, 182, 255, 0.35);
+}
+
+.content {
+  min-width: 0;
+}
+
+.doc {
+  background: linear-gradient(180deg, var(--bg-2), #121822);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 26px;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 1.3;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 2rem;
+}
+
+h2,
+h3 {
+  margin-top: 1.7rem;
+}
+
+p,
+li {
+  color: var(--muted);
+  line-height: 1.65;
 }

 a {
-  color: #5ca3ff;
+  color: var(--link);
+}
+
+a:hover {
+  color: var(--link-hover);
+}
+
+pre {
+  overflow-x: auto;
+  background: #0c1118;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  padding: 14px;
+}
+
+code {
+  font-family: Consolas, 'Courier New', monospace;
+  font-size: 0.92em;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+th,
+td {
+  border: 1px solid var(--line);
+  text-align: left;
+  padding: 10px;
+}
+
+th {
+  background: #111a25;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #172233, #111824);
+  padding: 14px;
+}
+
+.card h3 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 1rem;
+}
+
+.card p {
+  margin: 0;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip {
+  border: 1px solid rgba(125, 182, 255, 0.35);
+  background: var(--chip);
+  color: #dbe9ff;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 0.84rem;
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+    padding: 16px;
+  }
+
+  .sidebar {
+    position: static;
+  }
 }