Hero marki
Tło strony głównej Skribly: deseń marki, niebo, które podąża za motywem, i agenci w ruchu z przyciskiem Zatrzymaj ruch. Każda część to komponent zestawu dla Astro, każde słowo to prop.
Hero markiLink do sekcji Hero marki
ProductHero variant="brand" przyjmuje HeroBackdrop w slocie backdrop i HeroAgents jako media: za panelem Agenci przewija się strona kodu, a każdy agent przechodzi od pracy przez czekanie do końca.
Od zadania w trackerze do sprawdzonego commita
Agenci pracują obok siebie, każdy w swoim worktree. Ty decydujesz, co trafi do wydania.
---
import HeroAgents from '@skribly/ui/astro/HeroAgents.astro'
import HeroBackdrop from '@skribly/ui/astro/HeroBackdrop.astro'
import ProductHero from '@skribly/ui/astro/ProductHero.astro'
---
<ProductHero product="skribly" variant="brand" title="…" summary="…">
<a slot="actions" class="sk-button sk-button--lg" href="/apps/">…</a>
<HeroBackdrop slot="backdrop" code={false} />
<HeroAgents
slot="media"
panel={{ title: 'Agents', agents: ['Claude Code', 'Codex', 'Gemini CLI'], states: ['working', 'waiting', 'done'] }}
motion={{ pause: 'Pause motion', play: 'Play motion' }}
/>
</ProductHero>NieboLink do sekcji Niebo
HeroSky pokazuje słońce w motywie dziennym, a księżyc z kilkoma gwiazdami w nocnym, i od razu podąża za przełącznikiem motywu, także za motywem systemu. W motywie wysokiego kontrastu i w wymuszonych kolorach rysuje same kontury.
- Motyw dzienny
- Motyw nocny
- Motyw wysokiego kontrastu
Agenci w ruchuLink do sekcji Agenci w ruchu
Ruch działa tylko z JavaScriptem i gdy ruch jest dozwolony. Nieruchoma klatka pokazuje już wszystkie trzy stany. Przycisk Zatrzymaj ruch zatrzymuje każdy ruchomy element strony, a każda strona Skribly pamięta ten wybór.
Agenci w paskuLink do sekcji Agenci w pasku
Hero, którego media to coś innego, na przykład wyszukiwarka dokumentacji albo wzornik tej strony, umieszcza HeroAgents layout="strip" na końcu akcji, a HeroBackdrop przewija wąską stronę kodu na marginesie.
<Fragment slot="actions">
<a class="sk-button sk-button--lg" href="/start/">…</a>
<HeroAgents layout="strip" panel={…} motion={…} />
</Fragment>
<HeroBackdrop slot="backdrop" />Sekcje na deseniuLink do sekcji Sekcje na deseniu
Band to sekcja na tle: zwykłym albo wklęsłym, z deseniem marki w kolorze produktu i linią w tym kolorze u góry. Strona główna przeplata zwykłe sekcje z sekcjami na deseniu. Produkt to klasa, nigdy styl w atrybucie.
Tablica w kropki
Tekst na deseniu ma kontrast co najmniej 4,5:1 w każdym motywie.
Tablica w kratkę
Tekst na deseniu ma kontrast co najmniej 4,5:1 w każdym motywie.
---
import Band from '@skribly/ui/astro/Band.astro'
---
<Band pattern="dots" product="docs" labelledby="tools-title">
<h2 id="tools-title">…</h2>
<p>…</p>
</Band>Link w roguLink do sekcji Link w rogu
CornerLink unosi się w prawym dolnym rogu każdej strony nad przyciskiem powrotu na górę, z jednym odstępem zestawu między nimi. Jego mały przycisk ukrywa go do końca wizyty. W kolejności klawisza Tab jest po stopce, ma widoczny fokus i nie trafia do druku; strona pomija go na stronie, do której prowadzi. Poniżej stoi w miejscu, jako przykład.
<PageLayout …>
…
<CornerLink slot="corner" href="/download/" label="Download Agent" description="the download page of Skribly Agent" dismiss="Hide for this visit" />
</PageLayout>ZasadyLink do sekcji Zasady
- Dekoracja jest ukryta przed technologiami wspomagającymi i nigdy nie przechwytuje kliknięcia.
- Nic nie jest obrazem, na który strona czeka: niebo i strona kodu to SVG w kodzie, desenie to CSS.
- Ruch dłuższy niż pięć sekund ma przycisk Zatrzymaj ruch z widocznym fokusem.
- Przy ograniczonym ruchu, bez JavaScriptu albo po zatrzymaniu strona pokazuje nieruchomą klatkę.
- W motywie wysokiego kontrastu, w wymuszonych kolorach i w druku desenie i strona kodu znikają.