Make the hero caption human readable and align the feature cards

The caption named an API call, which meant nothing to a first-time reader;
it now describes what the picture actually shows, in prose rather than
monospace.

The cards were offset because CardGrid was using the stagger prop, which
deliberately drops alternate columns down the page. Removed, so the four
cards sit in an even grid.
This commit is contained in:
Ryan Malloy 2026-08-18 12:34:01 -06:00
parent 2becca7704
commit 3e0ec930ef
2 changed files with 7 additions and 5 deletions

View File

@ -21,7 +21,8 @@ hero:
decoding="async"
/>
<figcaption class="vm-frame__caption">
vm_screenshot(name="kolibri") &rarr; PNG
A live capture of the guest's screen, taken while KolibriOS was
playing a game of Tetris.
</figcaption>
</figure>
actions:
@ -37,7 +38,7 @@ hero:
import { Card, CardGrid } from '@astrojs/starlight/components';
<CardGrid stagger>
<CardGrid>
<Card title="Disposable sandboxes" icon="rocket">
One call gives you a copy-on-write clone of a base image, booted, with the
guest agent answering. One more call destroys it. The base image is never

View File

@ -97,12 +97,13 @@
}
.vm-frame__caption {
padding: 0.5rem 0.75rem;
padding: 0.55rem 0.8rem;
background: var(--sl-color-gray-6);
border-top: 1px solid var(--sl-color-gray-5);
color: var(--sl-color-gray-3);
font-family: var(--sl-font-mono);
font-size: 0.75rem;
font-size: 0.8rem;
line-height: 1.45;
text-wrap: pretty;
}
/* Starlight's staggered CardGrid rotates card icon backgrounds through a