From de472c82a2f101d04224299dd21ffd8149b1a34c Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Sat, 10 Jan 2026 21:10:50 +0000 Subject: [PATCH] wip: more tailwind alignment --- src/components/AboutSection.astro | 25 +-- src/components/FAQSection.astro | 19 +-- src/components/Header.astro | 54 ++----- src/components/Hero.astro | 41 ++--- src/components/SpecSection.astro | 41 ++--- src/components/SpecSidebar.astro | 22 ++- src/components/ThemeToggle.astro | 11 +- src/components/VersionSelector.astro | 193 +++++++--------------- src/pages/404.astro | 10 +- src/pages/index.astro | 10 +- src/pages/spec/[version].astro | 10 +- src/styles/global.css | 229 +++++++++++++++------------ 12 files changed, 261 insertions(+), 404 deletions(-) diff --git a/src/components/AboutSection.astro b/src/components/AboutSection.astro index 671a7c9..7d090f3 100644 --- a/src/components/AboutSection.astro +++ b/src/components/AboutSection.astro @@ -15,10 +15,7 @@ const { introduction, summary, about, license } = Astro.props;

About Common-Flow

-

+

A practical git workflow that combines the best of GitHub Flow with versioned releases

@@ -33,8 +30,7 @@ const { introduction, summary, about, license } = Astro.props;

Key Principles

@@ -42,36 +38,29 @@ const { introduction, summary, about, license } = Astro.props;
-
+

Author

License

diff --git a/src/components/FAQSection.astro b/src/components/FAQSection.astro index e0d03c9..4ef72ef 100644 --- a/src/components/FAQSection.astro +++ b/src/components/FAQSection.astro @@ -8,16 +8,13 @@ interface Props { const { items } = Astro.props; --- -
+

FAQ

-

+

Common questions about Git Common-Flow

@@ -112,14 +109,6 @@ const { items } = Astro.props; diff --git a/src/components/Header.astro b/src/components/Header.astro index 880be24..a0f9568 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -22,8 +22,9 @@ const { version } = Astro.props;
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" > @@ -70,10 +68,9 @@ const { version } = Astro.props;
About Spec FAQ @@ -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); - - diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 7844317..632395d 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -18,19 +18,18 @@ const { version, svgPath } = Astro.props; >
@@ -51,12 +50,10 @@ const { version, svgPath } = 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-white/50 dark:hover:bg-white/10 - 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-white/50 dark:hover:bg-white/10" aria-label="View on GitHub" > @@ -74,8 +71,7 @@ const { version, svgPath } = Astro.props;

Git Common-Flow

@@ -84,8 +80,7 @@ const { version, svgPath } = Astro.props;

A sensible git workflow for teams who ship

@@ -99,10 +94,9 @@ const { version, svgPath } = Astro.props;

The Specification

-

+

The complete Git Common-Flow specification

@@ -63,14 +60,14 @@ const { terminology, specification, tocItems } = Astro.props; margin-top: 3rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; - border-bottom: 1px solid var(--color-border); - color: var(--color-text-primary); scroll-margin-top: calc(var(--header-height) + 2rem); + border-bottom: 1px solid #e5e5e5; + color: #0a0a0a; } :global(.dark) .spec-content :global(h2) { - border-bottom-color: var(--color-dark-border); - color: var(--color-dark-text-primary); + border-bottom-color: #262626; + color: #fafafa; } .spec-content :global(h2:first-child) { @@ -83,29 +80,29 @@ const { terminology, specification, tocItems } = Astro.props; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; - color: var(--color-text-secondary); + color: #525252; } :global(.dark) .spec-content :global(h3) { - color: var(--color-dark-text-secondary); + color: #a3a3a3; } .spec-content :global(p) { margin-bottom: 1.25rem; - color: var(--color-text-secondary); + color: #525252; } :global(.dark) .spec-content :global(p) { - color: var(--color-dark-text-secondary); + color: #a3a3a3; } .spec-content :global(strong) { - color: var(--color-text-primary); font-weight: 600; + color: #0a0a0a; } :global(.dark) .spec-content :global(strong) { - color: var(--color-dark-text-primary); + color: #fafafa; } .spec-content :global(ul) { @@ -132,20 +129,16 @@ const { terminology, specification, tocItems } = Astro.props; width: 2rem; text-align: right; font-weight: 500; - color: var(--color-text-muted); - } - - :global(.dark) .spec-content :global(ol > li::before) { - color: var(--color-dark-text-muted); + color: #737373; } .spec-content :global(li) { margin-bottom: 0.5rem; - color: var(--color-text-secondary); + color: #525252; } :global(.dark) .spec-content :global(li) { - color: var(--color-dark-text-secondary); + color: #a3a3a3; } .spec-content :global(a) { @@ -162,12 +155,8 @@ const { terminology, specification, tocItems } = Astro.props; border-left: 3px solid var(--color-accent); padding-left: 1.5rem; margin: 1.5rem 0; - color: var(--color-text-muted); font-style: italic; - } - - :global(.dark) .spec-content :global(blockquote) { - color: var(--color-dark-text-muted); + color: #737373; } .spec-content :global(img) { diff --git a/src/components/SpecSidebar.astro b/src/components/SpecSidebar.astro index 3e9104e..e7e04d6 100644 --- a/src/components/SpecSidebar.astro +++ b/src/components/SpecSidebar.astro @@ -12,14 +12,12 @@ const { items } = Astro.props; id="spec-sidebar" class="hidden lg:block lg:sticky lg:top-24 lg:self-start lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto - lg:pr-8 lg:mr-8 lg:border-r border-[var(--color-border)] - dark:border-[var(--color-dark-border)]" + lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-gray-800" >