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: switch dark mode to pure black

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 23:41:09 +00:00
parent 7d06d18ccb
commit d55ead82d7
20 changed files with 642 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AboutSection.astro
View File

@@ -16,7 +16,7 @@ const { introduction, summary, 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-gray-600 dark:text-slate-400">
<p class="text-lg text-gray-600 dark:text-neutral-400">
A practical git workflow that combines the best of GitHub Flow with
versioned releases
</p>
@@ -29,7 +29,7 @@ const { introduction, summary, license } = Astro.props;
<div class="mb-16">
<h3
class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-slate-50"
text-gray-950 dark:text-neutral-50"
>
Key Principles
</h3>
@@ -37,16 +37,16 @@ const { introduction, summary, license } = Astro.props;
</div>
<!-- Feedback & License -->
<div class="pt-8 border-t border-gray-200 dark:border-slate-800">
<div class="pt-8 border-t border-gray-200 dark:border-neutral-800">
<div class="grid sm:grid-cols-2 gap-8">
<div>
<h4
class="text-sm font-semibold uppercase tracking-wider mb-3
text-gray-500 dark:text-slate-500"
text-gray-500 dark:text-neutral-500"
>
Feedback
</h4>
<p class="text-gray-600 dark:text-slate-400">
<p class="text-gray-600 dark:text-neutral-400">
Please{" "}
<a
href={`${config.repoUrl}/issues`}
@@ -59,11 +59,11 @@ const { introduction, summary, license } = Astro.props;
<div>
<h4
class="text-sm font-semibold uppercase tracking-wider mb-3
text-gray-500 dark:text-slate-500"
text-gray-500 dark:text-neutral-500"
>
License
</h4>
<div class="text-gray-600 dark:text-slate-400" set:html={license} />
<div class="text-gray-600 dark:text-neutral-400" set:html={license} />
</div>
</div>
</div>

8
src/components/FAQSection.astro
View File

@@ -14,7 +14,7 @@ const { items } = Astro.props;
<!-- Section header -->
<div class="mb-12 text-center">
<h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
<p class="text-lg text-gray-600 dark:text-slate-400">
<p class="text-lg text-gray-600 dark:text-neutral-400">
Common questions about Git Common-Flow
</p>
</div>
@@ -24,14 +24,14 @@ const { items } = Astro.props;
{
items.map((item, index) => (
<div
class="border-b border-gray-200 dark:border-slate-800"
class="border-b border-gray-200 dark:border-neutral-800"
data-faq-item
>
<button
class="flex justify-between items-center w-full py-6 text-left
font-display text-lg font-semibold cursor-pointer
transition-colors
text-gray-950 dark:text-slate-50
text-gray-950 dark:text-neutral-50
hover:text-sky-600"
aria-expanded="false"
data-faq-trigger
@@ -58,7 +58,7 @@ const { items } = Astro.props;
>
<div class="overflow-hidden">
<div
class="pb-6 text-gray-600 dark:text-slate-400 prose-spec"
class="pb-6 text-gray-600 dark:text-neutral-400 prose-spec"
set:html={item.answer}
/>
</div>

4
src/components/Footer.astro
View File

@@ -4,8 +4,8 @@ import { config } from "../config";
<footer
class="py-8 text-center text-sm
text-gray-500 dark:text-slate-500
border-t border-gray-200 dark:border-slate-800"
text-gray-500 dark:text-neutral-500
border-t border-gray-200 dark:border-neutral-800"
>
<div class="section-container">
<p>

38
src/components/Header.astro
View File

@@ -14,7 +14,7 @@ const { version } = Astro.props;
id="site-header"
class="fixed top-0 inset-x-0 z-50 border-b border-transparent
translate-y-[-100%] transition-transform duration-300
backdrop-blur-xl bg-gray-50/85 dark:bg-slate-950/85"
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"
>
<div
class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -24,7 +24,7 @@ const { version } = Astro.props;
<a
href="#hero"
class="flex items-center gap-3 no-underline
text-gray-950 dark:text-slate-50
text-gray-950 dark:text-neutral-50
hover:text-sky-600 transition-colors"
>
<span class="font-display font-bold text-lg tracking-tight">
@@ -45,9 +45,9 @@ const { version } = Astro.props;
href="#about"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="about"
>
@@ -57,9 +57,9 @@ const { version } = Astro.props;
href="#spec"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="spec"
>
@@ -69,9 +69,9 @@ const { version } = Astro.props;
href="#faq"
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
rounded-lg transition-colors cursor-pointer
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
data-nav-link
data-section-id="faq"
>
@@ -88,9 +88,9 @@ const { version } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-gray-100 dark:hover:bg-slate-800"
text-gray-500 dark:text-neutral-500
hover:text-gray-950 dark:hover:text-neutral-50
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -105,8 +105,8 @@ const { version } = Astro.props;
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg
text-gray-500 dark:text-slate-500
hover:bg-gray-100 dark:hover:bg-slate-800"
text-gray-500 dark:text-neutral-500
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="Toggle menu"
>
<svg
@@ -128,7 +128,7 @@ const { version } = Astro.props;
<!-- Mobile Navigation -->
<nav
id="mobile-nav"
class="md:hidden hidden border-t border-gray-200 dark:border-slate-800"
class="md:hidden hidden border-t border-gray-200 dark:border-neutral-800"
>
<div class="px-4 py-3 space-y-1 text-center">
<div class="py-2 flex justify-center">
@@ -139,7 +139,7 @@ const { version } = Astro.props;
</div>
<a
href="#about"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="about"
@@ -148,7 +148,7 @@ const { version } = Astro.props;
</a>
<a
href="#spec"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="spec"
@@ -157,7 +157,7 @@ const { version } = Astro.props;
</a>
<a
href="#faq"
class="nav-link block py-2 text-gray-600 dark:text-slate-400
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
hover:text-sky-600"
data-nav-link
data-section-id="faq"
@@ -184,10 +184,10 @@ const { version } = Astro.props;
function updateHeaderVisibility() {
if (window.scrollY >= navbarHeight) {
header.classList.remove("translate-y-[-100%]");
header.classList.add("border-gray-200", "dark:border-slate-800");
header.classList.add("border-gray-200", "dark:border-neutral-800");
} else {
header.classList.add("translate-y-[-100%]");
header.classList.remove("border-gray-200", "dark:border-slate-800");
header.classList.remove("border-gray-200", "dark:border-neutral-800");
}
}

30
src/components/Hero.astro
View File

@@ -20,7 +20,7 @@ const { version, svgPath } = Astro.props;
<div
class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50
dark:from-slate-900 dark:to-slate-950"
dark:from-neutral-900 dark:to-neutral-950"
>
</div>
@@ -28,7 +28,7 @@ const { version, svgPath } = Astro.props;
<div
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.slate.400)_1px,transparent_1px),linear-gradient(90deg,theme(colors.slate.400)_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]"
>
</div>
@@ -51,9 +51,9 @@ const { version, svgPath } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-white/50 dark:hover:bg-slate-800/50"
text-gray-500 dark:text-neutral-500
hover:text-gray-950 dark:hover:text-neutral-50
hover:bg-white/50 dark:hover:bg-neutral-800/50"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -71,7 +71,7 @@ const { version, svgPath } = Astro.props;
<!-- Title -->
<h1
class="animate-fade-in-up mb-4
text-gray-950 dark:text-slate-50"
text-gray-950 dark:text-neutral-50"
>
Git Common-Flow
</h1>
@@ -80,7 +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-gray-600 dark:text-slate-400"
text-gray-600 dark:text-neutral-400"
>
A sensible git workflow for teams who ship
</p>
@@ -91,7 +91,7 @@ const { version, svgPath } = Astro.props;
class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
rounded-full border
bg-gray-100 border-gray-200 text-gray-500
dark:bg-slate-800/50 dark:border-slate-700 dark:text-slate-400"
dark:bg-neutral-800/50 dark:border-neutral-700 dark:text-neutral-400"
>
v{version}
</span>
@@ -101,9 +101,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-slate-900
bg-white dark:bg-neutral-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-slate-800"
border border-gray-200 dark:border-neutral-800"
>
<img
src={svgPath}
@@ -122,9 +122,9 @@ const { version, svgPath } = Astro.props;
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
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
>
About
</a>
@@ -141,9 +141,9 @@ const { version, svgPath } = Astro.props;
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
text-gray-600 dark:text-slate-400
text-gray-600 dark:text-neutral-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-slate-800 dark:hover:text-slate-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
>
FAQ
</a>
@@ -155,7 +155,7 @@ const { version, svgPath } = Astro.props;
href="#about"
class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-slate-500
text-gray-500 dark:text-neutral-500
hover:text-sky-600 transition-colors"
aria-label="Scroll to content"
>

2
src/components/SpecSection.astro
View File

@@ -17,7 +17,7 @@ const { terminology, terminologyTitle, 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-gray-600 dark:text-slate-400">
<p class="text-lg text-gray-600 dark:text-neutral-400">
The complete Git Common-Flow specification
</p>
</div>

14
src/components/SpecSidebar.astro
View File

@@ -12,12 +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-gray-200 dark:border-slate-800"
lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-neutral-800"
>
<nav class="space-y-1 py-2">
<div
class="text-xs font-semibold uppercase tracking-wider mb-4
text-gray-500 dark:text-slate-500"
text-gray-500 dark:text-neutral-500"
>
Table of Contents
</div>
@@ -29,7 +29,7 @@ const { items } = Astro.props;
"sidebar-link block py-2 px-4 text-sm rounded-md",
"transition-colors",
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
"dark:text-slate-500 dark:hover:text-slate-50 dark:hover:bg-slate-800",
"dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-sidebar-link
@@ -74,18 +74,18 @@ const { items } = Astro.props;
<!-- Drawer -->
<div
class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
bg-gray-50 dark:bg-slate-950
bg-gray-50 dark:bg-neutral-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-gray-500 dark:text-slate-500"
text-gray-500 dark:text-neutral-500"
>
Jump to Section
</span>
<button
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800"
data-toc-close
aria-label="Close"
>
@@ -113,7 +113,7 @@ const { items } = Astro.props;
"sidebar-link block py-2 px-4 text-sm rounded-md",
"transition-colors",
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
"dark:text-slate-500 dark:hover:text-slate-50 dark:hover:bg-slate-800",
"dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-toc-link

6
src/components/ThemeToggle.astro
View File

@@ -6,9 +6,9 @@
data-theme-toggle
type="button"
class="p-2 rounded-lg transition-colors duration-200
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-gray-100 dark:hover:bg-slate-800"
text-gray-500 dark:text-neutral-500
hover:text-gray-950 dark:hover:text-neutral-50
hover:bg-gray-100 dark:hover:bg-neutral-800"
aria-label="Toggle dark mode"
>
<!-- Sun icon (shown in dark mode) -->

16
src/components/VersionSelector.astro
View File

@@ -15,10 +15,10 @@ const { currentVersion, versions } = Astro.props;
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-slate-700
border border-gray-200 dark:border-neutral-700
rounded-md bg-transparent cursor-pointer transition-colors
text-gray-600 dark:text-slate-400
hover:border-sky-600 hover:text-gray-950 dark:hover:text-slate-50"
text-gray-600 dark:text-neutral-400
hover:border-sky-600 hover:text-gray-950 dark:hover:text-neutral-50"
>
<span>v{currentVersion}</span>
<svg
@@ -42,8 +42,8 @@ const { currentVersion, versions } = Astro.props;
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-slate-900
border border-gray-200 dark:border-slate-700
bg-gray-50 dark:bg-neutral-900
border border-gray-200 dark:border-neutral-700
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"
@@ -56,9 +56,9 @@ const { currentVersion, versions } = Astro.props;
aria-selected={v === currentVersion}
class:list={[
"block px-3 py-2 font-mono text-sm rounded transition-colors",
"text-gray-600 dark:text-slate-400",
"hover:bg-gray-100 dark:hover:bg-slate-800",
"hover:text-gray-950 dark:hover:text-slate-50",
"text-gray-600 dark:text-neutral-400",
"hover:bg-gray-100 dark:hover:bg-neutral-800",
"hover:text-gray-950 dark:hover:text-neutral-50",
v === currentVersion && [
"bg-sky-500/15 dark:bg-sky-500/20",
"text-sky-600 dark:text-sky-400",

6
src/pages/404.astro
View File

@@ -6,14 +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-gray-300 dark:text-slate-700"
text-gray-300 dark:text-neutral-700"
>
404
</h1>
<p class="text-xl mb-2 text-gray-600 dark:text-slate-400">
<p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">
Page not found
</p>
<p class="text-gray-500 dark:text-slate-500">
<p class="text-gray-500 dark:text-neutral-500">
The page you're looking for doesn't exist.
</p>
<a

40
src/styles/global.css
View File

@@ -62,8 +62,8 @@ html {
}
.dark body {
background-color: theme(colors.slate.950);
color: theme(colors.slate.50);
background-color: theme(colors.neutral.950);
color: theme(colors.neutral.50);
}
/* Typography */
@@ -86,7 +86,7 @@ html {
.dark h4,
.dark h5,
.dark h6 {
color: theme(colors.slate.50);
color: theme(colors.neutral.50);
}
h1 {
@@ -133,7 +133,7 @@ html {
}
.dark code {
background-color: rgba(148, 163, 184, 0.15);
background-color: rgba(163, 163, 163, 0.15);
}
pre {
@@ -146,7 +146,7 @@ html {
}
.dark pre {
background-color: theme(colors.slate.900);
background-color: theme(colors.neutral.900);
}
pre>code {
@@ -196,7 +196,7 @@ html {
}
.dark blockquote {
color: theme(colors.slate.400);
color: theme(colors.neutral.400);
}
/* Strong text */
@@ -352,7 +352,7 @@ html {
}
.dark .prose-spec h2 {
border-bottom-color: theme(colors.slate.800);
border-bottom-color: theme(colors.neutral.800);
}
.prose-spec h2:first-child {
@@ -368,7 +368,7 @@ html {
}
.dark .prose-spec h3 {
color: theme(colors.slate.400);
color: theme(colors.neutral.400);
}
.prose-spec p {
@@ -376,7 +376,7 @@ html {
}
.dark .prose-spec p {
color: theme(colors.slate.400);
color: theme(colors.neutral.400);
}
.prose-spec strong {
@@ -384,7 +384,7 @@ html {
}
.dark .prose-spec strong {
color: theme(colors.slate.50);
color: theme(colors.neutral.50);
}
.prose-spec li {
@@ -392,7 +392,7 @@ html {
}
.dark .prose-spec li {
color: theme(colors.slate.400);
color: theme(colors.neutral.400);
}
/* Nested ordered list counters (spec numbering: 1., 1.1., 1.2.) */
@@ -417,6 +417,10 @@ html {
color: theme(colors.slate.500);
}
.dark .prose-spec ol>li::before {
color: theme(colors.neutral.500);
}
.prose-spec img {
max-width: 100%;
height: auto;
@@ -430,24 +434,24 @@ html {
/* Nav link active state (toggled by JavaScript) */
.nav-link.active {
color: theme(colors.sky.600) !important;
background-color: theme(colors.sky.500 / 15%) !important;
color: theme(colors.sky.700) !important;
background-color: theme(colors.sky.600 / 15%) !important;
}
.dark .nav-link.active {
color: theme(colors.sky.400) !important;
background-color: theme(colors.sky.500 / 20%) !important;
background-color: theme(colors.sky.700 / 20%) !important;
}
/* Sidebar link active state (toggled by JavaScript) */
.sidebar-link.active {
color: theme(colors.sky.600) !important;
background-color: theme(colors.sky.500 / 15%) !important;
color: theme(colors.sky.700) !important;
background-color: theme(colors.sky.600 / 15%) !important;
}
.dark .sidebar-link.active {
color: theme(colors.sky.400) !important;
background-color: theme(colors.sky.500 / 20%) !important;
background-color: theme(colors.sky.600 / 20%) !important;
}
/* Sidebar scrollbar styling */
@@ -465,6 +469,6 @@ html {
}
.dark #spec-sidebar::-webkit-scrollbar-thumb {
background-color: theme(colors.slate.800);
background-color: theme(colors.neutral.800);
}
}