refactor(writings): redesign home writings section and article card#121
Merged
Conversation
- Simplify home page to focus on hero + recent writing sections - Fix BlurrableImage so blur overlay sits on top and crossfades out on load - Fix footer mobile layout: remove bottom-18 hack, use pb-24 on LayoutRoot - Update ArticleCard: use Text/overline for metadata with correct block display - Refactor Header to use H2 + ButtonLink with ghost variant for CTA - Consolidate Spacer sizes to sm/md/lg scale
…mation - Add ClipboardCopyButton overlay on article card image (top-left) - Implement blur crossfade between copy/check icons on state transition - Add active:scale-[0.97] press feedback on the button - Fix Button className ordering so base styles apply after variant/size - Swap Link for AnchorOrLink and update imports to use @/ alias
- Scale image to 1.05 on card hover using group-hover - Add overflow-hidden to BlurrableImage container to clip scaled image - Use will-change-transform for GPU acceleration - Wrap all animation classes in motion-safe: for reduced motion support
|
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.
Summary
BlurrableImageso blur overlay sits on top and crossfades out when the real image loadsbottom-18visual hack, usepb-24onLayoutRootto properly clear the floating navbarClipboardCopyButtonon article card with blur crossfade animation between copy/check iconsgroup-hover:scale-105) withoverflow-hiddenclipping andmotion-safe:reduced motion supportSpacersizes tosm/md/lgscaleHeaderto useH2 + ButtonLinkwith ghost variant for CTATest plan
prefers-reduced-motion: reduceis set