Skip to content

improve mobile UI and add professional styling#6

Draft
lockys wants to merge 14 commits intomainfrom
claude/improve-mobile-ui-e7LCw
Draft

improve mobile UI and add professional styling#6
lockys wants to merge 14 commits intomainfrom
claude/improve-mobile-ui-e7LCw

Conversation

@lockys
Copy link
Owner

@lockys lockys commented Jan 28, 2026

  • Add global mobile-first styles with better typography and touch targets
  • Redesign header with proper flex layout and sticky positioning
  • Create slide-out mobile menu with smooth animations and overlay
  • Enhance search input with modern styling, shadows, and rounded corners
  • Improve README viewer with sticky header and better mobile layout
  • Update category lists with card-based design and hover effects
  • Redesign homepage with hero section and professional author cards
  • Add dark mode support across all components
  • Improve accessibility with ARIA labels and focus states

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu

- Add global mobile-first styles with better typography and touch targets
- Redesign header with proper flex layout and sticky positioning
- Create slide-out mobile menu with smooth animations and overlay
- Enhance search input with modern styling, shadows, and rounded corners
- Improve README viewer with sticky header and better mobile layout
- Update category lists with card-based design and hover effects
- Redesign homepage with hero section and professional author cards
- Add dark mode support across all components
- Improve accessibility with ARIA labels and focus states

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Add PR preview workflow that deploys each PR to a unique URL
- Add production deployment workflow for main branch
- Auto-comment on PRs with preview URL
- Cleanup preview on PR close

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
@github-actions
Copy link

github-actions bot commented Jan 28, 2026

Preview Deployment

Your PR has been deployed for preview!

Preview URL: https://awesomelists.top/pr-preview/pr-6

This preview will be updated on each push to this PR.

The PUBLIC_URL env var was being overridden by the homepage field.
Now we dynamically update package.json before building to set the
correct base path for assets.

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
The gh-pages branch has a CNAME file pointing to awesomelists.top,
so previews are served from there, not from github.io.

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
@lockys lockys marked this pull request as draft January 28, 2026 15:46
- Fix header background color for light/dark themes
- Fix search input wrapper width and alignment
- Remove global touch target CSS that was causing layout issues
- Improve header padding and spacing on mobile
- Fix flex container min-width to prevent overflow

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Update color palette to use indigo/slate theme (more professional)
- Add CSS custom properties for consistent colors
- Make list items display in 2-column grid on mobile
- Remove underlines from links (override Hack CSS defaults)
- Improve search input styling with rounded corners
- Update header buttons with background colors
- Enhance mobile menu with blur backdrop effect
- Update homepage hero and sections with new colors
- Add proper dark mode support for all components
- Hide GitHub corner on small mobile screens

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Remove header padding/margin to screen border (edge-to-edge)
- Make list 4 columns on desktop, 2 columns on mobile
- Remove background from header buttons (cleaner look)
- Fix go-to-top button with indigo color and proper shadow
- Update TOC and category colors to match new palette
- Fix README content link colors

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Redesign go-to-top button: pill shape with border, minimal style
- Make search dropdown full viewport width on mobile
- Fixed position dropdown overlays content properly
- Better dark mode styling for go-to-top button

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Add margin-top to header (16px padding top)
- Adjust search dropdown position to align with header bottom
- Remove side borders on search dropdown for cleaner full-width look
- Add top border to search dropdown for visual separation

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Make header edge-to-edge on mobile with 12px padding
- Adjust search dropdown position to 64px from top
- Add proper padding to content areas on mobile
- Fix ReadmeInfo edge-to-edge margins

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
Adjusted search dropdown top position from 64px to 58px to
remove the visible gap between header and search results.

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Adjust search dropdown top position to align with header height
- Update menu item hover colors from pink to indigo for consistency
- Add backdrop blur effect for better visual polish
- Fix header top padding for better visual balance

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
- Fix search input dark mode: use darker background (#0f172a), add placeholder color
- Fix search results dark mode: consistent slate palette, better shadow
- Fix AwesomeReadme dark mode: update all colors to slate palette
- Add dark mode support for TOC button, close button, repo stats
- Limit search input width to 400px on desktop

https://claude.ai/code/session_018rxTKfqUhLfNnxV4VwLvxu
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