swarm ui: the start page ends with the slug, its gradients animated
hyperhive / we are the wired between two shaded gradients that pulse in a wave, still under reduced motion. It sits under 2em from the bottom edge, clear of the setup assistant.
This commit is contained in:
parent
abf21683b9
commit
0e840bd34b
2 changed files with 94 additions and 11 deletions
|
|
@ -21,3 +21,11 @@
|
|||
0 0 0.4em color-mix(in srgb, var(--purple) 55%, transparent),
|
||||
0 0 1.2em var(--bg);
|
||||
}
|
||||
/* The slug sits at the foot of the page, over the rain. It stays under 2em
|
||||
* from the bottom edge, where the setup assistant starts (bottom-right,
|
||||
* `SetupAssistant.css`), so the two never overlap, however narrow the window. */
|
||||
.start-page .ui-slug {
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
margin: 0 0 0.4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
// <StartPage> — `/`, the swarm's landing page: the swarm's name over the
|
||||
// digital-rain backdrop, plus the setup assistant while the swarm has no
|
||||
// `ruth`. The header's swarm name links here. The hive roster is a card on the agents page.
|
||||
// `ruth`, and the slug at the foot. The header's swarm name links here. The hive roster is a card on the agents page.
|
||||
import { MatrixRain } from "../shell/MatrixRain.js";
|
||||
import { Slug } from "../ui/slug/Slug.js";
|
||||
import { useSwarmName } from "../shell/useSwarmName.js";
|
||||
import { SetupAssistant } from "./SetupAssistant.js";
|
||||
import "./StartPage.css";
|
||||
|
|
@ -17,6 +18,7 @@ export function StartPage() {
|
|||
<MatrixRain />
|
||||
<h1 class="start-page-name">{name}</h1>
|
||||
<SetupAssistant />
|
||||
<Slug />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue