fix: use docs-content class for consistent light theme on SEO pages

4 pages had custom inline styles using landing-page CSS variables
(--text-primary etc) which render as light-on-dark. Switched all
pages to use the shared docs-content class which uses --docs-*
variables for the light theme.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-15 21:33:11 -05:00
parent 478760dee4
commit 74d3da0346
4 changed files with 4 additions and 368 deletions

View File

@@ -53,105 +53,6 @@
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Fira+Code:wght@400;500&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
<style>
.doc-page {
max-width: 760px;
margin: 0 auto;
padding: 80px 24px 120px;
}
.doc-page-meta {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 8px;
}
.doc-page h1 {
font-family: "Outfit", sans-serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 32px;
}
.doc-page h2 {
font-family: "Outfit", sans-serif;
font-weight: 600;
font-size: 1.4rem;
color: var(--text-primary);
margin-top: 56px;
margin-bottom: 16px;
}
.doc-page p {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.75;
margin-bottom: 20px;
}
.doc-page p strong {
color: var(--text-primary);
}
.doc-page a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.doc-page a:hover {
color: var(--text-primary);
}
.doc-page .back-link {
display: inline-block;
margin-bottom: 32px;
font-size: 14px;
text-decoration: none;
color: var(--text-muted);
}
.doc-page .back-link:hover {
color: var(--accent);
}
.doc-page ul {
margin: 0 0 20px 0;
padding-left: 24px;
}
.doc-page ul li {
color: var(--text-secondary);
font-size: 1.05rem;
line-height: 1.75;
margin-bottom: 8px;
}
.doc-page ul li strong {
color: var(--text-primary);
}
.doc-page code {
font-family: "Fira Code", monospace;
font-size: 0.9em;
background: rgba(42, 157, 143, 0.08);
color: var(--text-primary);
padding: 2px 6px;
border-radius: 3px;
}
.doc-related {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.doc-related h2 {
margin-top: 0;
font-size: 1.1rem;
}
.doc-related ul {
list-style: none;
padding-left: 0;
}
.doc-related ul li {
margin-bottom: 10px;
}
.doc-related ul li a {
font-size: 1rem;
}
@media (max-width: 480px) {
.doc-page h1 { font-size: 1.8rem; }
.doc-page { padding: 60px 20px 80px; }
}
</style>
</head>
<body class="docs-page">
@@ -187,7 +88,7 @@
</nav>
<main>
<article class="doc-page">
<article class="docs-content" style="max-width: 800px; margin: 0 auto; padding: 60px 24px 120px;">
<a href="../docs.html" class="back-link">&larr; Back to Docs</a>
<div class="doc-page-meta">MikroTik Monitoring &mdash; The Other Dude</div>