From 707caf396286db659c6fe4d4e7eacf0da5f523ad Mon Sep 17 00:00:00 2001 From: Silberengel Date: Tue, 17 Feb 2026 12:50:16 +0100 Subject: [PATCH] theme defined, with IBM Plex Serif/Mono font --- src/app.css | 38 +++++++++-- src/app.html | 12 ++++ src/lib/components/ThemeToggle.svelte | 92 +++++++++++++++++++++++++++ src/routes/+layout.svelte | 37 ++++++----- src/routes/+page.svelte | 2 + 5 files changed, 159 insertions(+), 22 deletions(-) create mode 100644 src/lib/components/ThemeToggle.svelte diff --git a/src/app.css b/src/app.css index 3058b93..d57eb27 100644 --- a/src/app.css +++ b/src/app.css @@ -78,6 +78,9 @@ --warning-text: #fbbf24; } +/* Import fonts - IBM Plex Serif for classic Roman feel with modern tech aesthetic */ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); + /* Base styles */ * { box-sizing: border-box; @@ -86,28 +89,53 @@ body { margin: 0; padding: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; + line-height: 1.6; +} + +/* Monospace font for code */ +code, pre, .mono { + font-family: 'IBM Plex Mono', 'Courier New', monospace; +} + +/* Headings with slightly more weight */ +h1, h2, h3, h4, h5, h6 { + font-weight: 600; + letter-spacing: -0.02em; } -/* Theme toggle utility */ +/* Theme toggle button */ .theme-toggle { cursor: pointer; - padding: 0.5rem; + padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background: var(--card-bg); color: var(--text-primary); transition: all 0.2s ease; + font-size: 0.875rem; + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-family: 'IBM Plex Serif', serif; } .theme-toggle:hover { background: var(--bg-secondary); border-color: var(--accent); + color: var(--accent); +} + +.theme-toggle:active { + transform: scale(0.98); +} + +.theme-toggle-icon { + font-size: 1rem; + line-height: 1; } diff --git a/src/app.html b/src/app.html index d4abad3..816135e 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,18 @@ + %sveltekit.head% diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte new file mode 100644 index 0000000..9d5a02a --- /dev/null +++ b/src/lib/components/ThemeToggle.svelte @@ -0,0 +1,92 @@ + + + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1535e22..7363644 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,21 +1,30 @@ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9ed6428..dc424c2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -8,6 +8,7 @@ import { nip19 } from 'nostr-tools'; import { getPublicKeyWithNIP07, isNIP07Available } from '../lib/services/nostr/nip07-signer.js'; import { ForkCountService } from '../lib/services/nostr/fork-count-service.js'; + import ThemeToggle from '../lib/components/ThemeToggle.svelte'; let repos = $state([]); let loading = $state(true); @@ -261,6 +262,7 @@ Sign Up NIP-34 Docs
+ {#if userPubkey}