Design consolidation: shared card, reusable components, fewer inline styles - #7
Merged
Conversation
About and Contact rendered a byte-identical icon+label+action link card
with ~100 lines of duplicated CSS each. Replace both with a single
IconLinkCard.astro, and add global .card / .card--interactive utilities
(surface + hover-lift) so the recipe lives in one place. Verified both
pages render identically in light and dark.
Also point the homepage's middle CTA at /write ('Write an article')
instead of the redundant style-guide anchor.
contributor-card (authors), tool-card (playground), community-channel (community) all repeated the same surface + hover-lift recipe. Point them at the shared .card/.card--interactive classes and keep only their distinct layout rules (grid/flex, padding, radius, accent bar). One hover recipe now drives every card. Also correct the stale MIT/CC license line in the About copy.
Replace the 3 hand-styled hero stat blocks on the homepage with a reusable <Stat value label /> component.
The Contribute page carried the most inline styles on the site. Extract a reusable <Step n title body /> for the numbered process steps, and move the section heading + CTA-row inline styles into scoped classes.
Deploying mlsystems with
|
| Latest commit: |
77f8502
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://305dda52.mlsystems.pages.dev |
| Branch Preview URL: | https://feature-card-consolidation.mlsystems.pages.dev |
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
1 participant
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.
Design-system consolidation: one shared card, reusable components, fewer hardcoded inline styles. Build + type-check pass; About/Contact/authors/playground/community and the homepage were spot-checked in the browser (light + dark).
Shared card
.card(surface) +.card--interactive(hover-lift) — the recipe lives in ONE place now.IconLinkCard.astro— About and Contact each had a byte-identical icon+label+action card (~100 lines of duplicated CSS each); both now use the one component.contributor-card(authors),tool-card(playground),community-channel(community) all repeated the same border + hover recipe → they now point at.card/.card--interactiveand keep only their distinct layout. Change the hover once, every card updates.Reusable components (inline → imported)
Stat.astro— the 3 hand-styled hero counters on the homepage.Step.astro— the numbered process steps on Contribute (the most inline-heavy page); its heading + CTA row moved to scoped classes too.Also
topics/[id]masthead standardized to the single-column.page-head(it was using the blog's 2-column header with an empty second column).Deliberately NOT done — chips
The "pill" chips (
.article-topic,.filter-chip,.blog-row-chip,.topic-tab,.tool-card-tag) only look similar — they differ in padding, font, border, interactivity, and state colors. Forcing them into one class would mostly change their appearance rather than remove real duplication, so I left them as-is.Remaining inline-style candidates (for a later pass)
blog/[slug].astrobyline — several inline-styled spans; bespoke to that page, lower reuse value.Nothing here changes behavior — it's structure + reuse. Best reviewed on the Cloudflare preview (hover a card on /about, /authors, /playground, /community; check the homepage stats and /contribute steps).