feat: merge Docusaurus and Gitea documentation skills

2026-08-14 12:32:08 +00:00
parent cfb006d7ea
commit b08614dc90
28 changed files with 4202 additions and 1 deletions
@@ -0,0 +1,109 @@
+# Modern Docusaurus Dark Theme — CSS Reference
+
+Dark-first, Vercel/Linear-inspired theme built for SKIC Playground docs.
+Full source lives at `/opt/data/documentation/src/css/custom.css`.
+
+## Design Decisions
+
+- **Font**: Geist (by Vercel) via CDN + Geist Mono for code
+- **Accent**: Indigo `#6366f1` (light) / `#818cf8` (dark)
+- **Background**: `#0a0a0a` (near-black, not pure black)
+- **Surface**: `#111111` for cards, sidebars
+- **Text**: `#ededed` primary, `#a1a1a1` secondary
+
+## Key Overrides
+
+### Dark mode base palette
+```css
+[data-theme='dark'] {
+  --ifm-color-primary:          #818cf8;
+  --ifm-background-color:       #0a0a0a;
+  --ifm-background-surface-color: #111111;
+  --ifm-navbar-background-color: rgba(10, 10, 10, 0.85);
+  --ifm-color-content:          #ededed;
+  --ifm-color-content-secondary: #a1a1a1;
+  --ifm-color-emphasis-100:     #1a1a1a;
+  --ifm-color-emphasis-200:     #222222;
+  --ifm-color-emphasis-300:     #333333;
+}
+```
+
+### Typography
+```css
+:root {
+  --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-letter-spacing: -0.02em;
+  --ifm-h1-font-size:          2.25rem;
+}
+h2 { border-bottom: 1px solid var(--ifm-color-emphasis-200); }
+```
+
+### Glassmorphic Navbar
+```css
+.navbar {
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+[data-theme='dark'] .navbar { background: rgba(10, 10, 10, 0.85); }
+```
+
+### Table Styling
+```css
+table { border: 1px solid var(--ifm-color-emphasis-200); border-radius: 8px; overflow: hidden; }
+thead { background: var(--ifm-color-emphasis-100); }
+th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
+tbody tr:hover { background: var(--ifm-color-emphasis-100); }
+```
+
+### Hero Section (homepage)
+```css
+.heroTitle {
+  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 60%, #818cf8 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: clamp(2.5rem, 5vw, 3.75rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+```
+
+### App Cards (dark glass style)
+```css
+.appCard {
+  background: #111111;
+  border: 1px solid #222222;
+  border-radius: 12px;
+  transition: all 0.15s ease;
+}
+.appCard:hover {
+  border-color: #6366f1;
+  background: #161625;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(99,102,241,0.12);
+}
+```
+
+## Prism Code Theme
+Use `oneDark` for both light and dark (visually consistent in docs):
+```ts
+prism: {
+  theme: prismThemes.oneDark,
+  darkTheme: prismThemes.oneDark,
+  additionalLanguages: ['bash', 'python', 'sql', 'yaml', 'json', 'typescript', 'docker'],
+},
+```
+
+## Announcement Bar
+```ts
+announcementBar: {
+  id: 'wip',
+  content: '🚧 Under active development',
+  backgroundColor: '#1a1a2e',
+  textColor: '#818cf8',
+  isCloseable: true,
+},
+```