Ombrora/convert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): redesign homepage and file config form with aurora palette

Browse Source 
Rebuild the visual identity from the actual Ombrora mark (violet/cyan aurora
blobs) instead of the generic blue/amber scheme, add Bricolage Grotesque and
IBM Plex Mono for display and code-like text, and give the hero an animated
aurora backdrop, gradient headline, and a format-pair marquee driven by the
real registered converters.

Rework the file config form: target format and icon size are both chip
groups now instead of a native select, and quality/compression sliders get a
gradient-filled track, custom thumb, and a mono value pill to match. File
type icons are color-coded by family (images/documents/fonts/ebooks) and
reused across FileConfigCard, FileCard, and FormatsGrid.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
anthony
2026-07-31 16:34:13 +02:00
co-authored by Claude Sonnet 5
parent 023a96e5d8
commit 987af80286
14 changed files with 770 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.css
+41 -19
View File
@@ -1,34 +1,56 @@
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=IBM+Plex+Mono:wght@500;600&display=swap');
:root {
--color-primary: #2563eb;
/* interactive-safe (AA-contrast) roles */
--color-primary: #6d28d9;
--color-on-primary: #ffffff;
--color-secondary: #3b82f6;
--color-accent: #d97706;
--color-background: #f8fafc;
--color-foreground: #0f172a;
--color-muted: #f1f5fd;
--color-border: #e4ecfc;
--color-secondary: #0e7ea8;
--color-background: #faf9fe;
--color-foreground: #150f26;
--color-muted: #ede6ff;
--color-border: #e3daf7;
--color-destructive: #dc2626;
--color-ring: #2563eb;
--color-ring: #6d28d9;
/* decorative aurora duo, drawn from the Ombrora mark — used for gradients, blobs, glow */
--color-aurora-violet: #7e14ff;
--color-aurora-cyan: #47bfff;
--color-aurora-mist: #ede6ff;
--gradient-aurora: linear-gradient(135deg, var(--color-aurora-violet), var(--color-aurora-cyan));
/* file-family accents, reused for icon chips across the upload flow */
--color-family-images: var(--color-aurora-violet);
--color-family-documents: var(--color-aurora-cyan);
--color-family-fonts: #f5a524;
--color-family-ebooks: #10b981;
--font-sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Bricolage Grotesque', var(--font-sans);
--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
color-scheme: light dark;
font: 16px/1.5 var(--font-sans);
}
:root[data-theme='dark'] {
--color-primary: #3b82f6;
--color-on-primary: #0f172a;
--color-secondary: #60a5fa;
--color-accent: #f59e0b;
--color-background: #0f172a;
--color-foreground: #f1f5f9;
--color-muted: #1e293b;
--color-border: #334155;
--color-destructive: #f87171;
--color-ring: #3b82f6;
--color-primary: #9b6bff;
--color-on-primary: #150f26;
--color-secondary: #47bfff;
--color-background: #0d0a18;
--color-foreground: #f3f0ff;
--color-muted: #1c1530;
--color-border: #332853;
--color-destructive: #fb7185;
--color-ring: #9b6bff;
--color-aurora-violet: #9b6bff;
--color-aurora-cyan: #47bfff;
--color-aurora-mist: #241a3d;
--color-family-images: var(--color-aurora-violet);
--color-family-documents: var(--color-aurora-cyan);
--color-family-fonts: #ffb84d;
--color-family-ebooks: #34d399;
}
*, *::before, *::after {