jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: switch dark mode to pure black

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 23:41:09 +00:00
parent 7d06d18ccb
commit d55ead82d7
20 changed files with 642 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Header.astro
View File

@@ -14,7 +14,7 @@ const { version } = Astro.props;
id="site-header"
class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-slate-950/85"
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"
>
<div
class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -24,7 +24,7 @@ const { version } = Astro.props;
<a
href="#hero"
class="flex items-center gap-3 no-underline
text-gray-950 dark:text-slate-50
text-gray-950 dark:text-neutral-50
hover:text-sky-600 transition-colors"
>
<span class="font-display font-bold text-lg tracking-tight">
@@ -45,9 +45,9 @@ const { version } = Astro.props;
href="#about"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="about"
>
@@ -57,9 +57,9 @@ const { version } = Astro.props;
href="#spec"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="spec"
>
@@ -69,9 +69,9 @@ const { version } = Astro.props;
href="#faq"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="faq"
>
@@ -88,9 +88,9 @@ const { version } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-gray-100 dark:hover:bg-slate-800"
text-gray-500 dark:text-neutral-500
hover:text-gray-950 dark:hover:text-neutral-50
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -105,8 +105,8 @@ const { version } = Astro.props;
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg
text-gray-500 dark:text-slate-500
hover:bg-gray-100 dark:hover:bg-slate-800"
text-gray-500 dark:text-neutral-500
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="Toggle menu"
>
<svg
@@ -128,7 +128,7 @@ const { version } = Astro.props;
<!-- Mobile Navigation -->
<nav
id="mobile-nav"
class="md:hidden hidden border-t border-gray-200 dark:border-slate-800"
class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"
>
<div class="px-4 py-3 space-y-1 text-center">
<div class="py-2 flex justify-center">
@@ -139,7 +139,7 @@ const { version } = Astro.props;
</div>
<a
href="#about"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="about"
@@ -148,7 +148,7 @@ const { version } = Astro.props;
</a>
<a
href="#spec"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="spec"
@@ -157,7 +157,7 @@ const { version } = Astro.props;
</a>
<a
href="#faq"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="faq"
@@ -184,10 +184,10 @@ const { version } = Astro.props;
function updateHeaderVisibility() {
if (window.scrollY >= navbarHeight) {
header.classList.remove("translate-y-[-100%]");
header.classList.add("border-gray-200", "dark:border-slate-800");
header.classList.add("border-gray-200", "dark:border-neutral-800");
} else {
header.classList.add("translate-y-[-100%]");
header.classList.remove("border-gray-200", "dark:border-slate-800");
header.classList.remove("border-gray-200", "dark:border-neutral-800");
}
}