txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
402 Commits 1 Branch 2 Tags
8bf48a1dd728d9cc13f8ece11764816c5f23490c
Commit Graph

3 Commits

Author SHA1 Message Date
juanatsap 8bf48a1dd7 fix: Remove transparency from mobile buttons and fix landscape layout 
Mobile Button Opacity (No Transparency):
- Changed all mobile button backgrounds from rgba(x,x,x,0.5) to rgba(x,x,x,1)
- Added opacity: 1 !important to override base opacity: 0.6 rules
- Buttons now display at full opacity with iOS blur bar backdrop
- Affected buttons: download, print-friendly, shortcuts, info, back-to-top, theme-switcher

Landscape Layout Fix:
- Added single-column grid rule for landscape orientation
- Media query: @media (max-width: 915px) and (orientation: landscape)
- Forces grid-template-columns: 1fr for both page-1 and page-2
- Prevents 2-column layout on iPhone landscape (844px wide)

Files Modified:
- static/css/04-interactive/_scroll-behavior.css: Button opacity overrides
- static/css/05-responsive/_breakpoints.css: Landscape single-column grid
- static/css/color-theme.css: Theme switcher opacity override

Visual Changes:
- Mobile buttons: Full color, no transparency (vibrant appearance)
- Landscape: Single column layout (sidebar top, content below)
- Maintains footer-hovered transparency for footer interaction
 2025-11-23 09:15:08 +00:00
juanatsap 2eafb78954 fix: Mobile view improvements - accordion styling and modal centering 
Fixed two critical mobile view issues:

1. Extended CV Sidebar Accordion:
   - Updated sidebar.html to use native <details> element (was div with onclick)
   - Styled accordion header to match CV title badges dark theme (#303030)
   - Applied consistent styling: dark gray background, light text, uppercase, no spacing
   - Result: Sidebars now collapse/expand properly with native HTML functionality

2. PDF Download Modal Centering:
   - Added JavaScript-based centering for mobile viewports (≤768px)
   - Uses inline styles with !important flag to override browser defaults
   - Updated download button to call openPdfModal() function
   - Result: Modal is perfectly centered on mobile (0px offset)

Technical notes:
   - Modal centering required setProperty() with 'important' flag
   - Accordion matches cv-title-badges-header style exactly
   - All tests passing: accordion toggle, modal centering

Files modified:
   - templates/partials/cv/sidebar.html
   - static/css/05-responsive/_breakpoints.css
   - static/js/main.js
   - templates/partials/widgets/download-button.html

Tests added:
   - tests/mjs/43-mobile-accordion-and-modal-test.mjs
   - tests/mjs/46-visual-accordion-style-test.mjs
 2025-11-22 16:23:05 +00:00
juanatsap 1258d61d05 refactor: Modularize CSS into ITCSS architecture + update documentation 
CSS Refactoring:
- Split 2,287-line monolith into 6 focused modules
- New structure: Navigation, Scroll, Buttons, Modals, Zoom, Breakpoints
- Organized by ITCSS layers (Interactive + Responsive)
- 245 lines saved through better organization
- Site verified working at localhost:1999

New CSS Files:
- 04-interactive/_navigation.css (357 lines, 8.2KB)
- 04-interactive/_scroll-behavior.css (200 lines, 5.0KB)
- 04-interactive/_buttons.css (184 lines, 4.7KB)
- 04-interactive/_modals.css (487 lines, 16KB)
- 04-interactive/_zoom-control.css (253 lines, 6.3KB)
- 05-responsive/_breakpoints.css (561 lines, 14KB)

Documentation Updates:
- Added doc/12-CSS-ARCHITECTURE.md (comprehensive CSS guide)
- Updated doc/README.md (new entry + correct numbering)
- Updated tests/README.md (test count 8 → 27)
- Updated tests/TEST-SUMMARY.md (coverage expansion)
- Rewrote tests/mjs/README.md (complete test listing)

Removed:
- static/css/04-interactive/_remaining.css (replaced by modules)
 2025-11-20 12:34:42 +00:00