diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx index be2f372..b4b7670 100644 --- a/src/components/actor-app.tsx +++ b/src/components/actor-app.tsx @@ -121,6 +121,8 @@ export function ActorApp() { } as CSSProperties } > + + {profile ? ( ) { event.preventDefault(); @@ -182,19 +183,16 @@ function Home() { return (
-
-

haunt.at // an atmosphere compendium

- +
-
- -

{readingLabel}

-
-

Haunt compendium

+
+ +
+
+ haunt.at + + ); +} + function useSearchPanel() { const searchAreaRef = useRef(null); const [isOpen, setIsOpen] = useState(false); @@ -261,21 +267,6 @@ function useSearchPanel() { return { isOpen, openPanel: () => setIsOpen(true), searchAreaRef }; } -function getSigilReadingLabel( - query: string, - actors: BlueskyActorSearchResult[], -): string { - const identifier = query.trim().replace(/^@/, ""); - const normalizedIdentifier = identifier.toLowerCase(); - const matchingActor = actors.find( - (actor) => - actor.handle.toLowerCase() === normalizedIdentifier || - actor.did.toLowerCase() === normalizedIdentifier, - ); - - return matchingActor ? `reading: ${matchingActor.handle}` : "unresolved"; -} - type HauntSigilProps = { seed: string; }; diff --git a/src/styles/globals.css b/src/styles/globals.css index 5035c84..89a8534 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -25,6 +25,25 @@ body { background-size: 108% 108%; } +.profile-home-link, +.state-masthead { + color: color-mix(in srgb, currentColor 50%, transparent); + font-size: 0.75rem; + letter-spacing: 0.12em; + margin-bottom: 1.5rem; + text-transform: uppercase; +} + +.profile-home-link:hover, +.profile-home-link:focus-visible { + color: var(--profile-accent); +} + +.profile-home-link:focus-visible { + outline: 2px solid var(--profile-accent); + outline-offset: 3px; +} + .home-page, .state-page { background-color: var(--home-background); @@ -34,19 +53,10 @@ body { color: var(--home-text); } -.home-content, .state-content { padding-top: clamp(1.5rem, 4vw, 3rem); } -.home-index-label, -.state-masthead { - color: color-mix(in srgb, currentColor 50%, transparent); - font-size: 0.75rem; - letter-spacing: 0.12em; - text-transform: uppercase; -} - .state-masthead:focus-visible, .state-action:focus-visible { outline: 2px solid var(--home-highlight); @@ -71,21 +81,12 @@ body { width: var(--home-sigil-size); } -.home-invocation-sigil p, .state-label { color: color-mix(in srgb, currentColor 48%, transparent); font-size: 0.6875rem; letter-spacing: 0.08em; - text-transform: uppercase; -} - -.state-label { margin-top: 0.875rem; -} - -.home-invocation-sigil p { - line-height: 1.3; - white-space: nowrap; + text-transform: uppercase; } .state-reading h1 { @@ -126,7 +127,7 @@ body { .home-invocation-sigil { display: grid; - gap: 0.35rem; + gap: 0.5rem; justify-items: center; } @@ -406,6 +407,7 @@ body { } } + @keyframes atmosphere-drift { to { background-position: 100% 100%;