Commit Graph

763 Commits

Author SHA1 Message Date
Gigi
6277824b32 feat(ui): add blockquote styling with Tailwind colors
- Add blockquote styles for both markdown and HTML content
- Use indigo-500 left border for visual distinction
- Use zinc-800 background for subtle emphasis
- Add proper spacing and rounded corners
- Apply zinc-300 color and italic style for readability
- Properly handle nested paragraph margins
2025-10-13 23:34:30 +02:00
Gigi
f94e4ba900 feat(ui): make article titles larger and show summaries
- Increase title font size to 2.5rem (desktop) and 2rem (mobile)
- Add font-weight: 700 and better line-height to titles
- Increase summary font size to 1.2rem with better line-height
- Fix missing summary display by passing summary prop to ReaderHeader
- Improve readability and visual hierarchy of article headers
2025-10-13 23:33:23 +02:00
Gigi
acf14ccee9 feat(ui): add 100vh height and drop-shadows to sidebars
- Set sidebars to always have 100vh height on desktop
- Add drop-shadow to left sidebar (2px right shadow)
- Add drop-shadow to right highlights panel (2px left shadow)
- Improves visual separation and depth perception
2025-10-13 23:28:00 +02:00
Gigi
f882b63359 fix(ui): remove padding gaps around sidebars
Remove md:p-4 padding from root container to eliminate gaps between screen edges and sidebars
2025-10-13 23:26:25 +02:00
Gigi
1dd2e1dc38 refactor: switch to brighter yellow-300 for highlight defaults and add semantic color aliases 2025-10-13 23:19:33 +02:00
Gigi
e667cf05c2 refactor: update default highlight color to yellow-400 in useSettings 2025-10-13 23:18:13 +02:00
Gigi
7512375728 refactor: update default highlight color to yellow-400 in ThreePaneLayout 2025-10-13 23:17:46 +02:00
Gigi
f108e2e70a refactor: replace arbitrary color values with Tailwind utilities in ThreePaneLayout 2025-10-13 23:17:21 +02:00
Gigi
daa43ec4c4 refactor: migrate global.css to Tailwind color palette 2025-10-13 23:16:51 +02:00
Gigi
ab2223e739 refactor: migrate app.css to Tailwind color palette 2025-10-13 23:16:28 +02:00
Gigi
e8cbb3af4b refactor: migrate legacy.css to Tailwind color palette 2025-10-13 23:16:06 +02:00
Gigi
f374a9af28 refactor: migrate settings.css to Tailwind color palette 2025-10-13 23:15:40 +02:00
Gigi
f2cbc66a97 refactor: migrate profile.css to Tailwind color palette 2025-10-13 23:15:21 +02:00
Gigi
1627d4f53e refactor: migrate me.css to Tailwind color palette 2025-10-13 23:14:56 +02:00
Gigi
b93a4d072a refactor: migrate reader.css to Tailwind color palette 2025-10-13 23:14:02 +02:00
Gigi
3e4bc97684 refactor: migrate toast.css to Tailwind color palette 2025-10-13 23:12:48 +02:00
Gigi
3c0c20f61c refactor: migrate modals.css to Tailwind color palette 2025-10-13 23:12:26 +02:00
Gigi
dae63e210b refactor: migrate forms.css to Tailwind color palette 2025-10-13 23:11:42 +02:00
Gigi
dc500cc296 refactor: migrate cards.css to Tailwind color palette 2025-10-13 23:11:03 +02:00
Gigi
1fc1e4f102 refactor: migrate icon-button.css to Tailwind color palette 2025-10-13 23:08:31 +02:00
Gigi
524b5e1559 refactor: migrate sidebar.css to Tailwind color palette 2025-10-13 23:07:53 +02:00
Gigi
930de76d1f refactor: migrate highlights.css to Tailwind color palette 2025-10-13 23:06:09 +02:00
Gigi
b85fc820d1 refactor: setup Tailwind color foundation with semantic aliases and updated defaults 2025-10-13 23:03:07 +02:00
Gigi
a0e65a48f1 refactor: clean up legacy.css removing unused debugging styles 2025-10-13 22:51:49 +02:00
Gigi
ccdfc54cdc style: increase spacing between highlight card header/footer and content 2025-10-13 22:49:37 +02:00
Gigi
61ce338b8c fix: show reading progress indicator on mobile at full width 2025-10-13 22:48:39 +02:00
Gigi
47de9a75b7 style: remove rounded corners from bookmark sidebar header and fix profile avatar size 2025-10-13 22:48:23 +02:00
Gigi
607f3d46f0 fix: remove sidebar margins and constrain reading progress bar to content pane 2025-10-13 22:44:59 +02:00
Gigi
bdbc08fdf1 style: make mobile sidebar buttons more subtle and refined 2025-10-13 22:40:01 +02:00
Gigi
3a28160ae8 fix: prevent icon blurriness on mobile by setting explicit sizes 2025-10-13 22:38:36 +02:00
Gigi
e03696eed7 style: make sidebars extend edge-to-edge on desktop 2025-10-13 22:37:20 +02:00
Gigi
f80fa3de7f fix: correct highlight card borders and rounded corners 2025-10-13 22:36:04 +02:00
Gigi
a19cb8b6dc fix: remove mobile content pane gap and ensure full width display 2025-10-13 22:26:13 +02:00
Gigi
c564d1608b fix: remove padding on mobile main pane for edge-to-edge content
- Changed mobile .pane.main padding from 0.5rem to 0
- Content now extends fully edge-to-edge on mobile
- Matches design expectation for mobile reading experience
2025-10-13 22:22:24 +02:00
Gigi
c146a8f7ec style: make reading progress indicator smaller and more subtle
- Reduced bar height from 4px to 2px (h-0.5)
- Made container more compact: py-1 instead of py-2
- Tiny text size: 0.625rem (10px) with tabular numbers
- Simplified background: less opacity, lighter blur
- Show just % or checkmark when complete
- Reduced reader bottom padding from 4rem to 2rem
- More minimalist and less intrusive design
2025-10-13 22:20:01 +02:00
Gigi
48cde27a5b refactor: extract legacy styles to dedicated file
- Created src/styles/utils/legacy.css for bookmark/nostr styles
- Reduced index.css from 214 lines to 17 lines
- Fixed duplicate .loading style definitions
- DRY improvement: shared word-break pattern across nostr classes
- Better organization and maintainability
2025-10-13 22:18:12 +02:00
Gigi
fdf0644bbb refactor: massive cleanup of index.css duplicates
- Reduced from 3175 lines to 213 lines (-2960 lines!)
- Removed all reader, bookmark, highlight, settings, modal styles
- These are already imported from modular CSS files
- Only kept truly unique utility classes
- Fixes CSS duplication and specificity issues
2025-10-13 22:16:32 +02:00
Gigi
ec7371c43b fix: remove duplicate pane styles from index.css
- Removed 230+ lines of duplicate layout CSS
- Old inline styles were overriding our document scroll fixes
- Styles now only defined in src/styles/layout/app.css
- This fixes panes having overflow-y: auto and height: 100%
2025-10-13 22:14:57 +02:00
Gigi
35204ee400 fix: force document scroll with !important overrides
- Add explicit overflow: visible to main pane
- Add height: auto to main pane
- Ensure three-pane container doesn't constrain height
- Force styles to override any inherited overflow
2025-10-13 22:13:47 +02:00
Gigi
d1031b3342 fix: update Tailwind CSS import syntax for v4
- Change from @tailwind directives to @import syntax
- Move shimmer keyframes to CSS file (v4 convention)
- Fix Tailwind classes not being processed
2025-10-13 22:11:44 +02:00
Gigi
f3f80449a6 refactor(layout): migrate mobile buttons to Tailwind utilities
- Convert mobile hamburger and highlights buttons to Tailwind
- Migrate mobile backdrop to Tailwind utilities
- Remove 60+ lines of CSS from app.css and sidebar.css
- Maintain responsive behavior and z-index layering
- Keep dynamic color support for highlight button
2025-10-13 21:58:50 +02:00
Gigi
4f5ba99214 feat(reader): convert reading progress indicator to Tailwind
- Replace CSS classes with Tailwind utilities
- Use gradient backgrounds with conditional colors
- Add shimmer animation to Tailwind config
- Remove 80+ lines of CSS from reader.css
- Maintain z-index layering (1102) above mobile overlays
- Responsive design with utility classes
2025-10-13 21:37:08 +02:00
Gigi
aab67d8375 refactor(layout): switch to document scroll with sticky sidebars
- Remove fixed container heights from three-pane layout
- Desktop: sticky sidebars with max-height, document scrolls
- Mobile: keep fixed overlays unchanged
- Update scroll direction hook to use window scroll
- Update progress indicator z-index to 1102 (above mobile overlays)
- Apply Tailwind utilities to App container
- Maintain responsive behavior across breakpoints
2025-10-13 21:36:08 +02:00
Gigi
dbc0a48194 style(global): reconcile base styles with Tailwind preflight
- Add CSS variables for user-settable highlight colors
- Add reading font and font size variables
- Simplify global.css to work with Tailwind preflight
- Remove redundant body/root styles handled by Tailwind
- Keep app-specific overrides (mobile sidebar lock, loading states)
2025-10-13 21:18:31 +02:00
Gigi
6a84646b0b chore(tailwind): setup Tailwind CSS with preflight on
- Install tailwindcss, postcss, autoprefixer
- Add tailwind.config.js and postcss.config.js
- Create src/styles/tailwind.css with base/components/utilities
- Import Tailwind before index.css in main.tsx
2025-10-13 21:17:11 +02:00
Gigi
e921967082 fix: move progress indicator outside reader and fix position tracking
- Move ReadingProgressIndicator outside reader div for true fixed positioning
- Replace position-indicator library with custom scroll tracking
- Track document scroll position instead of content scroll
- Remove unused position-indicator dependency
- Ensure progress indicator is always visible and shows correct percentage
2025-10-13 21:04:39 +02:00
Gigi
ec34bc3d04 fix: position reading progress indicator at bottom of screen
- Move progress indicator from top to bottom of viewport
- Add box shadow for better visual separation
- Update hide animation to slide up from bottom
- Add padding to reader content to prevent overlap
- Ensure indicator is always visible while scrolling
2025-10-13 21:02:52 +02:00
Gigi
96ce12b952 feat: add reading position tracking with visual progress indicator
- Install position-indicator library for scroll position tracking
- Create useReadingPosition hook for position management
- Add ReadingProgressIndicator component with animated progress bar
- Integrate reading progress in ContentPanel for text content only
- Add CSS styles for fixed progress indicator with shimmer animation
- Track reading completion at 90% threshold
- Exclude video content from position tracking
2025-10-13 21:01:44 +02:00
Gigi
3df2f248ff fix: use negative margins to make video edge-to-edge within reader
- Add negative left/right margins (-0.75rem) to counteract reader padding
- Video now extends to the true edges of the reader container
- Maintains responsive sizing with 80vw width and aspect ratio
- Achieves true edge-to-edge video display
2025-10-13 20:53:39 +02:00
Gigi
d2770d58e2 fix: remove left/right margins from video player for edge-to-edge display
- Change margin from '0 auto 1rem auto' to '0 0 1rem 0'
- Remove auto left/right margins that were centering the video
- Keep bottom margin for spacing from content below
- Video player now aligns to left edge of card container
2025-10-13 20:27:08 +02:00