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

25
src/components/AboutSection.astro
View File

@@ -15,10 +15,7 @@ const { introduction, summary, about, license } = Astro.props;
<!-- Section header --> <!-- Section header -->
<div class="mb-12 text-center"> <div class="mb-12 text-center">
<h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2>
<p <p class="text-lg text-gray-600 dark:text-gray-400">
class="text-lg text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
A practical git workflow that combines the best of GitHub Flow with A practical git workflow that combines the best of GitHub Flow with
versioned releases versioned releases
</p> </p>
@@ -33,8 +30,7 @@ const { introduction, summary, about, license } = Astro.props;
<div class="mb-16"> <div class="mb-16">
<h3 <h3
class="text-xl font-display font-semibold mb-6 class="text-xl font-display font-semibold mb-6
text-[var(--color-text-primary)] text-gray-950 dark:text-gray-50"
dark:text-[var(--color-dark-text-primary)]"
> >
Key Principles Key Principles
</h3> </h3>
@@ -42,36 +38,29 @@ const { introduction, summary, about, license } = Astro.props;
</div> </div>
<!-- Author & License --> <!-- Author & License -->
<div <div class="pt-8 border-t border-gray-200 dark:border-gray-800">
class="pt-8 border-t border-[var(--color-border)]
dark:border-[var(--color-dark-border)]"
>
<div class="grid sm:grid-cols-2 gap-8"> <div class="grid sm:grid-cols-2 gap-8">
<div> <div>
<h4 <h4
class="text-sm font-semibold uppercase tracking-wider mb-3 class="text-sm font-semibold uppercase tracking-wider mb-3
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500"
dark:text-[var(--color-dark-text-muted)]"
> >
Author Author
</h4> </h4>
<div <div
class="spec-content text-[var(--color-text-secondary)] class="spec-content text-gray-600 dark:text-gray-400"
dark:text-[var(--color-dark-text-secondary)]"
set:html={about} set:html={about}
/> />
</div> </div>
<div> <div>
<h4 <h4
class="text-sm font-semibold uppercase tracking-wider mb-3 class="text-sm font-semibold uppercase tracking-wider mb-3
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500"
dark:text-[var(--color-dark-text-muted)]"
> >
License License
</h4> </h4>
<div <div
class="spec-content text-[var(--color-text-secondary)] class="spec-content text-gray-600 dark:text-gray-400"
dark:text-[var(--color-dark-text-secondary)]"
set:html={license} set:html={license}
/> />
</div> </div>

19
src/components/FAQSection.astro
View File

