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
This commit is contained in:
juanatsap
2025-11-23 09:15:08 +00:00
parent 2f466e46bc
commit 8bf48a1dd7
3 changed files with 26 additions and 12 deletions
@@ -699,6 +699,13 @@
======================================== */
@media (max-width: 915px) and (orientation: landscape) {
/* Force single column layout in landscape mobile */
.page-1 .page-content,
.page-2 .page-content {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto;
}
/* Reduce header size in landscape */
.cv-header {
margin-bottom: 1rem !important;