Skip to content

fix(home): animate the why/flow diagram wire vertically on mobile - #50

Open
silv4b wants to merge 2 commits into
libredb:mainfrom
silv4b:fix/mobile-diagram-wire
Open

fix(home): animate the why/flow diagram wire vertically on mobile#50
silv4b wants to merge 2 commits into
libredb:mainfrom
silv4b:fix/mobile-diagram-wire

Conversation

@silv4b

@silv4b silv4b commented Sep 10, 2026

Copy link
Copy Markdown

Summary

At widths <=560px the diagram nodes stack vertically, but the connecting diag__wire/diag__line kept animating horizontally. This makes the dashed wire run vertically to match the stacked layout.

Changes

  • src/styles/diagram.css — in the existing max-width: 560px block, restyle .diag__line as a vertical dashed line (lbDashY animation, 180deg gradient).
  • src/components/home/WhySection.astro — success (green) gradient override for .why__card[data-switch-active='3'] .diag__line on mobile.
  • src/components/home/FlowBand.astro — same green override for .flow__card[data-switch-active='in'] .diag__line on mobile.

Also adds .gitattributes to enforce LF line endings across the repo (Windows checkouts were CRLF, which made \prettier --check\ fail in the commit hook).

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.

1 participant