start project

2026-08-07 21:17:17 +03:30
commit ea1e1eead6
121 changed files with 8108 additions and 0 deletions
@@ -0,0 +1,67 @@
+/* app/static/src/css/main.css — Tailwind entry point (Chapter 05) */
+
+/* Self-hosted fonts (Ch05: build-time only, no runtime CDN dependency).
+   Display face used sparingly for headings/labels; body face for UI
+   chrome; mono face for every data readout (IPs, counts, paths,
+   timestamps) — reinforcing that this app's whole job is turning raw
+   log lines into a readable instrument panel. */
+@import "@fontsource/space-grotesk/500.css";
+@import "@fontsource/space-grotesk/700.css";
+@import "@fontsource/public-sans/400.css";
+@import "@fontsource/public-sans/500.css";
+@import "@fontsource/public-sans/600.css";
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+
+@import "gridjs/dist/theme/mermaid.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    color-scheme: light;
+  }
+  html.dark {
+    color-scheme: dark;
+  }
+  body {
+    font-family: theme('fontFamily.sans');
+  }
+  h1, h2, h3, h4, .font-display {
+    font-family: theme('fontFamily.display');
+  }
+  /* Every number/IP/path/timestamp reads like it came straight off the
+     log line — the app's one signature typographic choice. */
+  .font-data {
+    font-family: theme('fontFamily.mono');
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@layer components {
+  /* Grid.js theme override to match the token system in both modes,
+     without forking the whole "mermaid" stylesheet. */
+  .gridjs-wrapper, .gridjs-container {
+    @apply !border-line dark:!border-line-dark !rounded-lg;
+  }
+  .gridjs-table {
+    @apply font-data text-sm;
+  }
+  .gridjs-th {
+    @apply !bg-surface-raised dark:!bg-surface-raised-dark !text-muted dark:!text-muted-dark font-sans !font-medium !text-xs !uppercase !tracking-wide;
+  }
+  .gridjs-td {
+    @apply !bg-surface dark:!bg-surface-dark !text-ink dark:!text-ink-dark !border-line dark:!border-line-dark;
+  }
+  .gridjs-footer {
+    @apply !bg-surface dark:!bg-surface-dark !border-line dark:!border-line-dark;
+  }
+  .gridjs-pagination .gridjs-pages button {
+    @apply !text-ink dark:!text-ink-dark;
+  }
+  .gridjs-search-input {
+    @apply !bg-surface dark:!bg-surface-dark !text-ink dark:!text-ink-dark !border-line dark:!border-line-dark;
+  }
+}