redesign: align Spawn with ctrl-alt-gg.hu homepage design language - #19
Merged
Conversation
- Add body radial glow (brand-800, 16 %) that dissolves from the header into the surface, ending the jarring hard edge between the dark header and the plain white body - Elevate .link buttons to card style: box-shadow-card at rest, box-shadow-panel + translateY(-2px) + brightness(0.95) on hover — mirrors the homepage's game-card hover treatment - Revamp index.html layout: max-w-sm centred container, gap-based spacing, brand-red gradient underline below the headline (same pattern as prose-cag h2::after on the homepage), flex row icon + text inside each link, rounded-card corner radius - Add dark-mode gradient overrides (dark:from-[#130404] dark:to-[#1e0606]) to header and footer, matching the homepage - Increase footer top margin from mt-8 to mt-12 (homepage parity)"
Replace magic-number hex literals duplicated across header.html and footer.html with named CSS custom properties --color-brand-dark-from and --color-brand-dark-to, and use the generated dark:from-brand-dark-from / dark:to-brand-dark-to utilities in the templates."
- Move --radius-{pill,card,panel} and --shadow-{card,panel} from :root
into @theme so Tailwind generates rounded-card, rounded-panel,
shadow-card, shadow-panel as proper utility classes
- Update layouts/index.html to access params via $page consistently
per the template conventions (removes the unused-variable lint warning)"
Copilot
AI
changed the title
redesign: align Spawn visual design with ctrl-alt-gg.hu homepage
redesign: align Spawn with ctrl-alt-gg.hu homepage design language
Jun 14, 2026
Copilot created this pull request from a session on behalf of
tormachris
June 14, 2026 10:43
View session
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-cliff-0be80a303-19.westeurope.4.azurestaticapps.net |
tormachris
marked this pull request as ready for review
June 14, 2026 10:46
There was a problem hiding this comment.
Pull request overview
Aligns the Spawn link-collection page with the ctrl-alt-gg.hu homepage’s elevated, card-based design language by introducing shared design tokens, subtle background treatment, and updated link-list layout.
Changes:
- Introduces shared
@themetokens (radius/shadow utilities and dark-mode brand gradient stops) and applies a subtle brand “glow” background onbody. - Redesigns the homepage link list layout and typography for a centered, card-like presentation with icon+label rows.
- Updates header/footer gradients to use the new dark-mode gradient stop tokens and adjusts footer spacing.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
assets/css/main.css |
Promotes radius/shadow tokens into @theme, adds body glow, and updates .link styling to elevated card behavior. |
layouts/index.html |
Reworks hero/header spacing and link list markup to a centered, card-style layout with icons. |
layouts/partials/header.html |
Switches dark-mode gradient stops to new @theme tokens. |
layouts/partials/footer.html |
Switches dark-mode gradient stops to new @theme tokens and increases top margin. |
Comment on lines
+211
to
215
| .link:hover { | ||
| transform: translateY(-2px); | ||
| filter: brightness(0.95); | ||
| box-shadow: var(--shadow-panel); | ||
| } |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://green-cliff-0be80a303-19.westeurope.4.azurestaticapps.net |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Spawn page was visually thin — a plain gray body sandwiched between two identical brand-red bars. This brings it in line with the homepage's card-based, elevated design system.
CSS (
assets/css/main.css)radial-gradientfrombrand-800(16%) at the top, bleeding into the surface so the header transitions naturally rather than hard-cutting to whiteshadow-cardat rest →shadow-panel + translateY(-2px) + brightness(0.95)on hover, matching the homepage game-card treatment@theme—--radius-{pill,card,panel}and--shadow-{card,panel}were in:rootonly; moving them to@themegenerates actual Tailwind utilities (rounded-card,shadow-card, etc.)@themetokens (--color-brand-dark-from/to) shared by header and footerTemplates
layouts/index.html—max-w-smcentred container;gap-3spacing; brand-red gradient underline under the headline (mirrorsprose-cag h2::after); flex icon+label rows withrounded-card;$pageused consistentlylayouts/partials/header.html— dark-mode gradient via new@themetokenslayouts/partials/footer.html— same dark-mode tokens;mt-8 → mt-12(homepage parity)