diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 00000000..2bd5a0a9 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +22 diff --git a/packages/docs/public/images/user-flow-mark.png b/packages/docs/public/images/user-flow-mark.png deleted file mode 100644 index d5408145..00000000 Binary files a/packages/docs/public/images/user-flow-mark.png and /dev/null differ diff --git a/packages/docs/public/images/user-flow-mark.svg b/packages/docs/public/images/user-flow-mark.svg new file mode 100644 index 00000000..024fd5db --- /dev/null +++ b/packages/docs/public/images/user-flow-mark.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/docs/src/app/app.html b/packages/docs/src/app/app.html index b2b31c46..e0a20171 100644 --- a/packages/docs/src/app/app.html +++ b/packages/docs/src/app/app.html @@ -2,13 +2,13 @@
- + user-flow
diff --git a/packages/docs/src/app/home/home.scss b/packages/docs/src/app/home/home.scss index a3b1a06f..dbeba40e 100644 --- a/packages/docs/src/app/home/home.scss +++ b/packages/docs/src/app/home/home.scss @@ -18,37 +18,30 @@ } } +// The header already shows the mark, so the hero only repeats it where +// there is a second column to fill. .hero-visual { - display: flex; - justify-content: flex-start; - order: -1; + display: none; } @media (min-width: 900px) { .hero-visual { + display: flex; justify-content: center; - order: 0; + align-self: start; } } .hero-mark { - width: 96px; - height: 96px; - padding: var(--space-4); - border-radius: var(--radius-2xl); + box-sizing: content-box; + width: 170px; + height: 170px; + padding: var(--space-8); + border-radius: var(--radius-3xl); background: var(--surface-subtle); border: 1px solid var(--border); } -@media (min-width: 900px) { - .hero-mark { - width: 240px; - height: 240px; - padding: var(--space-8); - border-radius: var(--radius-3xl); - } -} - .hero-eyebrow { margin: 0 0 var(--space-4); color: var(--link); diff --git a/packages/docs/src/styles.scss b/packages/docs/src/styles.scss index 89925645..95f0d361 100644 --- a/packages/docs/src/styles.scss +++ b/packages/docs/src/styles.scss @@ -46,6 +46,8 @@ --callout-warning-bg: var(--color-warning-50); --callout-warning-border: var(--color-warning-300); --callout-warning-title: var(--color-warning-800); + --logo-ink: var(--color-neutral-950); + --logo-paper: var(--color-surface); } @mixin dark-theme { @@ -90,6 +92,8 @@ --callout-warning-bg: var(--color-warning-950); --callout-warning-border: var(--color-warning-800); --callout-warning-title: var(--color-warning-300); + --logo-ink: var(--color-neutral-50); + --logo-paper: var(--color-neutral-800); } @media (prefers-color-scheme: dark) { @@ -571,6 +575,13 @@ pre { } /* Theme toggle: the icon is picked by CSS so server and client markup match */ +/* The user-flow mark, drawn with so its outline (stroke) and body (color) follow the theme. */ +.uf-mark { + display: block; + stroke: var(--logo-ink); + color: var(--logo-paper); +} + .theme-toggle { display: inline-flex; align-items: center;