diff --git a/src/lib/components/ShareButtons.svelte b/src/lib/components/ShareButtons.svelte index b022a93..75b0be0 100644 --- a/src/lib/components/ShareButtons.svelte +++ b/src/lib/components/ShareButtons.svelte @@ -4,14 +4,17 @@ * Bluesky intent link, clipboard copy, structured email template. * Bluesky is the primary channel; email covers the rest. */ - import { Link2, Mail } from '@lucide/svelte'; + import { Check, Link2, Mail } from '@lucide/svelte'; import Bluesky from '$lib/components/icons/Bluesky.svelte'; let { url, title } = $props<{ url: string, title: string }>(); - function copyToClipboard() { - navigator.clipboard.writeText(url); - alert('Link copied to clipboard!'); + let copied = $state(false); + + async function copyToClipboard() { + await navigator.clipboard.writeText(url); + copied = true; + setTimeout(() => (copied = false), 2000); } // Construct structured email template @@ -33,8 +36,18 @@ Sent from my website.`); Bluesky - Email diff --git a/src/lib/styles/components.css b/src/lib/styles/components.css index 37e2918..8ef3c0c 100644 --- a/src/lib/styles/components.css +++ b/src/lib/styles/components.css @@ -96,7 +96,7 @@ box-shadow: inset 0 -2px var(--color-primary-500); } - @media (max-width: 560px) { + @media (max-width: 800px) { .nav { padding: 0 var(--space-md); } @@ -165,7 +165,7 @@ .footer-icon-link { display: flex; color: var(--color-text-600); - opacity: 0.4; + opacity: 0.65; transition: color var(--duration-fast) var(--ease-out-quart), opacity var(--duration-fast) var(--ease-out-quart); @@ -197,6 +197,11 @@ .footer-section { justify-content: center; } + + .footer-right { + flex-wrap: wrap; + gap: var(--space-xs) var(--space-sm); + } } /* ── Table of Contents ───────────────────────────────────────── */ @@ -326,28 +331,47 @@ .share-bar { display: flex; - gap: var(--space-md); + flex-wrap: wrap; + gap: var(--space-xs); margin-top: var(--space-md); } - .share-link { + .share-link, + .share-btn { color: var(--color-text-700); - display: flex; + display: inline-flex; align-items: center; - gap: 4px; + justify-content: center; + gap: var(--space-xs); text-decoration: none; font-size: var(--text-sm); + line-height: 1; + min-height: 36px; + padding: var(--space-sm) var(--space-3); + border: 1px solid var(--surface-color); + border-radius: var(--radius-sm); + background: var(--surface-raised); + transition: + color var(--duration-fast) var(--ease-out-quart), + border-color var(--duration-fast) var(--ease-out-quart), + background-color var(--duration-fast) var(--ease-out-quart); } .share-btn { - background: none; - border: none; cursor: pointer; - color: var(--color-text-700); - display: flex; - align-items: center; - gap: 4px; - font-size: var(--text-sm); + font-weight: 500; + } + + .share-link:hover, + .share-btn:hover { + color: var(--color-primary-700); + border-color: var(--color-primary-500); + background: var(--color-background-50); + } + + .share-btn--copied { + color: var(--color-primary-700); + border-color: var(--color-primary-500); } /* ── Now card ────────────────────────────────────────────────── */ diff --git a/src/lib/styles/pages.css b/src/lib/styles/pages.css index abeb818..ff29830 100644 --- a/src/lib/styles/pages.css +++ b/src/lib/styles/pages.css @@ -77,6 +77,8 @@ border-radius: var(--radius-sm); background: var(--surface-raised); font-size: var(--text-sm); + max-width: 100%; + min-width: 0; } .status-emoji { @@ -92,6 +94,13 @@ padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs); } + .status-chip--music .status-text { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .now-playing-art { width: 24px; height: 24px; @@ -212,6 +221,10 @@ width: 48px; height: 48px; } + + .project-grid { + grid-template-columns: 1fr; + } } /* ── About page ─────────────────────────────────────────────── */ @@ -442,6 +455,15 @@ margin: 0 0 var(--space-md); } + .post-deck { + max-width: 60ch; + margin: 0 0 var(--space-6); + color: var(--color-text-700); + font-size: var(--text-lg); + line-height: 1.45; + text-wrap: balance; + } + .post-meta { display: flex; gap: var(--space-md); @@ -450,6 +472,15 @@ color: var(--color-text-600); } + .post-meta--stacked { + flex-direction: column; + gap: var(--space-xs); + } + + .post-meta-group { + margin-top: var(--space-xs); + } + /* Two-column layout: sidebar + content */ .post-layout { display: grid; @@ -524,6 +555,34 @@ gap: var(--space-xs); } + .post-provenance { + display: flex; + flex-direction: column; + gap: var(--space-sm); + margin-top: var(--space-sm); + font-size: var(--text-xs); + } + + .post-provenance-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--space-sm) var(--space-md); + } + + .post-provenance-label { + color: var(--color-text-600); + } + + .post-provenance-link { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + min-height: 28px; + font-weight: 600; + text-decoration: none; + } + .footer-pub { margin: 0; font-weight: 600; @@ -562,9 +621,14 @@ } @media (max-width: 560px) { - .post-title { + .post-hd .post-title { font-size: clamp(1.5rem, 8vw, 2.5rem); } + + .post-deck { + font-size: var(--text-md); + text-wrap: pretty; + } } /* ── Blog rkey redirect page ────────────────────────────────── */ @@ -639,6 +703,12 @@ gap: var(--space-md); } + @media (max-width: 560px) { + .crypto-grid { + grid-template-columns: 1fr; + } + } + .crypto-card { padding: var(--space-md); border: 1px solid var(--surface-color); diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css index dc815c1..b2443c2 100644 --- a/src/lib/styles/theme.css +++ b/src/lib/styles/theme.css @@ -431,7 +431,6 @@ input:focus, textarea:focus, select:focus { - outline: none; border-color: var(--color-primary-500); background-color: var(--color-background-50); } diff --git a/src/routes/about/name/+page.svelte b/src/routes/about/name/+page.svelte index 8aeef32..75f45b5 100644 --- a/src/routes/about/name/+page.svelte +++ b/src/routes/about/name/+page.svelte @@ -23,7 +23,7 @@

{data.post.title}

{#if data.post.description} -

{data.post.description}

+

{data.post.description}

{/if}
@@ -48,15 +48,15 @@
{#if data.blog}