Skip to content

Documentation navigation cards pop when hovered - #46

Open
JackTench wants to merge 1 commit into
LibreSplit:mainfrom
JackTench:pop
Open

Documentation navigation cards pop when hovered#46
JackTench wants to merge 1 commit into
LibreSplit:mainfrom
JackTench:pop

Conversation

@JackTench

Copy link
Copy Markdown
Member

No description provided.

@StarlitLuna StarlitLuna left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really small thing on the visual

Comment thread src/app/docs.tsx
{(doc) => (
<a href={doc.to}>
<Card class="h-full transition hover:border-primary hover:shadow-lg">
<Card class="h-full transition-[transform,border-color,box-shadow] duration-300 ease-out hover:-translate-y-1 hover:scale-[1.01] hover:border-primary/40 hover:shadow-lg">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The pop effect is a bit sharp, i.e. it pops almost instantly and looks a bit off. These are the classes I used in the install page's distro cards:

transition-[border-color,box-shadow,translate,background-color] duration-200 hover:-translate-y-1 hover:border-primary/40 hover:bg-accent/30 hover:shadow-lg

Main thing is using translate in the transition instead of transform

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants