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: getting close

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 22:40:47 +00:00
parent 1828ae6353
commit b22cf35953
21 changed files with 651 additions and 670 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-gray-950/85"
backdrop-blur-xl bg-gray-50/85 dark:bg-slate-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-gray-50
text-gray-950 dark:text-slate-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="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
About
</a>
@@ -55,9 +55,9 @@ const { version } = Astro.props;
href="#spec"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
Spec
</a>
@@ -65,9 +65,9 @@ const { version } = Astro.props;
href="#faq"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
FAQ
</a>
@@ -82,9 +82,9 @@ const { version } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-gray-500
hover:text-gray-950 dark:hover:text-gray-50
hover:bg-gray-100 dark:hover:bg-gray-900"
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"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -99,8 +99,8 @@ const { version } = Astro.props;
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg
text-gray-500 dark:text-gray-500
hover:bg-gray-100 dark:hover:bg-gray-900"
text-gray-500 dark:text-slate-500
hover:bg-gray-100 dark:hover:bg-slate-800"
aria-label="Toggle menu"
>
<svg
@@ -122,7 +122,7 @@ const { version } = Astro.props;
<!-- Mobile Navigation -->
<nav
id="mobile-nav"
class="md:hidden hidden border-t border-gray-200 dark:border-gray-800"
class="md:hidden hidden border-t border-gray-200 dark:border-slate-800"
>
<div class="px-4 py-3 space-y-1 text-center">
<div class="py-2 flex justify-center">
@@ -133,19 +133,19 @@ const { version } = Astro.props;
</div>
<a
href="#about"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
About
</a>
<a
href="#spec"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
Spec
</a>
<a
href="#faq"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
FAQ
</a>
@@ -169,10 +169,10 @@ const { version } = Astro.props;
([entry]) => {
if (entry.isIntersecting) {
header.classList.add("translate-y-[-100%]");
header.classList.remove("border-gray-200", "dark:border-gray-800");
header.classList.remove("border-gray-200", "dark:border-slate-800");
} else {
header.classList.remove("translate-y-[-100%]");
header.classList.add("border-gray-200", "dark:border-gray-800");
header.classList.add("border-gray-200", "dark:border-slate-800");
}
},
{ threshold: 0, rootMargin: `-${topMargin}px 0px 0px 0px` }