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: even more tailwind alignment

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 21:25:10 +00:00
parent de472c82a2
commit 4fadbd111a
6 changed files with 115 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/FAQSection.astro
View File

@@ -23,9 +23,16 @@ const { items } = Astro.props;
<div class="space-y-0">
{
items.map((item, index) => (
<div class="faq-item" data-faq-item>
<div
class="border-b border-gray-200 dark:border-gray-800"
data-faq-item
>
<button
class="faq-question"
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-gray-50
hover:text-sky-600"
aria-expanded="false"
data-faq-trigger
>
@@ -46,7 +53,8 @@ const { items } = Astro.props;
</svg>
</button>
<div
class="faq-answer hidden prose-spec spec-content"
class="hidden pb-6 text-gray-600 dark:text-gray-400
prose-spec spec-content"
data-faq-content
set:html={item.answer}
/>

38
src/components/Header.astro
View File

@@ -12,8 +12,9 @@ const { version } = Astro.props;
<header
id="site-header"
class="fixed top-0 inset-x-0 z-50 glass border-b border-transparent
translate-y-[-100%] transition-transform duration-300"
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-gray-950/85"
>
<div
class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -38,9 +39,36 @@ const { version } = Astro.props;
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-1">
<a href="#about" class="btn btn-ghost text-sm">About</a>
<a href="#spec" class="btn btn-ghost text-sm">Spec</a>
<a href="#faq" class="btn btn-ghost text-sm">FAQ</a>
<a
href="#about"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
>
About
</a>
<a
href="#spec"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
>
Spec
</a>
<a
href="#faq"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
>
FAQ
</a>
</nav>
<!-- Right side: Theme, GitHub -->

41
src/components/Hero.astro
View File

@@ -87,7 +87,14 @@ const { version, svgPath } = Astro.props;
<!-- Version badge -->
<div class="animate-fade-in-up delay-200 mb-10">
<span class="version-badge">v{version}</span>
<span
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-gray-900 dark:border-gray-800"
>
v{version}
</span>
</div>
<!-- SVG Diagram -->
@@ -111,9 +118,35 @@ const { version, svgPath } = Astro.props;
class="animate-fade-in-up delay-400
flex flex-wrap items-center justify-center gap-4"
>
<a href="#about" class="btn btn-ghost">About</a>
<a href="#spec" class="btn btn-primary">Read the Spec</a>
<a href="#faq" class="btn btn-ghost">FAQ</a>
<a
href="#about"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-gray-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
>
About
</a>
<a
href="#spec"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
>
Read the Spec
</a>
<a
href="#faq"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-gray-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
>
FAQ
</a>
</nav>
</div>

29
src/components/SpecSidebar.astro
View File

@@ -25,7 +25,13 @@ const { items } = Astro.props;
items.map((item) => (
<a
href={`#${item.id}`}
class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
class:list={[
"sidebar-link block py-2 px-4 text-sm rounded-md -ml-0.5",
"border-l-2 border-transparent transition-colors",
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
"dark:hover:text-gray-50 dark:hover:bg-gray-900",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-sidebar-link
data-section-id={item.id}
>
@@ -103,7 +109,13 @@ const { items } = Astro.props;
items.map((item) => (
<a
href={`#${item.id}`}
class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
class:list={[
"sidebar-link block py-2 px-4 text-sm rounded-md -ml-0.5",
"border-l-2 border-transparent transition-colors",
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
"dark:hover:text-gray-50 dark:hover:bg-gray-900",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-toc-link
>
{item.title}
@@ -196,6 +208,19 @@ const { items } = Astro.props;
</script>
<style>
/* Active state for sidebar links (toggled by JavaScript) */
.sidebar-link.active {
border-left-color: #0284c7;
color: #0284c7;
background-color: rgba(14, 165, 233, 0.15);
}
:global(.dark) .sidebar-link.active {
color: #38bdf8;
background-color: rgba(14, 165, 233, 0.2);
}
/* Scrollbar styling */
#spec-sidebar::-webkit-scrollbar {
width: 4px;
}

6
src/pages/404.astro
View File

@@ -18,7 +18,11 @@ import Default from "../layouts/Default.astro";
</p>
<a
href="/"
class="inline-block mt-8 btn btn-primary"
class="inline-flex items-center justify-center gap-2 mt-8
px-5 py-2.5 text-sm font-medium rounded-lg
transition-all cursor-pointer
bg-sky-600 text-white
hover:bg-sky-500 hover:-translate-y-0.5 hover:shadow-md"
>
Go to homepage
</a>

190
src/styles/global.css
View File

@@ -340,38 +340,14 @@ html {
/* Component styles */
@layer components {
/* Glass effect for header */
.glass {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background-color: rgba(250, 250, 250, 0.85);
}
.dark .glass {
background-color: rgba(10, 10, 10, 0.85);
}
/* Gradient text */
.gradient-text {
-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-image: linear-gradient(to bottom right, #fafafa, #38bdf8);
}
/* Section container */
/* Section container - uses CSS vars, keep here */
.section-container {
max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
margin: 0 auto;
padding: 0 var(--section-padding-x);
}
/* Content prose styling */
/* Prose styling for markdown content - can't add classes to rendered HTML */
.prose-spec {
max-width: var(--content-max-width);
}
@@ -400,166 +376,4 @@ html {
border-radius: 8px;
margin: 2rem 0;
}
/* Subtle border */
.border-subtle {
border-color: #e5e5e5;
}
.dark .border-subtle {
border-color: #262626;
}
/* Button base */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
border-radius: 8px;
transition: all var(--transition-fast);
cursor: pointer;
}
.btn-primary {
background-color: var(--color-accent);
color: white;
}
.btn-primary:hover {
background-color: var(--color-accent-light);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-ghost {
background-color: transparent;
color: #525252;
}
.dark .btn-ghost {
color: #a3a3a3;
}
.btn-ghost:hover {
background-color: #f5f5f5;
color: #0a0a0a;
}
.dark .btn-ghost:hover {
background-color: #171717;
color: #fafafa;
}
/* Sidebar link styles */
.sidebar-link {
display: block;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 6px;
transition: all var(--transition-fast);
border-left: 2px solid transparent;
margin-left: -2px;
color: #737373;
}
.sidebar-link:hover {
color: #0a0a0a;
background-color: #f5f5f5;
}
.dark .sidebar-link:hover {
color: #fafafa;
background-color: #171717;
}
.sidebar-link.active {
border-left-color: var(--color-accent);
color: #0284c7;
background-color: rgba(14, 165, 233, 0.15);
}
.dark .sidebar-link.active {
color: #38bdf8;
background-color: rgba(14, 165, 233, 0.2);
}
.sidebar-link-sub {
padding-left: 1.5rem;
font-size: 0.8125rem;
}
/* Version badge */
.version-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
color: #737373;
}
.dark .version-badge {
background-color: #171717;
border-color: #262626;
}
/* FAQ accordion styles */
.faq-item {
border-bottom: 1px solid #e5e5e5;
}
.dark .faq-item {
border-bottom-color: #262626;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.5rem 0;
text-align: left;
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 600;
cursor: pointer;
transition: color var(--transition-fast);
color: #0a0a0a;
}
.dark .faq-question {
color: #fafafa;
}
.faq-question:hover {
color: var(--color-accent);
}
.faq-answer {
padding-bottom: 1.5rem;
color: #525252;
}
.dark .faq-answer {
color: #a3a3a3;
}
}
/* Transitions for interactive elements */
@layer components {
#layout,
#menu,
.menu-link {
transition: all var(--transition-base);
}
}