fix(home): animate the why/flow diagram wire vertically on mobile - #50
Merged
Merged
Conversation
The mobile rule in diagram.css sets animation-name: lbDashY on a bare .diag__line. FlowBand's own .flow__card[data-switch-active='in'] .diag__line outranks it and had already claimed animation-name: lbDashXR for the right-to-left desktop direction, so in the 'in' state the wire stacked vertically while its dashes still travelled along X. On a 2px-wide line that reads as a wire that has stopped. Restating the axis next to the background-image the same rule already overrides puts the fix at the specificity it has to win at. WhySection never set animation-name, so it inherited the vertical one correctly and is unchanged. Measured at 390px: all four card states now compute lbDashY and background-position advances on Y. At 1280px the lines are still horizontal, lbDashX and lbDashXR as before.
Member
|
Thanks, the stacking fix is right, and I pushed one commit on top of it. |
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
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
Also adds .gitattributes to enforce LF line endings across the repo (Windows checkouts were CRLF, which made \prettier --check\ fail in the commit hook).