feat: announce shell.online and fix blog image sizing - #227
Merged
TeoSlayer merged 1 commit intoSep 2, 2026
Merged
Conversation
Replace the seed-round announcement bar with a shell.online banner, add
a launch post, and fix three pre-existing layout bugs the post surfaced.
Banner:
- Point the home announcement bar at shell.online with the product mark
(public/img/shell-online.svg, taken from the shell.online favicon).
Reuses the existing .announce-bar styles; the seed announcement stays
published at /news/pilot-raises-4-5m-seed and linked from /about.
- Bump announcement text 0.84->0.98rem (0.76->0.88rem on mobile) with the
badge and mark scaled to match.
- data-track-target renamed seed-round -> shell-online so the two
campaigns do not merge in analytics.
Post:
- src/pages/blog/shell-online-live-terminal-browser-link.astro, sourced
from shell.online, its knowledge base, and TeoSlayer/shell.online at
v0.6.2. Eight internal backlinks; category Blog.
- .brand-shell renders the product name in a new --shell-blue token,
defined per theme (7.4:1 on dark, 13.7:1 on light).
Layout fixes, all pre-existing and affecting every post:
- .blog-card img and .related-card img set width:100% and aspect-ratio
but no height, so the height="630" attribute won and aspect-ratio was
ignored. Every thumbnail rendered as a 630px-tall magnified crop; the
blog index was 72,398px instead of 18,758px. Adds height:auto.
- .blog-hero::after ("Latest") is absolutely positioned with no space
reserved, overlapping the first card's title. Adds padding-right on
desktop, where the badge sits beside the title; reset at <=720px,
where the single-column layout puts it over the image instead.
- BlogLayout rendered a bare <div /> when a post has no previous or next
sibling. With no background, the nav grid's line colour showed through
as a solid block. Adds .blog-nav-empty.
Verified: npm run check:plain, npm run build, npm run check:site.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V1q6UsG1wWg8QxGGKDQj5h
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
2 participants
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.
Replaces the seed-round announcement bar with a shell.online banner, adds a launch post, and fixes three pre-existing layout bugs the post surfaced.
Banner
The home announcement bar now points at shell.online, with the product mark added (
public/img/shell-online.svg, taken from the shell.online favicon). It reuses the existing.announce-barstyles, so there are no new layout rules. Announcement text goes 0.84 → 0.98rem (0.76 → 0.88rem on mobile) with the badge and mark scaled to match, anddata-track-targetis renamedseed-round→shell-onlineso the two campaigns don't merge in analytics.The seed announcement itself is untouched — still published at
/news/pilot-raises-4-5m-seedand still linked from/about.Post
/blog/shell-online-live-terminal-browser-link, sourced from shell.online, its knowledge base, andTeoSlayer/shell.onlineat v0.6.2. CategoryBlog, banner in the same style as the existing SVG banners, eight internal backlinks. The product name renders in a new--shell-bluetoken via.brand-shell, defined per theme (7.4:1 contrast on dark, 13.7:1 on light — both in sRGB gamut).Layout fixes
These are pre-existing and affect all 103 posts, not just the new one. Worth a separate look from the content above.
Thumbnails rendered as magnified crops.
.blog-card imgand.related-card imgsetwidth: 100%andaspect-ratio: 1200/630but noheight, so theheight="630"attribute won andaspect-ratiowas ignored. Every banner rendered 630px tall underobject-fit: cover. The blog index was 72,398px long instead of 18,758px. Fixed withheight: auto."Latest" badge overlapped the first card's title.
.blog-hero::afteris absolutely positioned with no space reserved. Addspadding-righton desktop where the badge sits beside the title, reset at ≤720px where the single-column layout puts the badge over the image instead.Empty next/previous nav cell rendered as a solid block.
BlogLayoutemits a bare<div />when a post has no previous or next sibling. With no background, the nav grid's--linebackground showed through. Adds.blog-nav-empty.Verification
src/pages/plain/index.astrocarries only a refreshedplain-source-sha256stamp — the plain twin has never included the announcement bar, so there's no content to mirror.regen-plain.mjsneedsGEMINI_API_KEY, which I don't have; this follows the same stamp-only pattern as a5974e7.Checked in both themes and at mobile width. Note that CI skips the Cloudflare preview deploy for fork PRs, so there's no preview URL on this one.
🤖 Generated with Claude Code
https://claude.ai/code/session_01V1q6UsG1wWg8QxGGKDQj5h