feat: Style refine. Add progress indicator and BackToTop button. #57
Conversation
This file contains 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
…tyled-components.
- Add overlay when mobile menu is open. - Use tailwind css for styling.
- Combine style from css into styled-components. - Improved dark mode style. - Add more animations. - Add read more button. - Fix responsible issue. - Remove unused css file and classes.
- Button will only show if user scrolls down. - Button will scroll to top of page when clicked. - Button will fade in and out when user scrolls up and down. - Button will bump when get to the very bottom of the page.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
ZL-Asica
force-pushed
the
style/refine-style
branch
from
9268517
to
387af09
Compare
ZL-Asica
force-pushed
the
style/refine-style
branch
from
c25165b
to
5b1892e
Compare
- Update workflow to auto label PR size
ZL-Asica
force-pushed
the
style/refine-style
branch
from
5b1892e
to
a79f260
Compare
This was
linked to
issues
Nov 12, 2024
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR refines accessibility, styling, and functionality across several components, implementing Tailwind CSS, adding a Back to Top button, and optimizing layout responsiveness. It also includes social media enhancements in the footer, an animated progress indicator, and improved dark mode support.
Key Changes
Accessibility Enhancements (
Header.tsx,SearchInput.tsx):aria-hiddenfor mobile menu to ensure screen reader compatibility.aria-labelto search-related select components to improve accessibility.Styling Refactor and Optimization (
Footer.tsx,Header.tsx,PostListLayout.tsx):PostListLayout.footer.css,header.css, andpostListLayout.css.Footer Social Media Expansion (
Footer.tsx,config.yml):UI Enhancements:
Header.tsx): Added a scroll progress indicator at the top, providing users with a quick visual of their position on the page.BackToTop.tsx): back to top button for both home and sigle post page. #16Post List Layout Improvements (
PostListLayout.tsx):Minor Fixes:
READMEto show the newest file structure.pr-sizewrokflow.Summary
These changes enhance user experience by improving accessibility, responsiveness, and visual clarity across the application, while streamlining and unifying styling practices.