fix(website): fix dark nav header on blog, add interactive screenshots

- Remove site-nav--dark class from all pages (blog, homepage)
- Add nav color overrides to all blog pages (light background, dark text)
- Homepage: hover screenshots to swap dark/light, click to expand both
  side by side in overlay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 15:36:08 -05:00
parent 5b78cd9869
commit e8151845ed
9 changed files with 116 additions and 51 deletions

View File

@@ -35,6 +35,9 @@
--accent: #8a7a48;
}
body { background-color: #eae7de; color: #1a1810; }
.site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
.site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
.site-nav .nav-link:hover { color: #8a7a48 !important; }
.dark { /* prevent dark mode */ }
</style>
<style>
@@ -100,7 +103,7 @@
</head>
<body>
<nav class="site-nav site-nav--dark">
<nav class="site-nav">
<div class="nav-inner container">
<a href="../index.html" class="nav-logo">
<svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">