B
diff --git a/docs/website/index.html b/docs/website/index.html
index b474f4b..31a7c32 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -68,10 +68,10 @@ body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg)
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px}
.nav-logo{font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-logo img{height:28px;width:auto}
-.nav-logo-dark,.nav-logo-light{display:none}
-:root:not([data-theme="light"]) .nav-logo-dark{display:block}
-[data-theme="light"] .nav-logo-light{display:block}
-[data-theme="light"] .nav-logo-dark{display:none}
+.nav-logo img.nav-logo-dark,.nav-logo img.nav-logo-light{display:none}
+:root:not([data-theme="light"]) .nav-logo img.nav-logo-dark{display:block}
+[data-theme="light"] .nav-logo img.nav-logo-light{display:block}
+[data-theme="light"] .nav-logo img.nav-logo-dark{display:none}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sidebar{position:fixed;top:80px;right:max(16px,calc((100vw - 1200px)/2 - 180px));width:180px;max-height:calc(100vh - 100px);overflow-y:auto;z-index:50;scrollbar-width:none;opacity:0;pointer-events:none;transform:translateX(10px);transition:opacity .3s,transform .3s}
.sidebar.visible{opacity:1;pointer-events:auto;transform:none}
@@ -231,8 +231,10 @@ body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg)
}
@media(max-width:420px){
.nav-inner{padding:8px 10px}
-.nav-logo{max-width:136px}
-.nav-logo img{max-width:136px;height:23px}
+.hero h1{font-size:clamp(1.75rem,8vw,2.15rem);gap:2px 6px}
+.hero-inline-logo{width:min(34vw,128px)}
+.nav-logo{max-width:128px}
+.nav-logo img{max-width:128px;height:22px}
.dir-link{padding:6px 9px;font-size:.75rem}
.theme-toggle{display:none}
.hero{padding-top:38px}
@@ -242,6 +244,23 @@ body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg)
.content pre,.table-wrap{margin-left:-16px;margin-right:-16px}
}
@media(min-width:769px) and (max-width:1200px){.sidebar{display:none}}
+
+@media(max-width:768px){
+html,body{width:100%;max-width:100%;overflow-x:hidden}
+.nav,.nav-inner,.nav-actions,.hero,.posts,.post-card,.article,.article-header,.grid,.card,.content,.footer{min-width:0;max-width:100%}
+.nav-logo img{max-width:120px!important}
+.nav-actions{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+.nav-actions::-webkit-scrollbar{display:none}
+.hero{padding-left:16px!important;padding-right:16px!important}
+.hero h1{font-size:clamp(1.45rem,6.8vw,1.75rem)!important;line-height:1.16!important;white-space:normal!important;overflow-wrap:anywhere}
+.hero h1 .hl{display:inline;overflow-wrap:anywhere}
+.hero-inline-logo{width:min(30vw,118px)!important;max-width:118px!important}
+.posts,.grid,.article,.content{padding-left:16px!important;padding-right:16px!important}
+.post-card,.card{width:100%;max-width:calc(100vw - 32px)}
+.article-title{font-size:clamp(1.45rem,7vw,1.75rem)!important;overflow-wrap:anywhere}
+.post-title,.card h2{font-size:clamp(1rem,5.5vw,1.15rem)!important;overflow-wrap:anywhere}
+.content p,.article p,.post-excerpt,.card p{overflow-wrap:anywhere}
+}
diff --git a/docs/website/use-cases.html b/docs/website/use-cases.html
index bf00d47..e3de877 100644
--- a/docs/website/use-cases.html
+++ b/docs/website/use-cases.html
@@ -25,7 +25,24 @@
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0A0A0A;--bg-s1:#111;--bg-s2:#1A1A1A;--text:#EDEDED;--text-muted:#888;--card:rgba(255,255,255,.05);--card-border:rgba(255,255,255,.08);--primary:#DC2626;--primary-light:#EF4444;--badge-bg:rgba(220,38,38,.12);--badge-text:#EF4444;--nav-bg:rgba(10,10,10,.82);--tag-bg:rgba(255,255,255,.06);--tag-border:rgba(255,255,255,.1);--gold:#F59E0B}
[data-theme="light"]{--bg:#FAFAFA;--bg-s1:#fff;--bg-s2:#F5F5F5;--text:#171717;--text-muted:#666;--card:#fff;--card-border:rgba(0,0,0,.08);--badge-bg:rgba(220,38,38,.08);--badge-text:#DC2626;--nav-bg:rgba(250,250,250,.86);--tag-bg:rgba(0,0,0,.04);--tag-border:rgba(0,0,0,.08)}
-html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:16px}.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border)}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px}.nav-logo{font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;display:flex;gap:8px}.nav-logo .claw{color:var(--primary)}.nav-logo img{display:block;height:28px;width:auto;max-width:190px}.nav-logo-dark,.nav-logo-light{display:none}:root:not([data-theme="light"]) .nav-logo-dark{display:block}[data-theme="light"] .nav-logo-light{display:block}[data-theme="light"] .nav-logo-dark{display:none}.nav-links{display:flex;gap:4px;overflow-x:auto}.nav-links a{color:var(--text-muted);text-decoration:none;font-size:.85rem;padding:6px 12px;border-radius:6px;white-space:nowrap;font-weight:500}.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--card)}.theme-toggle{background:var(--card);border:1px solid var(--card-border);color:var(--text);cursor:pointer;width:36px;height:36px;border-radius:8px;font-size:1.1rem}.hero{text-align:center;padding:80px 24px 48px;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;top:45%;left:50%;width:650px;height:650px;transform:translate(-50%,-60%);background:radial-gradient(circle,rgba(220,38,38,.1) 0%,transparent 60%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--badge-bg);color:var(--badge-text);font-size:.85rem;font-weight:700;padding:6px 16px;border-radius:20px;margin-bottom:20px}.hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px;position:relative}.hero h1 .hl{color:var(--primary)}.hero p{color:var(--text-muted);font-size:1.08rem;max-width:760px;margin:0 auto 28px}.filters{max-width:1200px;margin:0 auto;padding:0 24px 32px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.filter-btn{background:var(--card);border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;padding:8px 18px;border-radius:8px;font-size:.85rem;font-family:inherit;font-weight:600}.filter-btn:hover,.filter-btn.active{color:var(--badge-text);border-color:var(--primary);background:var(--badge-bg)}.grid{max-width:1200px;margin:0 auto;padding:0 24px 56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}.card{background:var(--bg-s1);border:1px solid var(--card-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:all .25s}.card:hover{border-color:rgba(220,38,38,.3);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}.card-kicker{font-size:.75rem;color:var(--badge-text);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.card h2{font-size:1.18rem;line-height:1.3;margin-bottom:10px}.card p{color:var(--text-muted);font-size:.92rem;line-height:1.62;margin-bottom:16px;flex:1}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.tag{font-size:.75rem;color:var(--text-muted);padding:3px 10px;border-radius:6px;background:var(--tag-bg);border:1px solid var(--tag-border);font-weight:600}.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}.links a{color:var(--primary-light);font-size:.83rem;text-decoration:none;font-weight:700}.section{max-width:1200px;margin:0 auto;padding:28px 24px 16px}.section h2{font-size:1.55rem;font-weight:900;margin-bottom:8px}.section p{color:var(--text-muted);max-width:760px}.source-box{max-width:1200px;margin:0 auto 80px;padding:24px;background:var(--bg-s1);border:1px solid var(--card-border);border-radius:16px;color:var(--text-muted)}.source-box a{color:var(--primary-light)}.footer{text-align:center;padding:48px 24px;border-top:1px solid var(--card-border);color:var(--text-muted);font-size:.85rem}.footer a{color:var(--primary-light);text-decoration:none}@media(max-width:768px){.grid{grid-template-columns:1fr;padding:0 16px 40px}.nav-links{display:none}.hero{padding:56px 16px 32px}.filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 16px 20px}.filter-btn{white-space:nowrap}.section{padding:24px 16px 12px}.source-box{margin:0 16px 56px}}
+html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:16px}.nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--card-border)}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:64px}.nav-logo{font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;display:flex;gap:8px}.nav-logo .claw{color:var(--primary)}.nav-logo img{display:block;height:28px;width:auto;max-width:190px}.nav-logo img.nav-logo-dark,.nav-logo img.nav-logo-light{display:none}:root:not([data-theme="light"]) .nav-logo img.nav-logo-dark{display:block}[data-theme="light"] .nav-logo img.nav-logo-light{display:block}[data-theme="light"] .nav-logo img.nav-logo-dark{display:none}.nav-links{display:flex;gap:4px;overflow-x:auto}.nav-links a{color:var(--text-muted);text-decoration:none;font-size:.85rem;padding:6px 12px;border-radius:6px;white-space:nowrap;font-weight:500}.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--card)}.theme-toggle{background:var(--card);border:1px solid var(--card-border);color:var(--text);cursor:pointer;width:36px;height:36px;border-radius:8px;font-size:1.1rem}.hero{text-align:center;padding:80px 24px 48px;position:relative;overflow:hidden}.hero::before{content:'';position:absolute;top:45%;left:50%;width:650px;height:650px;transform:translate(-50%,-60%);background:radial-gradient(circle,rgba(220,38,38,.1) 0%,transparent 60%);pointer-events:none}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--badge-bg);color:var(--badge-text);font-size:.85rem;font-weight:700;padding:6px 16px;border-radius:20px;margin-bottom:20px}.hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px;position:relative}.hero h1 .hl{color:var(--primary)}.hero p{color:var(--text-muted);font-size:1.08rem;max-width:760px;margin:0 auto 28px}.filters{max-width:1200px;margin:0 auto;padding:0 24px 32px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.filter-btn{background:var(--card);border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;padding:8px 18px;border-radius:8px;font-size:.85rem;font-family:inherit;font-weight:600}.filter-btn:hover,.filter-btn.active{color:var(--badge-text);border-color:var(--primary);background:var(--badge-bg)}.grid{max-width:1200px;margin:0 auto;padding:0 24px 56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}.card{background:var(--bg-s1);border:1px solid var(--card-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:all .25s}.card:hover{border-color:rgba(220,38,38,.3);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}.card-kicker{font-size:.75rem;color:var(--badge-text);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.card h2{font-size:1.18rem;line-height:1.3;margin-bottom:10px}.card p{color:var(--text-muted);font-size:.92rem;line-height:1.62;margin-bottom:16px;flex:1}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.tag{font-size:.75rem;color:var(--text-muted);padding:3px 10px;border-radius:6px;background:var(--tag-bg);border:1px solid var(--tag-border);font-weight:600}.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}.links a{color:var(--primary-light);font-size:.83rem;text-decoration:none;font-weight:700}.section{max-width:1200px;margin:0 auto;padding:28px 24px 16px}.section h2{font-size:1.55rem;font-weight:900;margin-bottom:8px}.section p{color:var(--text-muted);max-width:760px}.source-box{max-width:1200px;margin:0 auto 80px;padding:24px;background:var(--bg-s1);border:1px solid var(--card-border);border-radius:16px;color:var(--text-muted)}.source-box a{color:var(--primary-light)}.footer{text-align:center;padding:48px 24px;border-top:1px solid var(--card-border);color:var(--text-muted);font-size:.85rem}.footer a{color:var(--primary-light);text-decoration:none}@media(max-width:768px){.grid{grid-template-columns:1fr;padding:0 16px 40px}.nav-links{display:none}.hero{padding:56px 16px 32px}.filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:0 16px 20px}.filter-btn{white-space:nowrap}.section{padding:24px 16px 12px}.source-box{margin:0 16px 56px}}
+
+@media(max-width:768px){
+html,body{width:100%;max-width:100%;overflow-x:hidden}
+.nav,.nav-inner,.nav-actions,.hero,.posts,.post-card,.article,.article-header,.grid,.card,.content,.footer{min-width:0;max-width:100%}
+.nav-logo img{max-width:120px!important}
+.nav-actions{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
+.nav-actions::-webkit-scrollbar{display:none}
+.hero{padding-left:16px!important;padding-right:16px!important}
+.hero h1{font-size:clamp(1.45rem,6.8vw,1.75rem)!important;line-height:1.16!important;white-space:normal!important;overflow-wrap:anywhere}
+.hero h1 .hl{display:inline;overflow-wrap:anywhere}
+.hero-inline-logo{width:min(30vw,118px)!important;max-width:118px!important}
+.posts,.grid,.article,.content{padding-left:16px!important;padding-right:16px!important}
+.post-card,.card{width:100%;max-width:calc(100vw - 32px)}
+.article-title{font-size:clamp(1.45rem,7vw,1.75rem)!important;overflow-wrap:anywhere}
+.post-title,.card h2{font-size:clamp(1rem,5.5vw,1.15rem)!important;overflow-wrap:anywhere}
+.content p,.article p,.post-excerpt,.card p{overflow-wrap:anywhere}
+}
diff --git a/scripts/validate_static.py b/scripts/validate_static.py
index 9723318..bc3fad9 100755
--- a/scripts/validate_static.py
+++ b/scripts/validate_static.py
@@ -55,6 +55,32 @@ class Parser(HTMLParser):
pass
+class CardGridParser(HTMLParser):
+ """Check directory cards stay inside their responsive grid containers."""
+
+ def __init__(self) -> None:
+ super().__init__(convert_charrefs=True)
+ self.stack: list[tuple[str, set[str], int]] = []
+ self.bad_cards: list[int] = []
+
+ def handle_starttag(self, tag: str, attrs: list[tuple[str, str | None]]) -> None:
+ attr = {key: value or "" for key, value in attrs}
+ classes = set(attr.get("class", "").split())
+ line = self.getpos()[0]
+ parent = self.stack[-1] if self.stack else None
+ if tag == "div" and "card" in classes:
+ parent_is_grid = bool(parent and parent[0] == "div" and "grid" in parent[1])
+ if not parent_is_grid:
+ self.bad_cards.append(line)
+ self.stack.append((tag, classes, line))
+
+ def handle_endtag(self, tag: str) -> None:
+ for index in range(len(self.stack) - 1, -1, -1):
+ if self.stack[index][0] == tag:
+ self.stack = self.stack[:index]
+ return
+
+
def check_html() -> None:
for path in list((ROOT / "docs" / "website").glob("*.html")) + list((ROOT / "docs" / "blog").glob("*.html")) + list((ROOT / "docs" / "public").rglob("*.html")):
parser = Parser()
@@ -65,6 +91,31 @@ def check_html() -> None:
print("HTML parse OK")
+def check_directory_layout() -> None:
+ path = ROOT / "docs" / "website" / "directory.html"
+ parser = CardGridParser()
+ parser.feed(path.read_text(errors="ignore"))
+ if parser.bad_cards:
+ lines = ", ".join(str(line) for line in parser.bad_cards[:20])
+ more = "" if len(parser.bad_cards) <= 20 else f" (+{len(parser.bad_cards) - 20} more)"
+ fail(f"Directory cards outside .grid containers at lines: {lines}{more}")
+ print("Directory card grids OK")
+
+
+def check_nav_logo_theme_rules() -> None:
+ html_paths = list((ROOT / "docs" / "website").glob("*.html")) + list((ROOT / "docs" / "blog").glob("*.html"))
+ bad: list[str] = []
+ for path in html_paths:
+ text = path.read_text(errors="ignore")
+ if "nav-logo-light" not in text:
+ continue
+ if "[data-theme=\"light\"] .nav-logo img.nav-logo-light{display:block}" not in text:
+ bad.append(str(path.relative_to(ROOT)))
+ if bad:
+ fail("Theme logo display rules are missing or too weak in: " + ", ".join(bad))
+ print("Theme logo rules OK")
+
+
def check_vercel() -> None:
config = json.loads((ROOT / "vercel.json").read_text())
missing: list[tuple[str, str]] = []
@@ -111,6 +162,8 @@ def check_readme_anchors() -> None:
def main() -> None:
check_json()
check_html()
+ check_directory_layout()
+ check_nav_logo_theme_rules()
check_vercel()
check_readme_anchors()
print("All static validations passed")
diff --git a/vercel.json b/vercel.json
index 9bca7e4..739de9b 100644
--- a/vercel.json
+++ b/vercel.json
@@ -11,6 +11,9 @@
{ "source": "/blog", "destination": "/docs/blog/blog.html" },
{ "source": "/blog/:slug", "destination": "/docs/blog/:slug.html" },
{ "source": "/blog/:slug.html", "destination": "/docs/blog/:slug.html" },
+ { "source": "/site-theme.css", "destination": "/docs/site-theme.css" },
+ { "source": "/site-theme.js", "destination": "/docs/site-theme.js" },
+ { "source": "/favicon.ico", "destination": "/docs/public/favicon.ico" },
{ "source": "/og-image.png", "destination": "/docs/public/og-image.png" },
{ "source": "/robots.txt", "destination": "/docs/public/robots.txt" },
{ "source": "/sitemap.xml", "destination": "/docs/public/sitemap.xml" },