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 tweaks

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-11 00:19:33 +00:00
parent f47ea792aa
commit 8c91e2028a
12 changed files with 97 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Header.astro
View File

@@ -183,10 +183,10 @@ const { version } = Astro.props;
function updateHeaderVisibility() {
if (window.scrollY >= navbarHeight) {
header.classList.remove("translate-y-[-100%]");
header.classList.remove("translate-y-[-100%]", "border-transparent");
header.classList.add("border-gray-200", "dark:border-neutral-800");
} else {
header.classList.add("translate-y-[-100%]");
header.classList.add("translate-y-[-100%]", "border-transparent");
header.classList.remove("border-gray-200", "dark:border-neutral-800");
}
}

22
src/components/Hero.astro
View File

@@ -14,7 +14,7 @@ const { version, svgPath } = Astro.props;
<section
id="hero"
class="relative min-h-[75vh] flex flex-col items-center justify-center
px-6 py-16 overflow-hidden"
px-6 pt-16 pb-24 overflow-hidden"
>
<!-- Background gradient/texture -->
<div
@@ -24,12 +24,14 @@ const { version, svgPath } = Astro.props;
>
</div>
<!-- Subtle grid pattern -->
<!-- Subtle grid pattern with fade -->
<div
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]
class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.neutral.600)_1px,transparent_1px),linear-gradient(90deg,theme(colors.neutral.600)_1px,transparent_1px)]
bg-[size:60px_60px]"
bg-[size:60px_60px]
[-webkit-mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]
[mask-image:linear-gradient(to_bottom,black_20%,transparent_80%)]"
>
</div>
@@ -120,8 +122,8 @@ const { version, svgPath } = Astro.props;
>
<a
href="#about"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
class="inline-flex items-center justify-center gap-2 px-6 py-3
text-base font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
@@ -130,8 +132,8 @@ const { version, svgPath } = Astro.props;
</a>
<a
href="#spec"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
class="inline-flex items-center justify-center gap-2 px-6 py-3
text-base font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
>
@@ -139,8 +141,8 @@ const { version, svgPath } = Astro.props;
</a>
<a
href="#faq"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
class="inline-flex items-center justify-center gap-2 px-6 py-3
text-base font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"

7
src/components/VersionSelector.astro
View File

@@ -86,9 +86,7 @@ const { currentVersion, versions } = Astro.props;
const dropdown = selector.querySelector(
"[data-version-dropdown]"
) as HTMLElement;
const arrow = selector.querySelector(
"[data-arrow-icon]"
) as HTMLElement;
const arrow = selector.querySelector("[data-arrow-icon]") as HTMLElement;
if (!trigger || !dropdown) return;
@@ -109,7 +107,8 @@ const { currentVersion, versions } = Astro.props;
const isOpen = dropdown.dataset.open === "true";
// Close all other dropdowns
document.querySelectorAll("[data-version-dropdown][data-open]")
document
.querySelectorAll("[data-version-dropdown][data-open]")
.forEach((d) => {
delete (d as HTMLElement).dataset.open;
const t = d.previousElementSibling as HTMLElement;