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

19
src/components/FAQSection.astro
View File

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

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>

41
src/components/Hero.astro
View File

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

41
src/components/SpecSection.astro
View File

@@ -16,10 +16,7 @@ const { terminology, specification, tocItems } = Astro.props;
<!-- Section header -->
<div class="max-w-3xl mx-auto mb-12 text-center">
<h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2>
<p
class="text-lg text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
<p class="text-lg text-gray-600 dark:text-gray-400">
The complete Git Common-Flow specification
</p>
</div>
@@ -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) {

22
src/components/SpecSidebar.astro
View File

@@ -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"
>
<nav class="space-y-1 py-2">
<div
class="text-xs font-semibold uppercase tracking-wider mb-4
text-[var(--color-text-muted)]
dark:text-[var(--color-dark-text-muted)]"
text-gray-500 dark:text-gray-500"
>
On This Page
</div>
@@ -43,9 +41,9 @@ const { items } = Astro.props;
id="spec-toc-toggle"
class="lg:hidden fixed bottom-6 right-6 z-40
w-12 h-12 rounded-full shadow-lg
bg-[var(--color-accent)] text-white
bg-sky-600 text-white
flex items-center justify-center
hover:bg-[var(--color-accent-light)]
hover:bg-sky-500
transition-all duration-200"
aria-label="Jump to section"
>
@@ -70,20 +68,18 @@ const { items } = Astro.props;
<!-- Drawer -->
<div
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"
>
<div class="flex items-center justify-between mb-4">
<span
class="text-sm font-semibold uppercase tracking-wider
text-[var(--color-text-muted)]
dark:text-[var(--color-dark-text-muted)]"
text-gray-500 dark:text-gray-500"
>
Jump to Section
</span>
<button
class="p-2 rounded-lg hover:bg-[var(--color-bg-secondary)]
dark:hover:bg-[var(--color-dark-bg-secondary)]"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
data-toc-close
aria-label="Close"
>
@@ -209,11 +205,11 @@ const { items } = Astro.props;
}
#spec-sidebar::-webkit-scrollbar-thumb {
background: var(--color-border);
background-color: #e5e5e5;
border-radius: 2px;
}
:global(.dark) #spec-sidebar::-webkit-scrollbar-thumb {
background: var(--color-dark-border);
background-color: #262626;
}
</style>

11
src/components/ThemeToggle.astro
View File

@@ -5,13 +5,10 @@
<button
data-theme-toggle
type="button"
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 duration-200"
class="p-2 rounded-lg transition-colors duration-200
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="Toggle 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;
---
<div class="version-selector relative" data-version-selector>
<div class="relative" data-version-selector>
<!-- Trigger button -->
<button
type="button"
class="version-trigger"
data-version-trigger
aria-haspopup="listbox"
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
class="arrow-icon"
data-arrow-icon
class="w-3.5 h-3.5 transition-transform duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -33,18 +38,32 @@ const { currentVersion, versions } = Astro.props;
<!-- Dropdown menu -->
<div
class="version-dropdown"
data-version-dropdown
role="listbox"
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) => (
<a
href={`/spec/${v}`}
class:list={["version-option", { active: v === currentVersion }]}
role="option"
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}
</a>
@@ -67,158 +86,54 @@ const { currentVersion, versions } = Astro.props;
const dropdown = selector.querySelector(
"[data-version-dropdown]"
) as HTMLElement;
const arrow = selector.querySelector(
"[data-arrow-icon]"
) as HTMLElement;
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) => {
e.stopPropagation();
const isOpen = dropdown.classList.contains("open");
const isOpen = dropdown.dataset.open === "true";
// Close all other dropdowns first
document.querySelectorAll("[data-version-dropdown].open").forEach((d) => {
d.classList.remove("open");
d.previousElementSibling?.setAttribute("aria-expanded", "false");
});
// Close all other dropdowns
document.querySelectorAll("[data-version-dropdown][data-open]")
.forEach((d) => {
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) {
dropdown.classList.add("open");
trigger.setAttribute("aria-expanded", "true");
}
isOpen ? close() : open();
});
// Close on click outside
document.addEventListener("click", (e) => {
if (!selector.contains(e.target as Node)) {
dropdown.classList.remove("open");
trigger.setAttribute("aria-expanded", "false");
}
if (!selector.contains(e.target as Node)) close();
});
// Close on escape
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && dropdown.classList.contains("open")) {
dropdown.classList.remove("open");
trigger.setAttribute("aria-expanded", "false");
if (e.key === "Escape" && dropdown.dataset.open === "true") {
close();
trigger.focus();
}
});
});
}
// Initialize on load
initVersionSelectors();
// Re-initialize on Astro page transitions
document.addEventListener("astro:after-swap", initVersionSelectors);
</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">
<h1
class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
text-[var(--color-border-strong)]
dark:text-[var(--color-dark-border-strong)]"
text-gray-300 dark:text-gray-700"
>
404
</h1>
<p
class="text-xl mb-2 text-[var(--color-text-secondary)]
dark:text-[var(--color-dark-text-secondary)]"
>
<p class="text-xl mb-2 text-gray-600 dark:text-gray-400">
Page not found
</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.
</p>
<a

10
src/pages/index.astro
View File

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

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

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

229
src/styles/global.css
View File

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