From fdeef5a8fbfdd758138e32e699cc5fab9b96ec8b Mon Sep 17 00:00:00 2001 From: ausbernard <109692469+ausbernard@users.noreply.github.com> Date: Thu, 28 May 2026 00:05:14 -0700 Subject: [PATCH] dark mode --- about.html | 59 ++++++++++++- index.html | 78 +++++++++++++++--- writing/cicd-same-image.html | 68 ++++++++++++++- writing/htmx-production.html | 68 ++++++++++++++- writing/index.html | 82 +++++++++++++++++-- ...verengineering-operational-exhaustion.html | 68 ++++++++++++++- writing/partida-gap.html | 68 ++++++++++++++- writing/terraform-dishwasher.html | 68 ++++++++++++++- 8 files changed, 521 insertions(+), 38 deletions(-) diff --git a/about.html b/about.html index dd42922..a6dc92f 100644 --- a/about.html +++ b/about.html @@ -14,6 +14,24 @@ --ink-2: #3D4870; --muted: #C0BDB5; --red: #e40000; + --accent: #CAFF33; + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -68,8 +86,7 @@ font-family: 'Questrial', sans-serif; font-size: 0.85rem; letter-spacing: 0.01em; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -78,8 +95,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── BLOB HERO ─── */ .blob-section { @@ -187,6 +207,7 @@ .nav-links a { font-size: 0.8rem; } .nav-contact { font-size: 0.72rem; padding: 0.35rem 0.75rem; } .nav-linkedin svg { width: 16px; height: 16px; } + .nav-theme-toggle { display: none; } .blob-section { padding: 2rem 1.5rem 1.5rem; } .about-identity { padding: 2rem 1.5rem 0; } .about-data { padding: 0 1.5rem 2rem; } @@ -205,6 +226,11 @@ + Contact me @@ -261,5 +287,34 @@

Austin Edmonson

Whether it's a SaaS integration or my own product, I don't live by "good enough." I want things done quickly, thoroughly, safely — and with some pizzaz. That's the standard I hold for everything I touch.

