Include widgets in README, setup storybook

2026-04-15 04:12:32 +02:00
parent 8b1f22d573
commit 299036eced
12 changed files with 4079 additions and 1 deletions
@@ -0,0 +1,62 @@
+:root {
+  color-scheme: dark;
+  --panel-bg-color: #161d27;
+  --input-bg-color: #0d131c;
+  --input-color: #e8ecf3;
+  --body-color: #c6d0de;
+  --border-color: #314154;
+  --link-color: #f59e0b;
+}
+
+body {
+  margin: 0;
+  font-family: Georgia, 'Times New Roman', serif;
+  background:
+    radial-gradient(circle at top, rgba(245, 158, 11, 0.08), transparent 30%),
+    linear-gradient(180deg, #081018 0%, #0f1720 100%);
+  color: var(--body-color);
+}
+
+.story-shell {
+  min-width: min(92vw, 960px);
+  padding: 32px;
+}
+
+.story-surface {
+  padding: 28px;
+  border-radius: 28px;
+  border: 1px solid rgba(245, 158, 11, 0.16);
+  background:
+    linear-gradient(180deg, rgba(245, 158, 11, 0.06), transparent 28%),
+    rgba(12, 18, 27, 0.92);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.story-stack {
+  display: grid;
+  gap: 20px;
+}
+
+.story-heading {
+  margin: 0;
+  font-size: 12px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: #f2c572;
+}
+
+.story-note {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  max-width: 68ch;
+  color: rgba(232, 236, 243, 0.76);
+}
+
+.story-clippy-row {
+  display: flex;
+  align-items: flex-end;
+  min-height: 220px;
+}