@@ -8,16 +8,13 @@ interface Props {
const { items } = Astro.props; const { items } = Astro.props;
--- ---
<section id="faq" class="faq-section py-20 sm:py-28"> <section id="faq" class="py-20 sm:py-28 bg-gray-100 dark:bg-gray-900">
<div class="section-container"> <div class="section-container">
<div class="max-w-3xl mx-auto"> <div class="max-w-3xl mx-auto">
<!-- Section header --> <!-- Section header -->
<div class="mb-12 text-center"> <div class="mb-12 text-center">
<h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2> <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
<p <p class="text-lg text-gray-600 dark:text-gray-400">
class="text-lg text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
Common questions about Git Common-Flow Common questions about Git Common-Flow
</p> </p>
</div> </div>
@@ -112,14 +109,6 @@ const { items } = Astro.props;
</script> </script>
<style> <style>
.faq-section {
background-color: var(--color-bg-secondary);
}
:global(.dark) .faq-section {
background-color: var(--color-dark-bg-secondary);
}
.spec-content :global(p:last-child) { .spec-content :global(p:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
@@ -130,10 +119,10 @@ const { items } = Astro.props;
} }
.spec-content :global(li) { .spec-content :global(li) {
color: var(--color-text-secondary); color: #525252;
} }
:global(.dark) .spec-content :global(li) { :global(.dark) .spec-content :global(li) {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
</style> </style>

54
src/components/Header.astro
View File

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

41
src/components/Hero.astro
View File

@@ -18,19 +18,18 @@ const { version, svgPath } = Astro.props;
> >
<!-- Background gradient/texture --> <!-- Background gradient/texture -->
<div <div
class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)] class="absolute inset-0 bg-gradient-to-b
to-[var(--color-bg-primary)] from-gray-100 to-gray-50
dark:from-[var(--color-dark-bg-secondary)] dark:from-gray-900 dark:to-gray-950"
dark:to-[var(--color-dark-bg-primary)]"
> >
</div> </div>
<!-- Subtle grid pattern --> <!-- Subtle grid pattern -->
<div <div
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]" class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]
style="background-image: linear-gradient(var(--color-text-primary) 1px, transparent 1px), bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
linear-gradient(90deg, var(--color-text-primary) 1px, transparent 1px); dark:bg-[linear-gradient(theme(colors.gray.50)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.50)_1px,transparent_1px)]
background-size: 60px 60px;" bg-[size:60px_60px]"
> >
</div> </div>
@@ -51,12 +50,10 @@ const { version, svgPath } = Astro.props;
href={config.repoUrl} href={config.repoUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="p-2 rounded-lg text-[var(--color-text-muted)] class="p-2 rounded-lg transition-colors
dark:text-[var(--color-dark-text-muted)] text-gray-500 dark:text-gray-500
hover:text-[var(--color-text-primary)] hover:text-gray-950 dark:hover:text-gray-50
dark:hover:text-[var(--color-dark-text-primary)] hover:bg-white/50 dark:hover:bg-white/10"
hover:bg-white/50 dark:hover:bg-white/10
transition-colors"
aria-label="View on GitHub" aria-label="View on GitHub"
> >
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -74,8 +71,7 @@ const { version, svgPath } = Astro.props;
<!-- Title --> <!-- Title -->
<h1 <h1
class="animate-fade-in-up mb-4 class="animate-fade-in-up mb-4
text-[var(--color-text-primary)] text-gray-950 dark:text-gray-50"
dark:text-[var(--color-dark-text-primary)]"
> >
Git Common-Flow Git Common-Flow
</h1> </h1>
@@ -84,8 +80,7 @@ const { version, svgPath } = Astro.props;
<p <p
class="animate-fade-in-up delay-100 class="animate-fade-in-up delay-100
text-lg sm:text-xl max-w-2xl mx-auto mb-8 text-lg sm:text-xl max-w-2xl mx-auto mb-8
text-[var(--color-text-secondary)] text-gray-600 dark:text-gray-400"
dark:text-[var(--color-dark-text-secondary)]"
> >
A sensible git workflow for teams who ship A sensible git workflow for teams who ship
</p> </p>
@@ -99,10 +94,9 @@ const { version, svgPath } = Astro.props;
<div <div
class="animate-fade-in-up delay-300 class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8 relative mx-auto mb-12 p-4 sm:p-8
bg-white dark:bg-[var(--color-dark-bg-secondary)] bg-white dark:bg-gray-900
rounded-2xl shadow-lg dark:shadow-none rounded-2xl shadow-lg dark:shadow-none
border border-[var(--color-border)] border border-gray-200 dark:border-gray-800"
dark:border-[var(--color-dark-border)]"
> >
<img <img
src={svgPath} src={svgPath}
@@ -128,9 +122,8 @@ const { version, svgPath } = Astro.props;
href="#about" href="#about"
class="absolute bottom-8 left-1/2 -translate-x-1/2 class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700 animate-fade-in delay-700
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500
dark:text-[var(--color-dark-text-muted)] hover:text-sky-600 transition-colors"
hover:text-[var(--color-accent)] transition-colors"
aria-label="Scroll to content" aria-label="Scroll to content"
> >
<svg <svg

41
src/components/SpecSection.astro
View File

@@ -16,10 +16,7 @@ const { terminology, specification, tocItems } = Astro.props;
<!-- Section header --> <!-- Section header -->
<div class="max-w-3xl mx-auto mb-12 text-center"> <div class="max-w-3xl mx-auto mb-12 text-center">
<h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2> <h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2>
<p <p class="text-lg text-gray-600 dark:text-gray-400">
class="text-lg text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
The complete Git Common-Flow specification The complete Git Common-Flow specification
</p> </p>
</div> </div>
@@ -63,14 +60,14 @@ const { terminology, specification, tocItems } = Astro.props;
margin-top: 3rem; margin-top: 3rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-primary);
scroll-margin-top: calc(var(--header-height) + 2rem); scroll-margin-top: calc(var(--header-height) + 2rem);
border-bottom: 1px solid #e5e5e5;
color: #0a0a0a;
} }
:global(.dark) .spec-content :global(h2) { :global(.dark) .spec-content :global(h2) {
border-bottom-color: var(--color-dark-border); border-bottom-color: #262626;
color: var(--color-dark-text-primary); color: #fafafa;
} }
.spec-content :global(h2:first-child) { .spec-content :global(h2:first-child) {
@@ -83,29 +80,29 @@ const { terminology, specification, tocItems } = Astro.props;
font-weight: 600; font-weight: 600;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--color-text-secondary); color: #525252;
} }
:global(.dark) .spec-content :global(h3) { :global(.dark) .spec-content :global(h3) {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
.spec-content :global(p) { .spec-content :global(p) {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
color: var(--color-text-secondary); color: #525252;
} }
:global(.dark) .spec-content :global(p) { :global(.dark) .spec-content :global(p) {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
.spec-content :global(strong) { .spec-content :global(strong) {
color: var(--color-text-primary);
font-weight: 600; font-weight: 600;
color: #0a0a0a;
} }
:global(.dark) .spec-content :global(strong) { :global(.dark) .spec-content :global(strong) {
color: var(--color-dark-text-primary); color: #fafafa;
} }
.spec-content :global(ul) { .spec-content :global(ul) {
@@ -132,20 +129,16 @@ const { terminology, specification, tocItems } = Astro.props;
width: 2rem; width: 2rem;
text-align: right; text-align: right;
font-weight: 500; font-weight: 500;
color: var(--color-text-muted); color: #737373;
}
:global(.dark) .spec-content :global(ol > li::before) {
color: var(--color-dark-text-muted);
} }
.spec-content :global(li) { .spec-content :global(li) {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: var(--color-text-secondary); color: #525252;
} }
:global(.dark) .spec-content :global(li) { :global(.dark) .spec-content :global(li) {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
.spec-content :global(a) { .spec-content :global(a) {
@@ -162,12 +155,8 @@ const { terminology, specification, tocItems } = Astro.props;
border-left: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent);
padding-left: 1.5rem; padding-left: 1.5rem;
margin: 1.5rem 0; margin: 1.5rem 0;
color: var(--color-text-muted);
font-style: italic; font-style: italic;
} color: #737373;
:global(.dark) .spec-content :global(blockquote) {
color: var(--color-dark-text-muted);
} }
.spec-content :global(img) { .spec-content :global(img) {

22
src/components/SpecSidebar.astro
View File

@@ -12,14 +12,12 @@ const { items } = Astro.props;
id="spec-sidebar" id="spec-sidebar"
class="hidden lg:block lg:sticky lg:top-24 lg:self-start class="hidden lg:block lg:sticky lg:top-24 lg:self-start
lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
lg:pr-8 lg:mr-8 lg:border-r border-[var(--color-border)] lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-gray-800"
dark:border-[var(--color-dark-border)]"
> >
<nav class="space-y-1 py-2"> <nav class="space-y-1 py-2">
<div <div
class="text-xs font-semibold uppercase tracking-wider mb-4 class="text-xs font-semibold uppercase tracking-wider mb-4
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500"
dark:text-[var(--color-dark-text-muted)]"
> >
On This Page On This Page
</div> </div>
@@ -43,9 +41,9 @@ const { items } = Astro.props;
id="spec-toc-toggle" id="spec-toc-toggle"
class="lg:hidden fixed bottom-6 right-6 z-40 class="lg:hidden fixed bottom-6 right-6 z-40
w-12 h-12 rounded-full shadow-lg w-12 h-12 rounded-full shadow-lg
bg-[var(--color-accent)] text-white bg-sky-600 text-white
flex items-center justify-center flex items-center justify-center
hover:bg-[var(--color-accent-light)] hover:bg-sky-500
transition-all duration-200" transition-all duration-200"
aria-label="Jump to section" aria-label="Jump to section"
> >
@@ -70,20 +68,18 @@ const { items } = Astro.props;
<!-- Drawer --> <!-- Drawer -->
<div <div
class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
bg-[var(--color-bg-primary)] dark:bg-[var(--color-dark-bg-primary)] bg-gray-50 dark:bg-gray-950
rounded-t-2xl shadow-xl p-6" rounded-t-2xl shadow-xl p-6"
> >
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<span <span
class="text-sm font-semibold uppercase tracking-wider class="text-sm font-semibold uppercase tracking-wider
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500"
dark:text-[var(--color-dark-text-muted)]"
> >
Jump to Section Jump to Section
</span> </span>
<button <button
class="p-2 rounded-lg hover:bg-[var(--color-bg-secondary)] class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
dark:hover:bg-[var(--color-dark-bg-secondary)]"
data-toc-close data-toc-close
aria-label="Close" aria-label="Close"
> >
@@ -209,11 +205,11 @@ const { items } = Astro.props;
} }
#spec-sidebar::-webkit-scrollbar-thumb { #spec-sidebar::-webkit-scrollbar-thumb {
background: var(--color-border); background-color: #e5e5e5;
border-radius: 2px; border-radius: 2px;
} }
:global(.dark) #spec-sidebar::-webkit-scrollbar-thumb { :global(.dark) #spec-sidebar::-webkit-scrollbar-thumb {
background: var(--color-dark-border); background-color: #262626;
} }
</style> </style>

11
src/components/ThemeToggle.astro
View File

@@ -5,13 +5,10 @@
<button <button
data-theme-toggle data-theme-toggle
type="button" type="button"
class="p-2 rounded-lg text-[var(--color-text-muted)] class="p-2 rounded-lg transition-colors duration-200
dark:text-[var(--color-dark-text-muted)] text-gray-500 dark:text-gray-500
hover:text-[var(--color-text-primary)] hover:text-gray-950 dark:hover:text-gray-50
dark:hover:text-[var(--color-dark-text-primary)] hover:bg-gray-100 dark:hover:bg-gray-900"
hover:bg-[var(--color-bg-secondary)]
dark:hover:bg-[var(--color-dark-bg-secondary)]
transition-colors duration-200"
aria-label="Toggle dark mode" aria-label="Toggle dark mode"
> >
<!-- Sun icon (shown in dark mode) --> <!-- Sun icon (shown in dark mode) -->

193
src/components/VersionSelector.astro
View File

@@ -7,18 +7,23 @@ interface Props {
const { currentVersion, versions } = Astro.props; const { currentVersion, versions } = Astro.props;
--- ---
<div class="version-selector relative" data-version-selector> <div class="relative" data-version-selector>
<!-- Trigger button --> <!-- Trigger button -->
<button <button
type="button" type="button"
class="version-trigger"
data-version-trigger data-version-trigger
aria-haspopup="listbox" aria-haspopup="listbox"
aria-expanded="false" aria-expanded="false"
class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-gray-800
rounded-md bg-transparent cursor-pointer transition-colors
text-gray-600 dark:text-gray-400
hover:border-sky-600 hover:text-gray-950 dark:hover:text-gray-50"
> >
<span class="font-mono">v{currentVersion}</span> <span>v{currentVersion}</span>
<svg <svg
class="arrow-icon" data-arrow-icon
class="w-3.5 h-3.5 transition-transform duration-150"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -33,18 +38,32 @@ const { currentVersion, versions } = Astro.props;
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div <div
class="version-dropdown"
data-version-dropdown data-version-dropdown
role="listbox" role="listbox"
aria-label="Select version" aria-label="Select version"
class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
bg-gray-50 dark:bg-gray-900
border border-gray-200 dark:border-gray-800
rounded-lg shadow-lg
opacity-0 invisible -translate-y-1 transition-all duration-150
data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"
> >
{ {
versions.map((v) => ( versions.map((v) => (
<a <a
href={`/spec/${v}`} href={`/spec/${v}`}
class:list={["version-option", { active: v === currentVersion }]}
role="option" role="option"
aria-selected={v === currentVersion} aria-selected={v === currentVersion}
class:list={[
"block px-3 py-2 font-mono text-sm rounded transition-colors",
"text-gray-600 dark:text-gray-400",
"hover:bg-gray-100 dark:hover:bg-gray-800",
"hover:text-gray-950 dark:hover:text-gray-50",
v === currentVersion && [
"bg-sky-500/15 dark:bg-sky-500/20",
"text-sky-600 dark:text-sky-400",
],
]}
> >
v{v} v{v}
</a> </a>
@@ -67,158 +86,54 @@ const { currentVersion, versions } = Astro.props;
const dropdown = selector.querySelector( const dropdown = selector.querySelector(
"[data-version-dropdown]" "[data-version-dropdown]"
) as HTMLElement; ) as HTMLElement;
const arrow = selector.querySelector(
"[data-arrow-icon]"
) as HTMLElement;
if (!trigger || !dropdown) return; if (!trigger || !dropdown) return;
// Toggle dropdown const open = () => {
dropdown.dataset.open = "true";
trigger.setAttribute("aria-expanded", "true");
if (arrow) arrow.style.transform = "rotate(180deg)";
};
const close = () => {
delete dropdown.dataset.open;
trigger.setAttribute("aria-expanded", "false");
if (arrow) arrow.style.transform = "";
};
trigger.addEventListener("click", (e) => { trigger.addEventListener("click", (e) => {
e.stopPropagation(); e.stopPropagation();
const isOpen = dropdown.classList.contains("open"); const isOpen = dropdown.dataset.open === "true";
// Close all other dropdowns first // Close all other dropdowns
document.querySelectorAll("[data-version-dropdown].open").forEach((d) => { document.querySelectorAll("[data-version-dropdown][data-open]")
d.classList.remove("open"); .forEach((d) => {
d.previousElementSibling?.setAttribute("aria-expanded", "false"); delete (d as HTMLElement).dataset.open;
}); const t = d.previousElementSibling as HTMLElement;
t?.setAttribute("aria-expanded", "false");
const a = t?.querySelector("[data-arrow-icon]") as HTMLElement;
if (a) a.style.transform = "";
});
if (!isOpen) { isOpen ? close() : open();
dropdown.classList.add("open");
trigger.setAttribute("aria-expanded", "true");
}
}); });
// Close on click outside
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!selector.contains(e.target as Node)) { if (!selector.contains(e.target as Node)) close();
dropdown.classList.remove("open");
trigger.setAttribute("aria-expanded", "false");
}
}); });
// Close on escape
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && dropdown.classList.contains("open")) { if (e.key === "Escape" && dropdown.dataset.open === "true") {
dropdown.classList.remove("open"); close();
trigger.setAttribute("aria-expanded", "false");
trigger.focus(); trigger.focus();
} }
}); });
}); });
} }
// Initialize on load
initVersionSelectors(); initVersionSelectors();
// Re-initialize on Astro page transitions
document.addEventListener("astro:after-swap", initVersionSelectors); document.addEventListener("astro:after-swap", initVersionSelectors);
</script> </script>
<style>
.version-selector {
position: relative;
}
.version-trigger {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background-color: transparent;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 150ms ease;
}
:global(.dark) .version-trigger {
border-color: var(--color-dark-border);
color: var(--color-dark-text-secondary);
}
.version-trigger:hover {
border-color: var(--color-accent);
color: var(--color-text-primary);
}
:global(.dark) .version-trigger:hover {
color: var(--color-dark-text-primary);
}
.arrow-icon {
width: 0.875rem;
height: 0.875rem;
transition: transform 150ms ease;
}
.version-trigger[aria-expanded="true"] .arrow-icon {
transform: rotate(180deg);
}
.version-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: 100%;
padding: 0.375rem;
background-color: var(--color-bg-primary);
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition:
opacity 150ms ease,
transform 150ms ease,
visibility 150ms ease;
z-index: 100;
}
:global(.dark) .version-dropdown {
background-color: var(--color-dark-bg-secondary);
border-color: var(--color-dark-border);
}
.version-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.version-option {
display: block;
padding: 0.5rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.8125rem;
color: var(--color-text-secondary);
text-decoration: none;
border-radius: 4px;
transition: all 150ms ease;
}
:global(.dark) .version-option {
color: var(--color-dark-text-secondary);
}
.version-option:hover {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
}
:global(.dark) .version-option:hover {
background-color: var(--color-dark-bg-code);
color: var(--color-dark-text-primary);
}
.version-option.active {
background-color: var(--color-accent-muted);
color: var(--color-accent);
}
:global(.dark) .version-option.active {
background-color: var(--color-dark-accent-muted);
color: var(--color-accent-light);
}
</style>

