monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/website/blog/100-simulated-routers.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -121,7 +124,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/500-devices-broke-the-api.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -141,7 +144,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/free-tier-cap.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -148,7 +151,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/index.html
View File

@@ -35,6 +35,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -100,7 +103,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/not-posting-on-reddit.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -215,7 +218,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/not-stable-software.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -121,7 +124,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/what-you-can-do-today.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -121,7 +124,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

5
docs/website/blog/why-this-exists.html
View File

@@ -57,6 +57,9 @@
--accent: #8a7a48; --accent: #8a7a48;
} }
body { background-color: #eae7de; color: #1a1810; } 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 */ } .dark { /* prevent dark mode */ }
</style> </style>
<style> <style>
@@ -121,7 +124,7 @@
</head> </head>
<body> <body>
<nav class="site-nav site-nav--dark"> <nav class="site-nav">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="../index.html" class="nav-logo"> <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"> <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">

127
docs/website/index.html
View File

@@ -237,27 +237,65 @@
.wp-screenshot-card { .wp-screenshot-card {
background: #f6f4ec; background: #f6f4ec;
border: 1px solid rgba(40, 36, 28, 0.12); border: 1px solid rgba(40, 36, 28, 0.12);
border-radius: 8px; border-radius: 2px;
overflow: hidden; overflow: hidden;
position: relative;
cursor: pointer;
} }
.wp-screenshot-card .ss-light,
.wp-screenshot-card img { .wp-screenshot-card .ss-dark {
width: 100%; width: 100%;
display: block; display: block;
cursor: zoom-in;
transition: opacity 0.2s ease;
} }
.wp-screenshot-card .ss-dark {
.wp-screenshot-card img:hover { position: absolute;
opacity: 0.92; top: 0; left: 0;
opacity: 0;
transition: opacity 150ms linear;
}
.wp-screenshot-card:hover .ss-dark {
opacity: 1;
} }
.wp-screenshot-caption { .wp-screenshot-caption {
padding: 10px 14px; padding: 8px 14px;
font-size: 0.8rem; font-size: 0.75rem;
color: #8a8578; color: #8a8578;
font-weight: 500; font-weight: 500;
display: flex;
justify-content: space-between;
} }
.wp-screenshot-caption .ss-hint {
font-size: 0.65rem;
color: #b0aa9a;
}
.wp-screenshot-expanded {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: rgba(14,13,11,0.85);
padding: 40px;
cursor: pointer;
align-items: center;
justify-content: center;
gap: 12px;
}
.wp-screenshot-expanded.active { display: flex; }
.wp-screenshot-expanded img {
max-width: 48%;
max-height: 90vh;
border-radius: 2px;
border: 1px solid rgba(180,170,150,0.15);
}
.wp-screenshot-expanded .ss-label {
position: absolute;
bottom: 16px;
font-size: 11px;
color: #948e80;
font-family: 'IBM Plex Mono', monospace;
}
.wp-screenshot-expanded .ss-label-left { left: 40px; }
.wp-screenshot-expanded .ss-label-right { right: 40px; }
/* ---- Caveats / what-it-is-not ---- */ /* ---- Caveats / what-it-is-not ---- */
.wp-caveats { .wp-caveats {
@@ -394,7 +432,7 @@
<a href="#main-content" class="skip-link">Skip to main content</a> <a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation --> <!-- Navigation -->
<nav class="site-nav site-nav--dark" aria-label="Main navigation"> <nav class="site-nav" aria-label="Main navigation">
<div class="nav-inner container"> <div class="nav-inner container">
<a href="index.html" class="nav-logo"> <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-hidden="true"> <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-hidden="true">
@@ -459,45 +497,38 @@
<h2>Screenshots</h2> <h2>Screenshots</h2>
<div class="wp-screenshot-grid"> <div class="wp-screenshot-grid">
<figure class="wp-screenshot-card screenshot-card"> <figure class="wp-screenshot-card" data-light="assets/01-overview-light.png" data-dark="assets/01-overview-dark.png" onclick="expandScreenshot(this)">
<img src="assets/01-overview-light.png" alt="Fleet overview — light mode" loading="lazy" width="1440" height="900"> <img class="ss-light" src="assets/01-overview-light.png" alt="Fleet overview" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Fleet overview — light</figcaption> <img class="ss-dark" src="assets/01-overview-dark.png" alt="Fleet overview — dark" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Fleet overview <span class="ss-hint">hover for dark · click for both</span></figcaption>
</figure> </figure>
<figure class="wp-screenshot-card screenshot-card"> <figure class="wp-screenshot-card" data-light="assets/02-device-detail-light.png" data-dark="assets/02-device-detail-dark.png" onclick="expandScreenshot(this)">
<img src="assets/01-overview-dark.png" alt="Fleet overview — dark mode" loading="lazy" width="1440" height="900"> <img class="ss-light" src="assets/02-device-detail-light.png" alt="Device management" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Fleet overview — dark</figcaption> <img class="ss-dark" src="assets/02-device-detail-dark.png" alt="Device management — dark" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Device management <span class="ss-hint">hover for dark · click for both</span></figcaption>
</figure> </figure>
<figure class="wp-screenshot-card screenshot-card"> <figure class="wp-screenshot-card" data-light="assets/03-interfaces-light.png" data-dark="assets/03-interfaces-dark.png" onclick="expandScreenshot(this)">
<img src="assets/02-device-detail-light.png" alt="Device management — light mode" loading="lazy" width="1440" height="900"> <img class="ss-light" src="assets/03-interfaces-light.png" alt="Interface configuration" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Device management — light</figcaption> <img class="ss-dark" src="assets/03-interfaces-dark.png" alt="Interface configuration — dark" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Interface configuration <span class="ss-hint">hover for dark · click for both</span></figcaption>
</figure> </figure>
<figure class="wp-screenshot-card screenshot-card"> <figure class="wp-screenshot-card" data-light="assets/04-firmware-light.png" data-dark="assets/04-firmware-dark.png" onclick="expandScreenshot(this)">
<img src="assets/02-device-detail-dark.png" alt="Device management — dark mode" loading="lazy" width="1440" height="900"> <img class="ss-light" src="assets/04-firmware-light.png" alt="Firmware management" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Device management — dark</figcaption> <img class="ss-dark" src="assets/04-firmware-dark.png" alt="Firmware management — dark" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Firmware management <span class="ss-hint">hover for dark · click for both</span></figcaption>
</figure> </figure>
<figure class="wp-screenshot-card screenshot-card"> </div>
<img src="assets/03-interfaces-light.png" alt="Interface configuration — light mode" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Interface configuration — light</figcaption>
</figure>
<figure class="wp-screenshot-card screenshot-card"> <div class="wp-screenshot-expanded" id="ss-expanded" onclick="this.classList.remove('active')">
<img src="assets/03-interfaces-dark.png" alt="Interface configuration — dark mode" loading="lazy" width="1440" height="900"> <img id="ss-exp-light" src="" alt="Light mode">
<figcaption class="wp-screenshot-caption">Interface configuration — dark</figcaption> <img id="ss-exp-dark" src="" alt="Dark mode">
</figure> <span class="ss-label ss-label-left">light</span>
<span class="ss-label ss-label-right">dark</span>
<figure class="wp-screenshot-card screenshot-card"> </div>
<img src="assets/04-firmware-light.png" alt="Firmware management — light mode" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Firmware management — light</figcaption>
</figure>
<figure class="wp-screenshot-card screenshot-card">
<img src="assets/04-firmware-dark.png" alt="Firmware management — dark mode" loading="lazy" width="1440" height="900">
<figcaption class="wp-screenshot-caption">Firmware management — dark</figcaption>
</figure>
</div> </div>
</div> </div>
@@ -624,9 +655,19 @@ python3 setup.py</code>
lb.addEventListener('click', closeLightbox); lb.addEventListener('click', closeLightbox);
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeLightbox(); if (e.key === 'Escape') {
closeLightbox();
document.getElementById('ss-expanded').classList.remove('active');
}
}); });
})(); })();
function expandScreenshot(card) {
var overlay = document.getElementById('ss-expanded');
document.getElementById('ss-exp-light').src = card.dataset.light;
document.getElementById('ss-exp-dark').src = card.dataset.dark;
overlay.classList.add('active');
}
</script> </script>
<script> <script>
(function() { (function() {