Refactor: Modernize design system and improve component semantics#32
Open
juthing wants to merge 4 commits into
Open
Refactor: Modernize design system and improve component semantics#32juthing wants to merge 4 commits into
juthing wants to merge 4 commits into
Conversation
… avatar decoration, logo - Fix author ID in getting-started meta.json (was "DISCORD" string, now actual Discord ID) - Remove emojis from all article markdown content (fr + en) - Nav: replace placeholder logo with Moddy brand SVG, add border-bottom separator, backdrop blur - Base layout: new compact footer (~80px) with Moddy logo, shared --page-max-width CSS token so footer aligns with content - Homepage: add hero banner section (colored card with logo + title), increase gaps/padding, larger typography - ArticleCard: raise border-radius to 24px, redesign label badge (outlined + fully rounded + better contrast), larger title/summary fonts, hover shadow - Article page: full rewrite of layout — banner uses new banner-card style, add labels row display, restructure author avatar so decoration img sits OUTSIDE overflow:hidden clip (no longer cropped) - Author page: restructure avatar HTML — avatar-outer has no overflow:hidden, avatar-circle clips only the photo, avatar-deco overlays at 125% size outside the circle border - Overall: consistent max-width, more generous padding, editorial spacing throughout https://claude.ai/code/session_016ZaubKTWBMpD8bXCnRL6va
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…labels section on article page
- Rename juthing.json → 1164597199594852395.json so getAuthor("1164597199594852395")
finds the file (lookup is by filename = id field value)
- Remove juthing.json duplicate
- Remove labels row from article page that was added without being requested
https://claude.ai/code/session_016ZaubKTWBMpD8bXCnRL6va
…, favicon, text sizes - favicon.svg: replace placeholder with real Moddy logo (0046F8 blue) - Base.astro: background #F2F2F7 (light gray), surface #FFFFFF (white cards), primary #0046F8 (vivid blue); footer border-top instead of rounded top, footer on surface white; all paddings unified to 2em - Nav.astro: background on surface white, padding 2em - index.astro: remove blue hero rectangle; restore editorial text intro (logo + title 2.75rem + description); section icon same color as title h2; grid minmax(410px, 1fr) gap 20px; padding 2em - ArticleCard.astro: white card with shadow; banner 190px only rendered when image exists (no gray empty square otherwise); body min-height 260px, padding 20px; title 1.15rem; summary 0.95rem; hover lift animation - authors/[id].astro: full header rewrite — banner 180px rounded top, avatar absolutely positioned at border (top: 130px, left: 28px, 100×100px), decoration outside overflow clip; info section padding-left compensates for avatar so text starts after it; name+role+links in clean flex row; no more negative-margin hacks https://claude.ai/code/session_016ZaubKTWBMpD8bXCnRL6va
- html font-size: 16px → 17px (base scale up) - nav logo: 1rem 600 → 1.1rem 700 (match footer) - nav slug: .875rem → 1rem - footer logo: .95rem 600 → 1.1rem 700 (same as nav logo) - footer tagline: .8rem → .95rem - card date: .8rem → .85rem - card badge: .75rem → .8rem - card title h2: 1.15rem → 1.2rem - card summary: .95rem → 1rem https://claude.ai/code/session_016ZaubKTWBMpD8bXCnRL6va
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.
Summary
This PR modernizes the design system and improves component semantics across the documentation site. The changes focus on updating class names to be more semantic and maintainable, refining typography and spacing, enhancing visual hierarchy, and improving the overall design consistency.
Key Changes
Design System & Styling
xTOiZi,v504Ku,wmvtgi) with semantic, descriptive class names (page-wrapper,content-col,prose)--page-max-widthCSS custom property for consistent content width across all pages#5B7BFAto#4A5FD5for better contrast and consistencyTypography & Hierarchy
clamp()for better responsive scalingComponent Improvements
transform: translate(-50%, -50%)for more reliable centeringPage-Specific Updates
Content Updates
Accessibility & Semantics
accentColorToHex)Notable Implementation Details
clamp()https://claude.ai/code/session_016ZaubKTWBMpD8bXCnRL6va