10
src/pages/404.astro
View File

@@ -6,18 +6,14 @@ import Default from "../layouts/Default.astro";
<div class="text-center"> <div class="text-center">
<h1 <h1
class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
text-[var(--color-border-strong)] text-gray-300 dark:text-gray-700"
dark:text-[var(--color-dark-border-strong)]"
> >
404 404
</h1> </h1>
<p <p class="text-xl mb-2 text-gray-600 dark:text-gray-400">
class="text-xl mb-2 text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
Page not found Page not found
</p> </p>
<p class="text-[var(--color-text-muted)] dark:text-[var(--color-dark-text-muted)]"> <p class="text-gray-500 dark:text-gray-500">
The page you're looking for doesn't exist. The page you're looking for doesn't exist.
</p> </p>
<a <a

10
src/pages/index.astro
View File

@@ -74,17 +74,15 @@ const parsed = parseSpecContent(html, version);
<!-- Footer --> <!-- Footer -->
<footer <footer
class="py-8 text-center text-sm class="py-8 text-center text-sm
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500
dark:text-[var(--color-dark-text-muted)] border-t border-gray-200 dark:border-gray-800"
border-t border-[var(--color-border)]
dark:border-[var(--color-dark-border)]"
> >
<div class="section-container"> <div class="section-container">
<p> <p>
Git Common-Flow is authored by Git Common-Flow is authored by
<a <a
href="https://jimeh.me/" href="https://jimeh.me/"
class="hover:text-[var(--color-accent)]" class="hover:text-sky-600"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -94,7 +92,7 @@ const parsed = parseSpecContent(html, version);
<p class="mt-2"> <p class="mt-2">
<a <a
href="https://creativecommons.org/licenses/by/4.0/" href="https://creativecommons.org/licenses/by/4.0/"
class="hover:text-[var(--color-accent)]" class="hover:text-sky-600"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

