diff --git a/src/components/actor-app.tsx b/src/components/actor-app.tsx index b649b6a..fe7ddc1 100644 --- a/src/components/actor-app.tsx +++ b/src/components/actor-app.tsx @@ -228,17 +228,34 @@ function Home() { how it works

- Enter an Atmosphere handle. Haunt discovers its true name - (DID), then assembles its traces from across the - Atmosphere. + Enter an Atmosphere handle. Haunt discovers its true name (DID), + then assembles its traces from across the Compendium.

- A demon's true name does not change. The pages in this compendium are - generated deterministically from it. Every presence has a unique - color, order, and sigil. + A demon's true name does not change. The pages in this compendium + are generated deterministically from it. Every presence has a + unique color, geometry, order, and sigil.

+ + ); diff --git a/src/styles/globals.css b/src/styles/globals.css index 750bdd0..0b0a897 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -279,8 +279,9 @@ body { .home-how-it-works-copy { display: grid; + font-size: 0.8125rem; gap: 0.875rem; - line-height: 1.55; + line-height: 1.6; margin-top: 1.25rem; text-align: left; } @@ -303,6 +304,31 @@ body { font-weight: 650; } +.home-footer { + align-items: center; + color: color-mix(in srgb, currentColor 42%, transparent); + display: flex; + font-size: 0.75rem; + gap: 0.625rem; + justify-content: center; + margin-top: 2.5rem; +} + +.home-footer a { + text-decoration: underline; + text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); + text-underline-offset: 0.2em; +} + +.home-footer a:hover { + color: var(--home-text); +} + +.home-footer a:focus-visible { + outline: 2px solid var(--home-highlight); + outline-offset: 3px; +} + @media (max-width: 24rem) { .home-sigil { height: 5.25rem;