fix: docs styling bleeds over

This commit is contained in:
nate 2026-03-19 17:32:40 +04:00
parent 2234a1a068
commit 950d82e5b2
1 changed files with 19 additions and 24 deletions

View File

@ -1,8 +1,9 @@
<%~ include('./partials/public-head', { title: 'Documentation', nav: 'docs' }) %> <%~ include('./partials/public-head', { title: 'Documentation', nav: 'docs' }) %>
<style> <style>
body { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; } /* Docs layout */
pre, code { font-family: inherit; } .docs-wrap { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, monospace; }
.docs-wrap pre, .docs-wrap code { font-family: inherit; }
/* Sidebar nav */ /* Sidebar nav */
.nav-link { display: block; padding: 0.3rem 0.75rem; font-size: 0.8rem; color: #6b7280; border-left: 2px solid transparent; transition: all 0.1s; } .nav-link { display: block; padding: 0.3rem 0.75rem; font-size: 0.8rem; color: #6b7280; border-left: 2px solid transparent; transition: all 0.1s; }
@ -10,14 +11,19 @@
.nav-link.active { color: #93c5fd; border-left-color: #3b82f6; } .nav-link.active { color: #93c5fd; border-left-color: #3b82f6; }
.nav-section { font-size: 0.7rem; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 0.75rem 0.25rem; margin-top: 0.5rem; } .nav-section { font-size: 0.7rem; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.75rem 0.75rem 0.25rem; margin-top: 0.5rem; }
/* Content */ /* Content — scoped to .docs */
.section { padding-top: 3rem; padding-bottom: 1rem; border-top: 1px solid #111827; margin-top: 2rem; } .docs .section { padding-top: 3rem; padding-bottom: 1rem; border-top: 1px solid #111827; margin-top: 2rem; }
.section:first-child { border-top: none; margin-top: 0; padding-top: 0; } .docs .section:first-child { border-top: none; margin-top: 0; padding-top: 0; }
h2 { font-size: 1.2rem; font-weight: 700; color: #f9fafb; margin-bottom: 0.5rem; } .docs h2 { font-size: 1.2rem; font-weight: 700; color: #f9fafb; margin-bottom: 0.5rem; }
h3 { font-size: 0.85rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.5rem 0 0.5rem; } .docs h3 { font-size: 0.85rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.5rem 0 0.5rem; }
p { font-size: 0.875rem; color: #6b7280; line-height: 1.7; margin-bottom: 0.75rem; } .docs p { font-size: 0.875rem; color: #6b7280; line-height: 1.7; margin-bottom: 0.75rem; }
p a { color: #93c5fd; } .docs p a { color: #93c5fd; }
p a:hover { color: #bfdbfe; } .docs p a:hover { color: #bfdbfe; }
.docs table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.5rem 0 1.25rem; }
.docs th { text-align: left; color: #4b5563; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.75rem; border-bottom: 1px solid #111827; }
.docs td { color: #6b7280; padding: 0.45rem 0.75rem; border-bottom: 1px solid #0d1117; vertical-align: top; }
.docs td:first-child { color: #93c5fd; white-space: nowrap; font-size: 0.78rem; }
.docs td code { background: #1e293b; color: #94a3b8; padding: 0.1em 0.35em; border-radius: 0.2rem; font-size: 0.75rem; }
/* Code blocks */ /* Code blocks */
.cb { background: #0f172a; border: 1px solid #1e293b; border-radius: 0.5rem; overflow: hidden; margin: 0.75rem 0 1.25rem; } .cb { background: #0f172a; border: 1px solid #1e293b; border-radius: 0.5rem; overflow: hidden; margin: 0.75rem 0 1.25rem; }
@ -28,18 +34,7 @@
.cb pre { padding: 0.85rem; font-size: 0.78rem; line-height: 1.65; color: #e2e8f0; overflow-x: auto; margin: 0; } .cb pre { padding: 0.85rem; font-size: 0.78rem; line-height: 1.65; color: #e2e8f0; overflow-x: auto; margin: 0; }
/* Syntax */ /* Syntax */
.k { color: #c084fc; } .k { color: #c084fc; } .s { color: #34d399; } .n { color: #f59e0b; } .o { color: #60a5fa; } .c { color: #334155; }
.s { color: #34d399; }
.n { color: #f59e0b; }
.o { color: #60a5fa; }
.c { color: #334155; }
/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.5rem 0 1.25rem; }
th { text-align: left; color: #4b5563; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.4rem 0.75rem; border-bottom: 1px solid #111827; }
td { color: #6b7280; padding: 0.45rem 0.75rem; border-bottom: 1px solid #0d1117; vertical-align: top; }
td:first-child { color: #93c5fd; white-space: nowrap; font-size: 0.78rem; }
td code { background: #1e293b; color: #94a3b8; padding: 0.1em 0.35em; border-radius: 0.2rem; font-size: 0.75rem; }
/* Endpoint blocks */ /* Endpoint blocks */
.endpoint { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; } .endpoint { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
@ -52,7 +47,7 @@
.endpoint-desc { font-size: 0.8rem; color: #4b5563; margin-bottom: 1rem; } .endpoint-desc { font-size: 0.8rem; color: #4b5563; margin-bottom: 1rem; }
</style> </style>
<div class="flex max-w-6xl mx-auto pt-16"> <div class="docs-wrap flex max-w-6xl mx-auto pt-16">
<!-- Sidebar --> <!-- Sidebar -->
<aside class="w-52 shrink-0 sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-6 hidden md:block"> <aside class="w-52 shrink-0 sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto py-6 hidden md:block">
@ -75,7 +70,7 @@
</aside> </aside>
<!-- Main content --> <!-- Main content -->
<main class="flex-1 px-10 py-8 max-w-3xl"> <main class="docs flex-1 px-10 py-8 max-w-3xl">
<!-- Overview --> <!-- Overview -->
<div id="overview" class="section"> <div id="overview" class="section">