txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Landscape mode photo layout and button backdrop improvements

Browse Source 
Fixed two critical landscape mode issues on mobile devices:

1. Button backdrop blur bar now shows in landscape mode
   - Added iOS-style blur backdrop with 70px height for landscape
   - Consistent visual experience between portrait and landscape
   - Supports dark mode with appropriate theming

2. Photo positioned on the right in landscape with better sizing
   - Changed from stacked single-column to two-column grid layout
   - Photo now positioned on right side (180px vs previous 120px)
   - Text (name, experience, intro) on left, photo on right
   - Better use of horizontal space in landscape orientation
   - Left-aligned text for cleaner layout with photo on right

Test results (iPhone SE & iPhone 12 landscape):
  ✅ Two-column layout with photo on right
  ✅ Photo properly sized and positioned (180px)
  ✅ Button backdrop visible with blur effect
  ✅ No horizontal scroll
  ✅ All landscape tests passing

Test: tests/mjs/59-landscape-photo-and-backdrop-test.mjs
This commit is contained in:
juanatsap
2025-11-25 05:24:11 +00:00
parent 75efeb1474
commit 945928d930
2 changed files with 198 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/05-responsive/_breakpoints.css
+60 -10
View File
@@ -701,6 +701,30 @@
======================================== */
@media (max-width: 915px) and (orientation: landscape) {
/* iOS-style blur backdrop for buttons in landscape */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
.fixed-buttons-backdrop {
display: block !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px; /* Slightly smaller for landscape */
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 0.5px solid rgba(0, 0, 0, 0.1);
z-index: 98;
pointer-events: none;
}
[data-color-theme="dark"] .fixed-buttons-backdrop,
[data-color-theme="auto"] .fixed-buttons-backdrop {
background: rgba(30, 30, 30, 0.8);
border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
}
/* CRITICAL: Prevent horizontal scroll in landscape */
* {
max-width: 100vw !important;
@@ -783,33 +807,59 @@
.cv-name {
font-size: 1.4rem !important;
text-align: center;
text-align: left !important; /* Left-aligned with photo on right */
}
.years-experience {
font-size: 1em !important;
text-align: center;
text-align: left !important; /* Left-aligned with photo on right */
}
/* Reduce photo size in landscape to ~50% width but keep visible */
.cv-header-content {
flex-direction: column;
align-items: center;
gap: 0.5rem;
/* Two-column layout in landscape: text left, photo right */
.cv-header-left {
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto auto !important;
gap: 0.5rem 1rem !important;
align-items: start !important;
}
/* Name spans column 1, row 1 */
.cv-name {
grid-column: 1;
grid-row: 1;
}
/* Experience years spans column 1, row 2 */
.years-experience {
grid-column: 1;
grid-row: 2;
margin: 0 !important;
}
/* Intro text spans column 1, row 3 */
.intro-text {
grid-column: 1;
grid-row: 3;
margin: 0 !important;
}
/* Photo on the right side, spans all 3 rows */
.cv-photo {
grid-column: 2;
grid-row: 1 / 4;
position: static !important;
width: auto !important;
height: auto !important;
max-width: 120px !important;
margin: 0.5rem auto !important;
text-align: center;
max-width: 180px !important; /* Bigger than before (was 120px) */
margin: 0 !important;
align-self: start;
}
.cv-photo img {
width: 100% !important;
height: auto !important;
border-radius: 8px;
}
/* Compact action bar - keep hamburger menu visible */