Skip to content

refactor: remove all 327 inline styles #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajianaz merged 1 commit into from
May 30, 2026
Merged

refactor: remove all 327 inline styles #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 169 additions & 0 deletions website/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -731,6 +731,175 @@ body {
text-decoration: underline;
}

/* ---- Docs Section ---- */
.docs-section {
margin-top: var(--space-12);
}

.docs-section h2 {
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.3;
margin-bottom: var(--space-3);
color: var(--foreground);
}

.docs-section p {
color: var(--muted-foreground);
font-size: 0.9375rem;
line-height: 1.7;
margin-bottom: var(--space-4);
}

/* ---- Docs Card ---- */
.docs-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--card);
border-radius: var(--space-3);
border: 1px solid var(--border);
}

.docs-card-number {
width: var(--space-8);
height: var(--space-8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: oklch(0.65 0.22 270 / 0.1);
color: var(--accent);
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}

.docs-card-number.primary {
background: oklch(0.65 0.22 270 / 0.15);
color: var(--accent);
}

.docs-card-number.muted {
background: var(--muted);
color: var(--muted-foreground);
}

/* ---- Docs Terminal ---- */
.docs-terminal {
background: oklch(0.10 0 0);
border-radius: var(--space-3);
border: 1px solid var(--border);
overflow: hidden;
margin-bottom: var(--space-6);
}

.terminal-bar {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
background: oklch(0.10 0 0);
}

.terminal-bar span {
width: var(--space-2);
height: var(--space-2);
border-radius: 9999px;
}

.terminal-bar .terminal-dot-red { background: var(--destructive); }
.terminal-bar .terminal-dot-yellow { background: var(--warning); }
.terminal-bar .terminal-dot-green { background: var(--success); }

/* ---- Docs utility classes ---- */
.docs-term-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}

.docs-term-item {
display: flex;
gap: var(--space-2);
font-size: 14px;
color: var(--muted-foreground);
}

.docs-term-key {
color: var(--accent);
font-family: var(--font-mono);
flex-shrink: 0;
}

.docs-term-value {
color: var(--muted-foreground);
font-size: 14px;
}

.docs-link-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.docs-link-list a {
font-size: 14px;
color: var(--accent);
text-decoration: none;
}

.docs-link-list a:hover {
text-decoration: underline;
}

/* ---- Mobile docs nav ---- */
.mobile-docs-nav {
display: none;
position: sticky;
top: 3.5rem;
z-index: 20;
background: var(--background);
border-bottom: 1px solid var(--border);
padding: var(--space-2) var(--space-4);
overflow-x: auto;
white-space: nowrap;
}

