shared topbar
Play pages start with the shared DS topbar, then swap into the pixel-art palette.
base layout
Play BaseLayout is the outer shell for the play app. It composes PlaySiteTopbar, MaintenanceGate, body-level presentation hooks, and the portal's background treatment into one app frame.
| field | value |
|---|---|
| group | play |
| import | apps/play/src/layouts/BaseLayout.astro |
| source | apps/play/src/layouts/BaseLayout.astro apps/play/src/styles/global.css |
play / base layout
maintenance gate
The layout wraps page content in MaintenanceGate so the app can pause gracefully.
component tokens
| token | source | description |
|---|---|---|
--bg / --bg-panel / --line | @arieare/ds-play/tokens.css | Defines the play portal background, panel surface, and divider line color. |
--accent / --accent-2 | @arieare/ds-play/tokens.css | Primary and secondary arcade accent colors. |
--font-pixel / --px-* | @arieare/ds-play/tokens.css | Bitmap font and pixel-art palette tokens used by play surfaces. |
--topbar-h / --topbar-text-size | @arieare/ds/tokens.css | Controls topbar height and shared navigation type size. |
--topbar-bg / --topbar-bg-blur / --topbar-line | @arieare/ds/tokens.css | Defines topbar surface treatment in standard and backdrop-filter paths. |
--topbar-link-ink / --topbar-link-ink-hover / --topbar-link-ink-active | @arieare/ds/tokens.css | Styles idle, hover, and current-page link states. |
--aa-ui-maintenance-bg / --aa-ui-maintenance-ink | @arieare/ds/components/maintenance/maintenance-panel.css | Sets the maintenance page background and default copy color. |
--aa-ui-maintenance-card-bg / --aa-ui-maintenance-card-border | @arieare/ds/components/maintenance/maintenance-panel.css | Controls the floating card surface and border styling. |
--aa-ui-maintenance-kicker-ink / --aa-ui-maintenance-title-ink / --aa-ui-maintenance-link-ink | @arieare/ds/components/maintenance/maintenance-panel.css | Lets apps retint the kicker, title, and return-link accents. |
props
| prop | type | default | description |
|---|---|---|---|
title | string | — | Document title for the play page. |
description | string | "play.arieare.co - Godot web builds, game pages, and devlogs" | Meta description for the page. |
bodyClass / bodyStyle | string | — | Optional body-level class and inline style hooks. |