jarvis-at-skic
464ea75730
Build and Deploy Documentation / build (push) Failing after 9s
Styling: - Tailwind CSS v4 (preflight:false) integrated via PostCSS plugin - shadcn/ui New York style with --radius:0 (sharp corners everywhere) - Zero border-radius on ALL elements: buttons, code blocks, cards, admonitions, badges - Navbar FORCE dark (#0a0a0a) in both light/dark modes via !important - ThemeSynchronizer: bridges Docusaurus data-theme → shadcn .dark class - Active sidebar item gets left border accent instead of rounded bg React UI components (src/components/ui/index.tsx): - Badge (6 variants: wip, stable, planned, success, warning, outline) - Card + CardHeader + CardTitle + CardContent - Callout (note/info/success/warning/danger) - sharp, left-border style - PropertiesTable - monospace typed API reference tables - StatusIndicator - operational/degraded/outage/maintenance Navigation restructure: - Introduction → Platform → Products → Engineering → Runbooks - Old 'applications/' removed, moved to products/stock-market-pro/ - New Platform section: infrastructure overview + CI/CD pipeline docs - New Engineering section: monorepo structure, Go stack, conventions - New Runbooks section: incident severity, common procedures Implementation guidelines (engineering/guidelines.md): - Monorepo layout with go.work workspace - Go as primary language (why + standard library table) - Python as sidecar for data/ML workloads - Code conventions: gofmt, error wrapping, logging, testing - Git conventions: branch naming, conventional commits - Makefile targets per app - How to add a new application (step-by-step)
367 lines
12 KiB
CSS
367 lines
12 KiB
CSS
/* ============================================================
|
|
SKIC Playground Docs — Dark-first, Sharp, Technical Theme
|
|
Stack: Docusaurus + Tailwind (preflight off) + shadcn/ui (New York / Zinc)
|
|
Design: no rounded corners, Vercel/Linear aesthetic
|
|
============================================================ */
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* --- Fonts --- */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/style.css');
|
|
@import url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-mono/style.css');
|
|
|
|
/* ── shadcn/ui CSS variables (New York / Zinc, radius = 0) ── */
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--ring: 240 5.9% 10%;
|
|
--radius: 0rem; /* SHARP — no rounded corners */
|
|
/* brand accent */
|
|
--skic-accent: 239 84% 67%;
|
|
--skic-green: 160 84% 39%;
|
|
--skic-amber: 38 92% 50%;
|
|
--skic-red: 0 84% 60%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 15.9%;
|
|
--input: 240 3.7% 15.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
--radius: 0rem;
|
|
}
|
|
}
|
|
|
|
/* ── Docusaurus / Infima token overrides ─────────────────── */
|
|
:root {
|
|
--ifm-color-primary: #6366f1;
|
|
--ifm-color-primary-dark: #4f46e5;
|
|
--ifm-color-primary-darker: #4338ca;
|
|
--ifm-color-primary-darkest: #3730a3;
|
|
--ifm-color-primary-light: #818cf8;
|
|
--ifm-color-primary-lighter: #a5b4fc;
|
|
--ifm-color-primary-lightest: #c7d2fe;
|
|
|
|
--ifm-font-family-base: 'Geist', 'Inter', system-ui, sans-serif;
|
|
--ifm-font-family-monospace: 'Geist Mono', 'Fira Code', monospace;
|
|
--ifm-font-size-base: 15px;
|
|
--ifm-line-height-base: 1.7;
|
|
|
|
--ifm-heading-font-weight: 600;
|
|
--ifm-heading-letter-spacing: -0.02em;
|
|
--ifm-h1-font-size: 2.25rem;
|
|
--ifm-h2-font-size: 1.5rem;
|
|
--ifm-h3-font-size: 1.2rem;
|
|
|
|
--ifm-navbar-height: 56px;
|
|
--ifm-navbar-shadow: none;
|
|
--ifm-navbar-background-color: #0a0a0a;
|
|
|
|
/* SHARP — zero radius everywhere */
|
|
--ifm-global-radius: 0;
|
|
--ifm-code-border-radius: 0;
|
|
--ifm-pre-border-radius: 0;
|
|
--ifm-alert-border-radius: 0;
|
|
--ifm-card-border-radius: 0;
|
|
--ifm-button-border-radius: 0;
|
|
--ifm-pagination-nav-border-radius: 0;
|
|
--ifm-badge-border-radius: 0;
|
|
--ifm-toc-border-color: #1f1f1f;
|
|
--ifm-code-font-size: 0.85rem;
|
|
--ifm-pre-padding: 1.25rem;
|
|
|
|
--docusaurus-highlighted-code-line-bg: rgba(99, 102, 241, 0.08);
|
|
}
|
|
|
|
/* Dark mode Infima overrides */
|
|
[data-theme='dark'] {
|
|
--ifm-color-primary: #818cf8;
|
|
--ifm-color-primary-dark: #6366f1;
|
|
--ifm-color-primary-darker: #4f46e5;
|
|
--ifm-color-primary-darkest: #4338ca;
|
|
--ifm-color-primary-light: #a5b4fc;
|
|
--ifm-color-primary-lighter: #c7d2fe;
|
|
--ifm-color-primary-lightest: #e0e7ff;
|
|
|
|
--ifm-background-color: #0a0a0a;
|
|
--ifm-background-surface-color: #111111;
|
|
--ifm-navbar-background-color: #0a0a0a;
|
|
--ifm-sidebar-background: #0a0a0a;
|
|
--ifm-footer-background-color: #0a0a0a;
|
|
|
|
--ifm-color-content: #ededed;
|
|
--ifm-color-content-secondary: #a1a1a1;
|
|
--ifm-color-emphasis-100: #161616;
|
|
--ifm-color-emphasis-200: #1f1f1f;
|
|
--ifm-color-emphasis-300: #2a2a2a;
|
|
--ifm-color-emphasis-400: #444444;
|
|
--ifm-color-emphasis-600: #888888;
|
|
--ifm-color-emphasis-700: #cccccc;
|
|
--ifm-color-emphasis-900: #ffffff;
|
|
|
|
--ifm-hr-border-color: #1f1f1f;
|
|
--ifm-code-background: #161616;
|
|
--ifm-pre-background: #111111;
|
|
|
|
--docusaurus-highlighted-code-line-bg: rgba(129, 140, 248, 0.12);
|
|
}
|
|
|
|
/* ── Force dark navbar in BOTH modes ─────────────────────── */
|
|
/* This is the key fix — lock navbar dark regardless of color scheme */
|
|
.navbar {
|
|
background-color: #0a0a0a !important;
|
|
border-bottom: 1px solid #1f1f1f !important;
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.navbar__title {
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
letter-spacing: -0.02em;
|
|
color: #ededed !important;
|
|
}
|
|
|
|
.navbar__link {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #a1a1a1 !important;
|
|
transition: color 0.12s ease;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.navbar__link:hover,
|
|
.navbar__link--active {
|
|
color: #ededed !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.navbar__logo { height: 22px; }
|
|
|
|
.navbar-sidebar {
|
|
background-color: #0a0a0a !important;
|
|
}
|
|
|
|
.navbar-sidebar__brand {
|
|
background-color: #0a0a0a !important;
|
|
border-bottom: 1px solid #1f1f1f !important;
|
|
}
|
|
|
|
/* ── Typography ──────────────────────────────────────────── */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
h2 {
|
|
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
|
padding-bottom: 0.35rem;
|
|
}
|
|
|
|
/* ── Sidebar ─────────────────────────────────────────────── */
|
|
.theme-doc-sidebar-container {
|
|
border-right: 1px solid #1f1f1f !important;
|
|
}
|
|
|
|
[data-theme='dark'] .theme-doc-sidebar-container {
|
|
background-color: #0a0a0a;
|
|
}
|
|
|
|
.menu__link {
|
|
font-size: 0.875rem;
|
|
border-radius: 0 !important;
|
|
padding: 0.3rem 0.75rem;
|
|
color: var(--ifm-color-content-secondary);
|
|
transition: all 0.12s ease;
|
|
}
|
|
|
|
.menu__link:hover {
|
|
background: var(--ifm-color-emphasis-100);
|
|
color: var(--ifm-color-content);
|
|
}
|
|
|
|
.menu__link--active {
|
|
background: var(--ifm-color-emphasis-100) !important;
|
|
color: var(--ifm-color-primary) !important;
|
|
font-weight: 600;
|
|
border-left: 2px solid var(--ifm-color-primary);
|
|
}
|
|
|
|
.menu__caret { border-radius: 0 !important; }
|
|
|
|
/* ── Code blocks ─────────────────────────────────────────── */
|
|
code {
|
|
font-size: 0.84em;
|
|
border: 1px solid var(--ifm-color-emphasis-200);
|
|
background: var(--ifm-color-emphasis-100);
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.prism-code {
|
|
font-size: 0.84rem;
|
|
line-height: 1.6;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
div[class*='codeBlockContainer'] {
|
|
border: 1px solid var(--ifm-color-emphasis-200);
|
|
box-shadow: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
div[class*='codeBlockTitle'] {
|
|
background: var(--ifm-color-emphasis-100);
|
|
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
|
font-size: 0.78rem;
|
|
font-family: var(--ifm-font-family-monospace);
|
|
color: var(--ifm-color-content-secondary);
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
div[class*='copyButton'],
|
|
div[class*='codeButton'] {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* ── Tables ──────────────────────────────────────────────── */
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
border: 1px solid var(--ifm-color-emphasis-200);
|
|
border-radius: 0 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
thead { background: var(--ifm-color-emphasis-100); }
|
|
|
|
th {
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: var(--ifm-color-content-secondary);
|
|
padding: 0.65rem 1rem;
|
|
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
|
}
|
|
|
|
td {
|
|
padding: 0.65rem 1rem;
|
|
border-bottom: 1px solid var(--ifm-color-emphasis-100);
|
|
}
|
|
|
|
tr:last-child td { border-bottom: none; }
|
|
|
|
tbody tr:hover { background: var(--ifm-color-emphasis-100); }
|
|
|
|
/* ── Admonitions ─────────────────────────────────────────── */
|
|
.admonition {
|
|
border-radius: 0 !important;
|
|
border: 1px solid;
|
|
border-left-width: 2px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.admonition-note { border-color: var(--ifm-color-emphasis-300); background: var(--ifm-color-emphasis-100); }
|
|
.admonition-tip { border-color: #10b981; background: rgba(16,185,129,0.05); }
|
|
.admonition-info { border-color: #6366f1; background: rgba(99,102,241,0.05); }
|
|
.admonition-warning { border-color: #f59e0b; background: rgba(245,158,11,0.05); }
|
|
.admonition-danger { border-color: #ef4444; background: rgba(239,68,68,0.05); }
|
|
.admonition-heading h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; }
|
|
|
|
/* ── TOC ─────────────────────────────────────────────────── */
|
|
.table-of-contents__link {
|
|
font-size: 0.8rem;
|
|
color: var(--ifm-color-content-secondary);
|
|
}
|
|
.table-of-contents__link:hover,
|
|
.table-of-contents__link--active { color: var(--ifm-color-primary); }
|
|
|
|
/* ── Pagination ──────────────────────────────────────────── */
|
|
.pagination-nav__link {
|
|
border: 1px solid var(--ifm-color-emphasis-200);
|
|
border-radius: 0 !important;
|
|
transition: all 0.12s ease;
|
|
}
|
|
.pagination-nav__link:hover {
|
|
border-color: var(--ifm-color-primary);
|
|
background: var(--ifm-color-emphasis-100);
|
|
}
|
|
|
|
/* ── Footer ──────────────────────────────────────────────── */
|
|
.footer {
|
|
border-top: 1px solid #1f1f1f;
|
|
background-color: #0a0a0a !important;
|
|
}
|
|
|
|
.footer__title {
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-weight: 600;
|
|
color: var(--ifm-color-content-secondary);
|
|
}
|
|
|
|
.footer__link-item {
|
|
font-size: 0.875rem;
|
|
color: var(--ifm-color-content-secondary);
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────── */
|
|
.button {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* ── Doc content ─────────────────────────────────────────── */
|
|
.markdown { --ifm-heading-margin-top: 1.75rem; }
|
|
.markdown > h2:first-child { margin-top: 0; }
|
|
|
|
/* ── Scrollbar ───────────────────────────────────────────── */
|
|
::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
::-webkit-scrollbar-track { background: transparent; }
|
|
::-webkit-scrollbar-thumb { background: #2a2a2a; }
|
|
::-webkit-scrollbar-thumb:hover { background: #444; }
|
|
|
|
/* ── Selection ───────────────────────────────────────────── */
|
|
::selection { background: rgba(99,102,241,0.25); }
|
|
|
|
/* ── Announcement bar ────────────────────────────────────── */
|
|
div[class*='announcementBar'] {
|
|
border-radius: 0 !important;
|
|
}
|