feat: optimize mobile layout with unified design system
Comprehensive mobile optimization (≤768px) for improved consistency and readability: - Center profile photo between name and intro text on mobile - Unify all logo/icon sizes to 60×60px for visual consistency - Standardize spacing across experience, courses, projects, and awards - Reduce font sizes proportionally for better mobile readability - Remove justified text alignment (except intro/skills) to prevent awkward spacing - Apply consistent 1rem gaps and 1.5rem padding throughout - Optimize sidebar items with reduced margins and font sizes Technical improvements: - Add comprehensive mobile breakpoint rules at 768px - Implement flexible photo positioning (absolute on desktop, static on mobile) - Ensure uniform typography scale across all content types
This commit is contained in:
juanatsap
+51
-39
@@ -44,22 +44,52 @@
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide ALL icons in print */
|
||||
iconify-icon,
|
||||
.section-icon,
|
||||
.default-company-icon,
|
||||
.default-project-icon,
|
||||
.default-course-icon,
|
||||
.default-award-icon {
|
||||
display: none !important;
|
||||
/* ===================================
|
||||
SHOW ALL ICONS, LOGOS, AND BADGES - Print Default
|
||||
=================================== */
|
||||
|
||||
/* Section title icons - smaller for print */
|
||||
.section-icon {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
vertical-align: middle !important;
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
/* Hide company/project/course logos */
|
||||
/* Company/Project/Course logos - compact for print */
|
||||
.company-logo,
|
||||
.project-icon,
|
||||
.course-icon,
|
||||
.award-logo {
|
||||
display: none !important;
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.company-logo img,
|
||||
.project-icon img,
|
||||
.course-icon img,
|
||||
.award-logo img {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
/* Default fallback icons - show at print size */
|
||||
.default-company-icon,
|
||||
.default-project-icon,
|
||||
.default-course-icon,
|
||||
.default-award-icon {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
/* Badges - keep visible for print */
|
||||
.current-badge,
|
||||
.expired-badge,
|
||||
.maintained-badge {
|
||||
font-size: 7pt !important;
|
||||
padding: 1px 4px !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -191,12 +221,12 @@
|
||||
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
|
||||
=================================== */
|
||||
.cv-photo {
|
||||
width: 60px !important;
|
||||
height: 80px !important; /* Maintains 3:4 ratio */
|
||||
width: 90px !important;
|
||||
height: 120px !important; /* Maintains 3:4 ratio */
|
||||
object-fit: contain !important; /* Show full photo, no crop */
|
||||
border: none !important; /* Remove border */
|
||||
box-shadow: none !important;
|
||||
margin: 10px 15px 10px 10px !important;
|
||||
margin: 0px 0px 20px 20px !important;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
@@ -241,10 +271,6 @@
|
||||
margin-bottom: 3mm !important; /* More space for lists */
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
display: none; /* Hide section icons in print */
|
||||
}
|
||||
|
||||
.summary-text {
|
||||
font-size: 9pt;
|
||||
line-height: 1.5;
|
||||
@@ -254,6 +280,8 @@
|
||||
EXPERIENCE - REDUCED SPACING (60px → 26px)
|
||||
=================================== */
|
||||
.experience-item {
|
||||
display: flex !important; /* Show logos side-by-side with content */
|
||||
gap: 12px !important;
|
||||
margin-bottom: 4mm !important; /* ~15px, down from 40px */
|
||||
padding-bottom: 3mm !important; /* ~11px, down from 32px */
|
||||
border-bottom: 0.5pt solid #dddddd !important;
|
||||
@@ -305,7 +333,7 @@
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
/* All logos already hidden above - no exceptions */
|
||||
/* Logos are visible at 40x40 for compact print layout */
|
||||
|
||||
/* ===================================
|
||||
PROJECTS & COURSES
|
||||
@@ -313,7 +341,8 @@
|
||||
.project-item,
|
||||
.course-item,
|
||||
.award-item {
|
||||
display: block !important; /* Remove flex/grid layouts for print */
|
||||
display: flex !important; /* Show logos side-by-side with content */
|
||||
gap: 12px !important;
|
||||
margin-bottom: 4mm !important;
|
||||
padding-bottom: 3mm !important;
|
||||
border-bottom: 0.5pt solid #dddddd !important;
|
||||
@@ -345,13 +374,13 @@
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
/* Icons/logos already hidden - display: none above */
|
||||
/* Logos visible at 40x40 - default icons remain hidden */
|
||||
|
||||
/* Consistent item titles */
|
||||
.project-title,
|
||||
.course-title,
|
||||
.award-item strong,
|
||||
.course-item strong {
|
||||
.experience-title,
|
||||
.award-title {
|
||||
font-size: 10pt !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.3 !important;
|
||||
@@ -382,14 +411,6 @@
|
||||
margin-left: 0.5mm !important;
|
||||
}
|
||||
|
||||
/* Course title styling to match experience */
|
||||
.course-title {
|
||||
font-size: 10pt !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.3 !important;
|
||||
margin-bottom: 0.5mm !important;
|
||||
}
|
||||
|
||||
/* Course metadata (date, location) - match experience style */
|
||||
.course-period,
|
||||
.course-location,
|
||||
@@ -531,15 +552,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
BADGES - Hidden for minimal print
|
||||
=================================== */
|
||||
.current-badge,
|
||||
.expired-badge,
|
||||
.maintained-badge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
CV LENGTH TOGGLE - Force Short Version for Print Friendly
|
||||
=================================== */
|
||||
|
||||
Reference in New Issue
Block a user