.mobile-docs-nav a {
display: inline-block;
padding: var(--space-2) var(--space-3);
border-radius: var(--space-2);
color: var(--muted-foreground);
font-size: 14px;
text-decoration: none;
min-height: 44px;
line-height: 1.25;
transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-docs-nav a:hover {
background: var(--muted);
color: var(--foreground);
}

.mobile-docs-nav a.active {
background: oklch(0.65 0.22 270 / 0.1);
color: var(--accent);
}

@media (max-width: 768px) {
.mobile-docs-nav {
display: flex;
align-items: center;
gap: var(--space-1);
}
}

/* ---- Mobile: collapse docs sidebar ---- */
@media (max-width: 768px) {
.docs-sidebar {
Expand Down
26 changes: 13 additions & 13 deletions website/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,11 @@
<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">5</div>
<div class="text-sm text-[var(--muted-foreground)] mt-2">AI Providers</div>
</div>
<div class="glass-card text-center scroll-reveal py-8" style="transition-delay: 100ms;">
<div class="glass-card text-center scroll-reveal py-8 [transition-delay:100ms]">
<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">&lt; 3s</div>
<div class="text-sm text-[var(--muted-foreground)] mt-2">Review Time</div>
</div>
<div class="glass-card text-center scroll-reveal py-8" style="transition-delay: 200ms;">
<div class="glass-card text-center scroll-reveal py-8 [transition-delay:200ms]">
<div class="text-2xl md:text-3xl font-bold text-[var(--foreground)] -tracking-tight leading-tight">Zero</div>
<div class="text-sm text-[var(--muted-foreground)] mt-2">Config Required</div>
</div>
Expand Down Expand Up @@ -222,7 +222,7 @@
</div>

<!-- Step 2 -->
<div class="glass-card flex-1 text-center scroll-reveal" style="transition-delay: 100ms;">
<div class="glass-card flex-1 text-center scroll-reveal [transition-delay:100ms]">
<div class="text-2xl font-bold text-[var(--accent)] -tracking-tight font-mono opacity-50">02</div>
<div class="flex justify-center mt-4">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
Expand All @@ -232,12 +232,12 @@
</div>

<!-- Connector -->
<div class="connect-line hidden md:flex scroll-reveal" style="transition-delay: 100ms;">
<div class="connect-line hidden md:flex scroll-reveal [transition-delay:100ms]">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
</div>

<!-- Step 3 -->
<div class="glass-card flex-1 text-center scroll-reveal" style="transition-delay: 200ms;">
<div class="glass-card flex-1 text-center scroll-reveal [transition-delay:200ms]">
<div class="text-2xl font-bold text-[var(--accent)] -tracking-tight font-mono opacity-50">03</div>
<div class="flex justify-center mt-4">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--success)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
Expand Down Expand Up @@ -269,7 +269,7 @@
</div>

<!-- Feature 2: BYOK -->
<div class="glass-card scroll-reveal" style="transition-delay: 100ms;">
<div class="glass-card scroll-reveal [transition-delay:100ms]">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
</div>
Expand All @@ -279,7 +279,7 @@
</div>

<!-- Feature 3: Pre-commit Hooks -->
<div class="glass-card scroll-reveal" style="transition-delay: 200ms;">
<div class="glass-card scroll-reveal [transition-delay:200ms]">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22V8"/><path d="M5 12H2a10 10 0 0020 0h-3"/><circle cx="12" cy="5" r="3"/></svg>
</div>
Expand All @@ -289,7 +289,7 @@
</div>

<!-- Feature 4: Incremental Scan -->
<div class="glass-card scroll-reveal" style="transition-delay: 300ms;">
<div class="glass-card scroll-reveal [transition-delay:300ms]">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>
</div>
Expand All @@ -299,7 +299,7 @@
</div>

<!-- Feature 5: SARIF Output -->
<div class="glass-card scroll-reveal" style="transition-delay: 400ms;">
<div class="glass-card scroll-reveal [transition-delay:400ms]">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
</div>
Expand All @@ -309,7 +309,7 @@
</div>

<!-- Feature 6: Fully Private -->
<div class="glass-card scroll-reveal" style="transition-delay: 500ms;">
<div class="glass-card scroll-reveal [transition-delay:500ms]">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/><circle cx="12" cy="16" r="1"/></svg>
</div>
Expand Down Expand Up @@ -434,7 +434,7 @@
</div>

<!-- Step 2 -->
<div class="timeline-step scroll-reveal" style="transition-delay: 100ms;">
<div class="timeline-step scroll-reveal [transition-delay:100ms]">
<div class="timeline-number">2</div>
<div>
<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Initialize</h3>
Expand All @@ -453,7 +453,7 @@
</div>

<!-- Step 3 -->
<div class="timeline-step scroll-reveal" style="transition-delay: 200ms;">
<div class="timeline-step scroll-reveal [transition-delay:200ms]">
<div class="timeline-number">3</div>
<div>
<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Review</h3>
Expand All @@ -472,7 +472,7 @@
</div>

<!-- Step 4 -->
<div class="timeline-step scroll-reveal" style="transition-delay: 300ms;">
<div class="timeline-step scroll-reveal [transition-delay:300ms]">
<div class="timeline-number">4</div>
<div>
<h3 class="text-lg font-semibold text-[var(--foreground)] -tracking-tight leading-snug">Done</h3>
Expand Down
22 changes: 11 additions & 11 deletions website/src/routes/docs/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
{ href: '/docs/installation', label: 'Installation' },
{ href: '/docs/usage', label: 'Usage' },
{ href: '/docs/configuration', label: 'Configuration' },
{ href: '/docs/providers', label: 'Providers' },
{ href: '/docs/examples', label: 'Examples' },
{ href: '/docs/providers', label: 'Providers' },
{ href: '/docs/examples', label: 'Examples' },
{ href: '/docs/cli-reference', label: 'CLI Reference' },
];
</script>
Expand All @@ -18,21 +18,21 @@
<title>Docs — cora</title>
</svelte:head>

<div style="min-height: 100vh; display: flex; background: var(--background);">
<div class="min-h-screen flex bg-[var(--background)]">

<!-- Sidebar (desktop) -->
<aside class="docs-sidebar hidden lg:block">
<div style="padding: 1.5rem;">
<a href="/" class="flex items-center gap-2 mb-8" style="color: var(--muted-foreground); text-decoration: none; font-size: 14px; transition: color 0.2s ease; min-height: 44px; display: flex; align-items: center;">
<div class="p-6">
<a href="/" class="flex items-center gap-2 mb-8 text-sm text-[var(--muted-foreground)] no-underline transition-colors duration-200 min-h-11 hover:text-[var(--foreground)]">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
Back to Home
</a>

<div style="margin-bottom: 1.5rem;">
<a href="/docs" style="font-size: 18px; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: -0.01em; line-height: 1.35;">cora docs</a>
<div class="mb-6">
<a href="/docs" class="text-lg font-semibold text-[var(--accent)] no-underline -tracking-tight leading-tight">cora docs</a>
</div>

<nav style="display: flex; flex-direction: column; gap: 0.25rem;">
<nav class="flex flex-col gap-1">
{#each navLinks as link}
<a
href={link.href}
Expand All @@ -48,7 +48,7 @@

<!-- Mobile nav -->
<nav class="mobile-docs-nav">
<a href="/" style="color: var(--muted-foreground);" aria-label="Back to Home">
<a href="/" class="text-[var(--muted-foreground)]" aria-label="Back to Home">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
</a>
{#each navLinks as link}
Expand All @@ -59,8 +59,8 @@
</nav>

<!-- Main content -->
<main style="flex: 1; min-width: 0;">
<div style="max-width: 48rem; margin: 0 auto; padding: 3rem 2rem;">
<main class="flex-1 min-w-0">
<div class="max-w-3xl mx-auto px-8 py-12">
{@render children()}
</div>
</main>
Expand Down
Loading
Loading