10
src/pages/spec/[version].astro
View File

@@ -76,17 +76,15 @@ const parsed = parseSpecContent(html, version);
<!-- Footer --> <!-- Footer -->
<footer <footer
class="py-8 text-center text-sm class="py-8 text-center text-sm
text-[var(--color-text-muted)] text-gray-500 dark:text-gray-500
dark:text-[var(--color-dark-text-muted)] border-t border-gray-200 dark:border-gray-800"
border-t border-[var(--color-border)]
dark:border-[var(--color-dark-border)]"
> >
<div class="section-container"> <div class="section-container">
<p> <p>
Git Common-Flow is authored by Git Common-Flow is authored by
<a <a
href="https://jimeh.me/" href="https://jimeh.me/"
class="hover:text-[var(--color-accent)]" class="hover:text-sky-600"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -96,7 +94,7 @@ const parsed = parseSpecContent(html, version);
<p class="mt-2"> <p class="mt-2">
<a <a
href="https://creativecommons.org/licenses/by/4.0/" href="https://creativecommons.org/licenses/by/4.0/"
class="hover:text-[var(--color-accent)]" class="hover:text-sky-600"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

229
src/styles/global.css
View File

@@ -1,34 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));
@theme { @theme {
/* Colors - refined palette */ /* Accent colors - keep for brand consistency */
--color-sidebar: #0a0a0a;
--color-sidebar-hover: #1a1a1a;
--color-accent: #1f8dd6; --color-accent: #1f8dd6;
--color-accent-light: #4da6e8; --color-accent-light: #4da6e8;
--color-accent-muted: rgba(31, 141, 214, 0.15);
--color-text-primary: #0a0a0a;
--color-text-secondary: #525252;
--color-text-muted: #737373;
--color-bg-primary: #fafafa;
--color-bg-secondary: #f5f5f5;
--color-bg-code: #f0f0f0;
--color-bg-code-inline: rgba(0, 0, 0, 0.06);
--color-border: #e5e5e5;
--color-border-strong: #d4d4d4;
/* Dark mode colors */
--color-dark-text-primary: #fafafa;
--color-dark-text-secondary: #a3a3a3;
--color-dark-text-muted: #737373;
--color-dark-bg-primary: #0a0a0a;
--color-dark-bg-secondary: #141414;
--color-dark-bg-code: #1a1a1a;
--color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
--color-dark-border: #262626;
--color-dark-border-strong: #404040;
--color-dark-accent-muted: rgba(31, 141, 214, 0.2);
/* Fonts - distinctive choices */ /* Fonts - distinctive choices */
--font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-display: "Bricolage Grotesque", system-ui, sans-serif;
@@ -78,23 +56,28 @@ html {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 1.7; line-height: 1.7;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
overflow-x: hidden; overflow-x: hidden;
background-color: #fafafa;
color: #0a0a0a;
} }
.dark body { .dark body {
color: var(--color-dark-text-primary); background-color: #0a0a0a;
background-color: var(--color-dark-bg-primary); color: #fafafa;
} }
/* Typography */ /* Typography */
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 700; font-weight: 700;
color: var(--color-text-primary);
line-height: 1.2; line-height: 1.2;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: #0a0a0a;
} }
.dark h1, .dark h1,
@@ -103,7 +86,7 @@ html {
.dark h4, .dark h4,
.dark h5, .dark h5,
.dark h6 { .dark h6 {
color: var(--color-dark-text-primary); color: #fafafa;
} }
h1 { h1 {
@@ -144,36 +127,37 @@ html {
code { code {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.875em; font-size: 0.875em;
background-color: var(--color-bg-code-inline);
border-radius: 4px; border-radius: 4px;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
background-color: rgba(0, 0, 0, 0.05);
} }
.dark code { .dark code {
background-color: var(--color-dark-bg-code-inline); background-color: rgba(255, 255, 255, 0.1);
} }
pre { pre {
font-family: var(--font-mono); font-family: var(--font-mono);
background-color: var(--color-bg-code);
border-radius: 8px; border-radius: 8px;
padding: 1.25rem; padding: 1.25rem;
overflow-x: auto; overflow-x: auto;
line-height: 1.6; line-height: 1.6;
background-color: #e5e5e5;
} }
.dark pre { .dark pre {
background-color: var(--color-dark-bg-code); background-color: #262626;
} }
pre > code { pre>code {
background-color: transparent !important; background-color: transparent !important;
padding: 0; padding: 0;
font-size: 0.875rem; font-size: 0.875rem;
} }
/* Lists */ /* Lists */
ul, ol { ul,
ol {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
@@ -190,11 +174,15 @@ html {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
ol ol, ul ol { ol ol,
ul ol {
list-style-type: decimal; list-style-type: decimal;
} }
ul ul ol, ul ol ol, ol ul ol, ol ol ol { ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: decimal; list-style-type: decimal;
} }
@@ -203,12 +191,12 @@ html {
border-left: 3px solid var(--color-accent); border-left: 3px solid var(--color-accent);
padding-left: 1.5rem; padding-left: 1.5rem;
margin: 1.5rem 0; margin: 1.5rem 0;
color: var(--color-text-secondary);
font-style: italic; font-style: italic;
color: #525252;
} }
.dark blockquote { .dark blockquote {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
/* Strong text */ /* Strong text */
@@ -218,13 +206,12 @@ html {
/* Selection */ /* Selection */
::selection { ::selection {
background-color: var(--color-accent-muted); background-color: rgba(14, 165, 233, 0.2);
color: var(--color-text-primary); color: #0a0a0a;
} }
.dark ::selection { .dark ::selection {
background-color: var(--color-dark-accent-muted); color: #fafafa;
color: var(--color-dark-text-primary);
} }
/* Focus styles */ /* Focus styles */
@@ -236,8 +223,13 @@ html {
/* Keyframe animations - defined outside layers for proper cascade */ /* Keyframe animations - defined outside layers for proper cascade */
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes fade-in-up { @keyframes fade-in-up {
@@ -245,6 +237,7 @@ html {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -256,6 +249,7 @@ html {
opacity: 0; opacity: 0;
transform: translateY(-10px); transform: translateY(-10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -267,6 +261,7 @@ html {
opacity: 0; opacity: 0;
transform: translateX(-20px); transform: translateX(-20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
@@ -274,8 +269,15 @@ html {
} }
@keyframes bounce-subtle { @keyframes bounce-subtle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); } 0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
} }
/* Animation utility classes */ /* Animation utility classes */
@@ -304,41 +306,62 @@ html {
} }
/* Animation delays */ /* Animation delays */
.delay-100 { animation-delay: 100ms; } .delay-100 {
.delay-200 { animation-delay: 200ms; } animation-delay: 100ms;
.delay-300 { animation-delay: 300ms; } }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; } .delay-200 {
.delay-600 { animation-delay: 600ms; } animation-delay: 200ms;
.delay-700 { animation-delay: 700ms; } }
.delay-800 { animation-delay: 800ms; }
.delay-300 {
animation-delay: 300ms;
}
.delay-400 {
animation-delay: 400ms;
}
.delay-500 {
animation-delay: 500ms;
}
.delay-600 {
animation-delay: 600ms;
}
.delay-700 {
animation-delay: 700ms;
}
.delay-800 {
animation-delay: 800ms;
}
/* Component styles */ /* Component styles */
@layer components { @layer components {
/* Glass effect for header */ /* Glass effect for header */
.glass { .glass {
background: rgba(250, 250, 250, 0.85);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
background-color: rgba(250, 250, 250, 0.85);
} }
.dark .glass { .dark .glass {
background: rgba(10, 10, 10, 0.85); background-color: rgba(10, 10, 10, 0.85);
} }
/* Gradient text */ /* Gradient text */
.gradient-text { .gradient-text {
background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
background-image: linear-gradient(to bottom right, #0a0a0a, #0284c7);
} }
.dark .gradient-text { .dark .gradient-text {
background: linear-gradient(135deg, var(--color-dark-text-primary) 0%, var(--color-accent-light) 100%); background-image: linear-gradient(to bottom right, #fafafa, #38bdf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
/* Section container */ /* Section container */
@@ -355,20 +378,20 @@ html {
.prose-spec h2 { .prose-spec h2 {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
border-bottom: 1px solid var(--color-border);
margin-top: 4rem; margin-top: 4rem;
border-bottom: 1px solid #e5e5e5;
} }
.dark .prose-spec h2 { .dark .prose-spec h2 {
border-bottom-color: var(--color-dark-border); border-bottom-color: #262626;
} }
.prose-spec h3 { .prose-spec h3 {
color: var(--color-text-secondary); color: #525252;
} }
.dark .prose-spec h3 { .dark .prose-spec h3 {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
.prose-spec img { .prose-spec img {
@@ -380,11 +403,11 @@ html {
/* Subtle border */ /* Subtle border */
.border-subtle { .border-subtle {
border-color: var(--color-border); border-color: #e5e5e5;
} }
.dark .border-subtle { .dark .border-subtle {
border-color: var(--color-dark-border); border-color: #262626;
} }
/* Button base */ /* Button base */
@@ -415,21 +438,21 @@ html {
.btn-ghost { .btn-ghost {
background-color: transparent; background-color: transparent;
color: var(--color-text-secondary); color: #525252;
}
.btn-ghost:hover {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
} }
.dark .btn-ghost { .dark .btn-ghost {
color: var(--color-dark-text-secondary); color: #a3a3a3;
}
.btn-ghost:hover {
background-color: #f5f5f5;
color: #0a0a0a;
} }
.dark .btn-ghost:hover { .dark .btn-ghost:hover {
background-color: var(--color-dark-bg-secondary); background-color: #171717;
color: var(--color-dark-text-primary); color: #fafafa;
} }
/* Sidebar link styles */ /* Sidebar link styles */
@@ -437,36 +460,32 @@ html {
display: block; display: block;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
color: var(--color-text-muted);
border-radius: 6px; border-radius: 6px;
transition: all var(--transition-fast); transition: all var(--transition-fast);
border-left: 2px solid transparent; border-left: 2px solid transparent;
margin-left: -2px; margin-left: -2px;
color: #737373;
} }
.sidebar-link:hover { .sidebar-link:hover {
color: var(--color-text-primary); color: #0a0a0a;
background-color: var(--color-bg-secondary); background-color: #f5f5f5;
}
.dark .sidebar-link {
color: var(--color-dark-text-muted);
} }
.dark .sidebar-link:hover { .dark .sidebar-link:hover {
color: var(--color-dark-text-primary); color: #fafafa;
background-color: var(--color-dark-bg-secondary); background-color: #171717;
} }
.sidebar-link.active { .sidebar-link.active {
color: var(--color-accent);
border-left-color: var(--color-accent); border-left-color: var(--color-accent);
background-color: var(--color-accent-muted); color: #0284c7;
background-color: rgba(14, 165, 233, 0.15);
} }
.dark .sidebar-link.active { .dark .sidebar-link.active {
color: var(--color-accent-light); color: #38bdf8;
background-color: var(--color-dark-accent-muted); background-color: rgba(14, 165, 233, 0.2);
} }
.sidebar-link-sub { .sidebar-link-sub {
@@ -482,25 +501,24 @@ html {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: 9999px; border-radius: 9999px;
color: var(--color-text-muted); background-color: #f5f5f5;
border: 1px solid #e5e5e5;
color: #737373;
} }
.dark .version-badge { .dark .version-badge {
background-color: var(--color-dark-bg-secondary); background-color: #171717;
border-color: var(--color-dark-border); border-color: #262626;
color: var(--color-dark-text-muted);
} }
/* FAQ accordion styles */ /* FAQ accordion styles */
.faq-item { .faq-item {
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid #e5e5e5;
} }
.dark .faq-item { .dark .faq-item {
border-bottom-color: var(--color-dark-border); border-bottom-color: #262626;
} }
.faq-question { .faq-question {
@@ -513,13 +531,13 @@ html {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
transition: color var(--transition-fast); transition: color var(--transition-fast);
color: #0a0a0a;
} }
.dark .faq-question { .dark .faq-question {
color: var(--color-dark-text-primary); color: #fafafa;
} }
.faq-question:hover { .faq-question:hover {
@@ -528,16 +546,17 @@ html {
.faq-answer { .faq-answer {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
color: var(--color-text-secondary); color: #525252;
} }
.dark .faq-answer { .dark .faq-answer {
color: var(--color-dark-text-secondary); color: #a3a3a3;
} }
} }
/* Transitions for interactive elements */ /* Transitions for interactive elements */
@layer components { @layer components {
#layout, #layout,
#menu, #menu,
.menu-link { .menu-link {