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: more tailwind alignment

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 21:10:50 +00:00
parent f5818933c7
commit de472c82a2
12 changed files with 261 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Header.astro
View File

@@ -22,8 +22,9 @@ const { version } = Astro.props;
<div class="flex items-center gap-3">
<a
href="#hero"
class="header-title flex items-center gap-3 no-underline
hover:text-[var(--color-accent)] transition-colors"
class="flex items-center gap-3 no-underline
text-gray-950 dark:text-gray-50
hover:text-sky-600 transition-colors"
>
<span class="font-display font-bold text-lg tracking-tight">
Git Common-Flow
@@ -50,13 +51,10 @@ const { version } = Astro.props;
href={config.repoUrl}
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg text-[var(--color-text-muted)]
dark:text-[var(--color-dark-text-muted)]
hover:text-[var(--color-text-primary)]
dark:hover:text-[var(--color-dark-text-primary)]
hover:bg-[var(--color-bg-secondary)]
dark:hover:bg-[var(--color-dark-bg-secondary)]
transition-colors"
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"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -70,10 +68,9 @@ const { version } = Astro.props;
<!-- Mobile menu button -->
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg text-[var(--color-text-muted)]
dark:text-[var(--color-dark-text-muted)]
hover:bg-[var(--color-bg-secondary)]
dark:hover:bg-[var(--color-dark-bg-secondary)]"
class="md:hidden p-2 rounded-lg
text-gray-500 dark:text-gray-500
hover:bg-gray-100 dark:hover:bg-gray-900"
aria-label="Toggle menu"
>
<svg
@@ -95,31 +92,24 @@ const { version } = Astro.props;
<!-- Mobile Navigation -->
<nav
id="mobile-nav"
class="md:hidden hidden border-t border-[var(--color-border)]
dark:border-[var(--color-dark-border)]"
class="md:hidden hidden border-t border-gray-200 dark:border-gray-800"
>
<div class="px-4 py-3 space-y-1">
<a
href="#about"
class="block py-2 text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
>
About
</a>
<a
href="#spec"
class="block py-2 text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
>
Spec
</a>
<a
href="#faq"
class="block py-2 text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]
hover:text-[var(--color-accent)]"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
>
FAQ
</a>
@@ -143,12 +133,10 @@ const { version } = Astro.props;
([entry]) => {
if (entry.isIntersecting) {
header.classList.add("translate-y-[-100%]");
header.classList.remove("border-[var(--color-border)]");
header.classList.remove("dark:border-[var(--color-dark-border)]");
header.classList.remove("border-gray-200", "dark:border-gray-800");
} else {
header.classList.remove("translate-y-[-100%]");
header.classList.add("border-[var(--color-border)]");
header.classList.add("dark:border-[var(--color-dark-border)]");
header.classList.add("border-gray-200", "dark:border-gray-800");
}
},
{ threshold: 0, rootMargin: `-${topMargin}px 0px 0px 0px` }
@@ -177,13 +165,3 @@ const { version } = Astro.props;
// Re-initialize on Astro page transitions
document.addEventListener("astro:after-swap", initHeader);
</script>
<style>
.header-title {
color: var(--color-text-primary);
}
:global(.dark) .header-title {
color: var(--color-dark-text-primary);
}
</style>