fix: docs styling bleeds over
This commit is contained in:
parent
2234a1a068
commit
950d82e5b2
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue