From 6fe2978657f5744206deb3fb6ef9128d5b9ba516 Mon Sep 17 00:00:00 2001 From: Frederic Cabassut Date: Fri, 6 Mar 2026 10:51:10 +0100 Subject: [PATCH] style: redesign UI with parchment theme and JetBrains Mono font Replace the default dark/white theme with a warm parchment aesthetic using CSS custom properties, retro pixel overlay, and JetBrains Mono monospace font across all components. Bump version to 0.1.7. Co-Authored-By: Claude Opus 4.6 --- package.json | 2 +- src/app.css | 52 +++++++++++++++++++++ src/app.html | 4 +- src/lib/components/Checklist.svelte | 8 ++-- src/lib/components/ColorPicker.svelte | 2 +- src/lib/components/FormattingToolbar.svelte | 40 ++++++++-------- src/lib/components/ImageUpload.svelte | 8 ++-- src/lib/components/Layout/Header.svelte | 8 ++-- src/lib/components/Layout/Sidebar.svelte | 14 +++--- src/lib/components/Layout/Toast.svelte | 2 +- src/lib/components/NoteCard.svelte | 30 ++++++------ src/lib/components/NoteEditor.svelte | 20 ++++---- src/lib/components/SearchBar.svelte | 8 ++-- src/lib/components/TagFilter.svelte | 2 +- src/lib/components/TiptapEditor.svelte | 4 +- src/lib/utils/colors.ts | 2 +- src/routes/+layout.svelte | 4 +- src/routes/+page.svelte | 16 +++---- src/routes/login/+page.svelte | 14 +++--- src/routes/setup/+page.svelte | 16 +++---- tests/e2e/notes-crud.spec.ts | 2 +- vite.config.ts | 4 +- 22 files changed, 157 insertions(+), 105 deletions(-) diff --git a/package.json b/package.json index 51c7a60..e53e29b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "crumbs", "private": true, - "version": "0.1.6", + "version": "0.1.7", "type": "module", "scripts": { "dev": "vite dev", diff --git a/src/app.css b/src/app.css index 1c4d2a8..f6e7fa3 100644 --- a/src/app.css +++ b/src/app.css @@ -1,2 +1,54 @@ +@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); + @import 'tailwindcss'; @plugin '@tailwindcss/typography'; + +:root { + --bg-base: #f0e6d3; + --bg-surface: #faf5eb; + --primary: #C8860A; + --primary-hover: #E8A020; + --text: #1a1a2e; + --text-muted: #6b6272; + --border: #1a1a2e; + --border-subtle: #d4cabb; +} + +body { + font-family: 'JetBrains Mono', monospace; +} + +body::before { + content: ''; + position: fixed; + inset: 0; + pointer-events: none; + opacity: 0.03; + background-image: repeating-conic-gradient(#1a1a2e 0% 25%, transparent 0% 50%); + background-size: 4px 4px; + z-index: 0; +} + +/* Prose overrides for parchment theme */ +.prose { + --tw-prose-body: var(--text); + --tw-prose-headings: var(--text); + --tw-prose-links: var(--primary); + --tw-prose-code: var(--text); + --tw-prose-pre-bg: var(--bg-surface); + --tw-prose-pre-code: var(--text); +} + +.prose :where(code):not(:where([class~="not-prose"] *)) { + background-color: var(--bg-surface); + border-radius: 2px; + padding: 0.125rem 0.25rem; +} + +.prose :where(a):not(:where([class~="not-prose"] *)) { + color: var(--primary); +} + +.prose :where(a):not(:where([class~="not-prose"] *)):hover { + color: var(--primary-hover); +} diff --git a/src/app.html b/src/app.html index 229730d..29f7c73 100644 --- a/src/app.html +++ b/src/app.html @@ -3,7 +3,9 @@ - + + + toggleItem(index)} - class="h-4 w-4 rounded border-gray-300 text-amber-600 focus:ring-amber-500" + class="h-4 w-4 rounded border-[var(--border-subtle)] text-[var(--primary)] focus:ring-[var(--primary)]" data-testid="checklist-checkbox" /> updateText(index, (e.target as HTMLInputElement).value)} onkeydown={(e) => handleKeydown(e, index)} - class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-gray-400 line-through' : 'text-gray-800'}" + class="flex-1 bg-transparent text-sm outline-none {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}" placeholder="List item" data-testid="checklist-input" /> @@ -101,7 +101,7 @@ aria-label="Remove item" data-testid="checklist-remove" > - + @@ -109,7 +109,7 @@ {/each}
@@ -132,7 +132,7 @@ -
+
@@ -146,13 +146,13 @@ {#if openDropdown === 'heading'} -
+
@@ -187,7 +187,7 @@ {#if openDropdown === 'list'} -
+
-
+
{#if openDropdown === 'link'} -
+
{ e.preventDefault(); applyLink(); }} @@ -290,23 +290,23 @@ bind:value={linkUrl} type="url" placeholder="Paste a link..." - class="w-44 bg-transparent px-1.5 py-1 text-sm text-gray-700 outline-none placeholder:text-gray-400" + class="w-44 bg-transparent px-1.5 py-1 text-sm text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]" data-testid="format-link-input" /> -
+
-
+
@@ -341,7 +341,7 @@ {#if openDropdown === 'align'} -
+
-
+
🥨 -

Crumbs

+

Crumbs

diff --git a/src/lib/components/Layout/Sidebar.svelte b/src/lib/components/Layout/Sidebar.svelte index a7f6a05..3d0c9fd 100644 --- a/src/lib/components/Layout/Sidebar.svelte +++ b/src/lib/components/Layout/Sidebar.svelte @@ -21,14 +21,14 @@