+ + diff --git a/index.html b/index.html index d6f7175..ed2f82b 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,28 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + } + + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -67,8 +89,7 @@ font-family: 'Questrial', sans-serif; font-size: 0.85rem; letter-spacing: 0.01em; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -77,9 +98,13 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } + /* ─── HERO ─── */ .hero { padding: 5rem 3rem 8rem; @@ -91,7 +116,6 @@ line-height: 1.04; color: var(--ink); letter-spacing: -0.02em; - text-shadow: 0 4px 16px rgba(30, 42, 94, 0.1); } .hero-h2 { @@ -101,7 +125,6 @@ color: var(--ink); letter-spacing: -0.02em; margin-top: 0.2em; - text-shadow: 0 4px 16px rgba(30, 42, 94, 0.1); } .hero-body { @@ -164,7 +187,7 @@ .work-item-title { font-family: 'Rozha One', serif; - font-size: clamp(1.4rem, 2.5vw, 2rem); + font-size: 1.25rem; line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; @@ -173,7 +196,7 @@ .work-item-desc { font-family: 'Questrial', sans-serif; - font-size: 0.88rem; + font-size: 0.95rem; line-height: 1.7; color: var(--ink-2); } @@ -272,7 +295,7 @@ .writing-item-title { font-family: 'Rozha One', serif; - font-size: clamp(1.3rem, 2.5vw, 1.9rem); + font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.25rem; @@ -331,7 +354,7 @@ .oss-title { font-family: 'Rozha One', serif; - font-size: 1.1rem; + font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); @@ -340,7 +363,7 @@ .oss-desc { font-family: 'Questrial', sans-serif; - font-size: 0.84rem; + font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); } @@ -348,7 +371,7 @@ .oss-desc code { font-family: 'Courier New', monospace; font-size: 0.82em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; color: var(--ink); @@ -397,6 +420,7 @@ .nav-links a { font-size: 0.8rem; } .nav-contact { font-size: 0.72rem; padding: 0.35rem 0.75rem; } .nav-linkedin svg { width: 16px; height: 16px; } + .nav-theme-toggle { display: none; } .hero { padding: 3.5rem 1.5rem 6rem; } .hero-body { margin-top: 2.5rem; max-width: 100%; } .glyph-strip { grid-template-columns: repeat(2, 1fr); height: auto; margin-bottom: 4rem; } @@ -421,6 +445,11 @@ + Contact me @@ -565,5 +594,34 @@

Terraform is Like a Dishwasher: Great for Daily L + + diff --git a/writing/cicd-same-image.html b/writing/cicd-same-image.html index 9ff37c6..becbcf5 100644 --- a/writing/cicd-same-image.html +++ b/writing/cicd-same-image.html @@ -13,6 +13,30 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + --pre-bg: rgba(30, 42, 94, 0.05); + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -65,8 +89,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -74,8 +97,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── POST ─── */ .post-wrap { @@ -160,14 +186,14 @@ .post-body code { font-family: 'Courier New', monospace; font-size: 0.88em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } .post-body pre { - background: rgba(30, 42, 94, 0.05); + background: var(--pre-bg); border: 1px solid var(--muted); border-radius: 8px; padding: 1.25rem 1.5rem; @@ -237,6 +263,11 @@ + Contact me @@ -518,5 +549,34 @@

We Stopped Trusting Deployments Until We Fixed This

document.getElementById('post-content').innerHTML = marked.parse(document.getElementById('md').textContent.trim()); + + \ No newline at end of file diff --git a/writing/htmx-production.html b/writing/htmx-production.html index 5cbc16f..53a1a03 100644 --- a/writing/htmx-production.html +++ b/writing/htmx-production.html @@ -13,6 +13,30 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + --pre-bg: rgba(30, 42, 94, 0.05); + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -65,8 +89,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -74,8 +97,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── POST ─── */ .post-wrap { @@ -160,14 +186,14 @@ .post-body code { font-family: 'Courier New', monospace; font-size: 0.88em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } .post-body pre { - background: rgba(30, 42, 94, 0.05); + background: var(--pre-bg); border: 1px solid var(--muted); border-radius: 8px; padding: 1.25rem 1.5rem; @@ -237,6 +263,11 @@ + Contact me @@ -288,5 +319,34 @@

HTMX in production: what nobody tells you about going hyp document.getElementById('post-content').innerHTML = marked.parse(document.getElementById('md').textContent.trim()); + + \ No newline at end of file diff --git a/writing/index.html b/writing/index.html index 5e888d7..ce504ed 100644 --- a/writing/index.html +++ b/writing/index.html @@ -13,6 +13,24 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -66,8 +84,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -75,8 +92,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── HERO ─── */ .hero { @@ -165,7 +185,7 @@ .post-row-date { font-family: 'Questrial', sans-serif; - font-size: 0.65rem; + font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); @@ -175,7 +195,7 @@ .post-row-title { font-family: 'Rozha One', serif; - font-size: clamp(1.15rem, 2vw, 1.6rem); + font-size: clamp(1.3rem, 2.2vw, 1.85rem); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; @@ -184,7 +204,7 @@ .post-row-excerpt { font-family: 'Questrial', sans-serif; - font-size: 0.88rem; + font-size: 0.97rem; line-height: 1.7; color: var(--ink-2); margin-bottom: 0.75rem; @@ -193,7 +213,7 @@ .post-row-tag { font-family: 'Questrial', sans-serif; - font-size: 0.62rem; + font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } @@ -212,12 +232,28 @@ .nav-links a { font-size: 0.8rem; } .nav-contact { font-size: 0.72rem; padding: 0.35rem 0.75rem; } .nav-linkedin svg { width: 16px; height: 16px; } + .nav-theme-toggle { display: none; } .hero { padding: 3rem 1.5rem 2.5rem; } .hero-sub { max-width: 100%; } .tag-filter { padding: 0 1.5rem 2rem; gap: 0.35rem 0.85rem; } .post-list { padding: 0 1.5rem 8rem; } .post-row { grid-template-columns: 48px 1fr; gap: 0 0.85rem; padding: 1.25rem 1rem; } } + + [data-theme="dark"] .row-platform, + :root:not([data-theme="light"]) .row-platform { background: rgba(103, 119, 182, 0.25); } + [data-theme="dark"] .row-product, + :root:not([data-theme="light"]) .row-product { background: rgba(178, 134, 34, 0.25); } + [data-theme="dark"] .row-engineering, + :root:not([data-theme="light"]) .row-engineering { background: rgba(132, 158, 21, 0.25); } + [data-theme="dark"] .row-design, + :root:not([data-theme="light"]) .row-design { background: rgba(209, 112, 137, 0.25); } + [data-theme="dark"] .row-ux, + :root:not([data-theme="light"]) .row-ux { background: rgba(216, 86, 14, 0.25); } + [data-theme="dark"] .row-infra, + :root:not([data-theme="light"]) .row-infra { background: rgba(146, 162, 166, 0.25); } + [data-theme="dark"] .row-terraform, + :root:not([data-theme="light"]) .row-terraform { background: rgba(103, 119, 182, 0.25); } @@ -231,6 +267,11 @@ + Contact me @@ -329,5 +370,34 @@

Writing.

}); })(); + + diff --git a/writing/overengineering-operational-exhaustion.html b/writing/overengineering-operational-exhaustion.html index e0a888f..eef2054 100644 --- a/writing/overengineering-operational-exhaustion.html +++ b/writing/overengineering-operational-exhaustion.html @@ -13,6 +13,30 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + --pre-bg: rgba(30, 42, 94, 0.05); + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -65,8 +89,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -74,8 +97,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── POST ─── */ .post-wrap { @@ -160,14 +186,14 @@ .post-body code { font-family: 'Courier New', monospace; font-size: 0.88em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } .post-body pre { - background: rgba(30, 42, 94, 0.05); + background: var(--pre-bg); border: 1px solid var(--muted); border-radius: 8px; padding: 1.25rem 1.5rem; @@ -237,6 +263,11 @@ + Contact me @@ -381,5 +412,34 @@

We Were Overengineering Ourselves Into Operational Exhaus document.getElementById('post-content').innerHTML = marked.parse(document.getElementById('md').textContent.trim()); + + \ No newline at end of file diff --git a/writing/partida-gap.html b/writing/partida-gap.html index fce863e..2b1a121 100644 --- a/writing/partida-gap.html +++ b/writing/partida-gap.html @@ -13,6 +13,30 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + --pre-bg: rgba(30, 42, 94, 0.05); + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -65,8 +89,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -74,8 +97,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── POST ─── */ .post-wrap { @@ -160,14 +186,14 @@ .post-body code { font-family: 'Courier New', monospace; font-size: 0.88em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } .post-body pre { - background: rgba(30, 42, 94, 0.05); + background: var(--pre-bg); border: 1px solid var(--muted); border-radius: 8px; padding: 1.25rem 1.5rem; @@ -237,6 +263,11 @@ + Contact me @@ -285,5 +316,34 @@

Why we built Partida: the gap no one was filling in immig document.getElementById('post-content').innerHTML = marked.parse(document.getElementById('md').textContent.trim()); + + \ No newline at end of file diff --git a/writing/terraform-dishwasher.html b/writing/terraform-dishwasher.html index 5fae68b..f475f41 100644 --- a/writing/terraform-dishwasher.html +++ b/writing/terraform-dishwasher.html @@ -13,6 +13,30 @@ --ink: #1E2A5E; --ink-2: #3D4870; --muted: #C0BDB5; + --accent: #CAFF33; + --code-bg: rgba(30, 42, 94, 0.07); + --pre-bg: rgba(30, 42, 94, 0.05); + } + [data-theme="dark"] { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } + + @media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --bg: #111318; + --ink: #E6E1D6; + --ink-2: #9EA3B8; + --muted: #6B7280; + --accent: #CAFF33; + --code-bg: rgba(255, 255, 255, 0.09); + --pre-bg: rgba(255, 255, 255, 0.06); + } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @@ -65,8 +89,7 @@ .nav-contact { font-family: 'Questrial', sans-serif; font-size: 0.85rem; - color: #1E2A5E; - background: #CAFF33; + background: var(--accent); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 999px; @@ -74,8 +97,11 @@ } .nav-contact:hover { opacity: 0.85; transform: scale(1.03); } + a.nav-contact { color: #1E2A5E; } .nav-linkedin { color: var(--ink); opacity: 0.5; display: flex; align-items: center; transition: opacity 0.15s; border: 1.5px solid currentColor; border-radius: 6px; padding: 2px 3px; } .nav-linkedin:hover { opacity: 1; } + .nav-theme-toggle { background: none; border: 1.5px solid var(--ink); border-radius: 6px; padding: 2px 3px; color: var(--ink); opacity: 0.5; cursor: pointer; display: flex; align-items: center; transition: opacity 0.15s; font-size: 0; line-height: 0; } + .nav-theme-toggle:hover { opacity: 1; } /* ─── POST ─── */ .post-wrap { @@ -160,14 +186,14 @@ .post-body code { font-family: 'Courier New', monospace; font-size: 0.88em; - background: rgba(30, 42, 94, 0.07); + background: var(--code-bg); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } .post-body pre { - background: rgba(30, 42, 94, 0.05); + background: var(--pre-bg); border: 1px solid var(--muted); border-radius: 8px; padding: 1.25rem 1.5rem; @@ -237,6 +263,11 @@ + Contact me @@ -498,5 +529,34 @@

Terraform is Like a Dishwasher: Great for Daily Loads, Ov document.getElementById('post-content').innerHTML = marked.parse(document.getElementById('md').textContent.trim()); + + \ No newline at end of file