juanatsap
18db4011f8
Print CSS overhaul: - Fixed photo aspect ratio (60x80, 3:4 portrait) with contain fit - Unified font sizes across all sections (10pt titles, 9pt content, 8pt metadata) - Removed excessive spacing (reduced by 50-70%) - Applied clean theme automatically (no sidebars, icons, logos, badges) - Force short version for concise 5-page output - Natural page breaks (removed forced breaks causing blank spaces) - Consistent section title spacing with proper breathing room - Match Training/Skills spacing pattern across all sections - Fixed Languages and References spacing - Equalized Experience, Courses, Projects, and Awards formatting - Single separator for "See all projects" link UI improvements: - Enhanced icon toggle visibility with better contrast - Reorganized navigation menu structure
620 lines
16 KiB
CSS
620 lines
16 KiB
CSS
/* Print Styles - A4 Optimized - Consolidated & Fixed */
|
|
|
|
@media print {
|
|
/* ===================================
|
|
CRITICAL: Print Color Accuracy
|
|
=================================== */
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
color-adjust: exact !important;
|
|
}
|
|
|
|
/* ===================================
|
|
PAGE SETUP - A4 with Minimal Margins
|
|
=================================== */
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 8mm; /* Minimal printer margins */
|
|
}
|
|
|
|
body {
|
|
background: white !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ===================================
|
|
HIDE NON-PRINT ELEMENTS
|
|
=================================== */
|
|
.no-print,
|
|
.action-bar,
|
|
.navigation-menu,
|
|
.hamburger-btn,
|
|
footer,
|
|
.back-to-top,
|
|
.info-button,
|
|
.info-modal,
|
|
.error-toast,
|
|
.cv-sidebar,
|
|
.cv-sidebar-left,
|
|
.cv-sidebar-right,
|
|
.cv-title-badges-header,
|
|
.cv-footer {
|
|
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;
|
|
}
|
|
|
|
/* Hide company/project/course logos */
|
|
.company-logo,
|
|
.project-icon,
|
|
.course-icon,
|
|
.award-logo {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ===================================
|
|
REMOVE ALL SHADOWS & BORDERS (Nuclear Option)
|
|
=================================== */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
/* ===================================
|
|
CV CONTAINER - Full Page Width
|
|
=================================== */
|
|
.cv-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
.cv-container.theme-clean {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ===================================
|
|
CV PAPER - Reduced Padding (20mm → 12mm)
|
|
=================================== */
|
|
.cv-paper {
|
|
width: 100%;
|
|
min-height: auto !important;
|
|
background: white !important;
|
|
padding: 12mm !important; /* Reduced from 20mm */
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
margin: 0 !important;
|
|
page-break-after: auto;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* ===================================
|
|
CV PAGE - Remove All Decorations & Page Breaks
|
|
=================================== */
|
|
.cv-page,
|
|
.theme-clean .cv-page {
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
background: white !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
transform: scale(1) !important;
|
|
max-width: 100% !important;
|
|
page-break-after: auto !important; /* Let content flow naturally */
|
|
page-break-inside: auto !important; /* Allow breaking inside */
|
|
}
|
|
|
|
.cv-page.page-2 {
|
|
page-break-after: auto !important;
|
|
}
|
|
|
|
/* ===================================
|
|
PAGE CONTENT GRID - Allow Natural Flow
|
|
=================================== */
|
|
.page-content {
|
|
page-break-inside: auto !important; /* Allow content to break naturally */
|
|
display: block !important; /* Remove grid for print */
|
|
}
|
|
|
|
/* ===================================
|
|
PAGE BREAKS - Optimized for Content Flow
|
|
=================================== */
|
|
.page-break {
|
|
page-break-after: auto !important; /* Remove forced page breaks */
|
|
break-after: auto !important;
|
|
}
|
|
|
|
/* Sections CAN break across pages - flow naturally */
|
|
.cv-section {
|
|
page-break-inside: auto !important;
|
|
break-inside: auto !important;
|
|
page-break-before: auto !important; /* No forced breaks before sections */
|
|
page-break-after: auto !important; /* No forced breaks after sections */
|
|
}
|
|
|
|
/* Keep individual items together */
|
|
.avoid-break,
|
|
.experience-item,
|
|
.project-item,
|
|
.course-item,
|
|
.award-item {
|
|
page-break-inside: avoid !important;
|
|
break-inside: avoid !important;
|
|
}
|
|
|
|
/* Experience section should flow into Awards - no page break */
|
|
#experience {
|
|
page-break-after: auto !important;
|
|
}
|
|
|
|
/* ===================================
|
|
HEADER - Reduced Spacing
|
|
=================================== */
|
|
.cv-header {
|
|
page-break-after: avoid;
|
|
margin-bottom: 8mm !important; /* Reduced from 15mm */
|
|
}
|
|
|
|
.cv-header-content {
|
|
gap: 1.5rem !important;
|
|
}
|
|
|
|
.cv-name {
|
|
font-size: 20pt;
|
|
margin-bottom: 4pt;
|
|
}
|
|
|
|
.cv-title {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
.years-experience,
|
|
.cv-experience-years {
|
|
font-size: 10pt;
|
|
}
|
|
|
|
/* ===================================
|
|
PHOTO - FIXED ASPECT RATIO (3:4 Portrait)
|
|
=================================== */
|
|
.cv-photo {
|
|
width: 60px !important;
|
|
height: 80px !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;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.cv-photo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
/* ===================================
|
|
INTRO TEXT
|
|
=================================== */
|
|
.intro-text {
|
|
font-size: 9pt;
|
|
line-height: 1.5;
|
|
margin-top: 3mm !important;
|
|
}
|
|
|
|
/* ===================================
|
|
SECTIONS - REDUCED SPACING (48px → 19px)
|
|
=================================== */
|
|
.cv-section {
|
|
margin-bottom: 5mm !important; /* ~19px, down from 48px */
|
|
margin-top: 7mm !important; /* More breathing space between sections */
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 12pt !important; /* Equalized size for all titles */
|
|
font-weight: 600 !important;
|
|
margin-top: 0 !important;
|
|
margin-bottom: 1mm !important; /* Minimal bottom margin - matches Training/Skills */
|
|
page-break-after: avoid;
|
|
border-bottom: 0.5pt solid #dddddd !important;
|
|
padding-bottom: 2mm !important;
|
|
padding-top: 2mm !important; /* Breathing space above */
|
|
line-height: 1.3 !important; /* Consistent line height */
|
|
}
|
|
|
|
/* Languages and References need more breathing space below title */
|
|
#languages .section-title,
|
|
#references .section-title {
|
|
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;
|
|
}
|
|
|
|
/* ===================================
|
|
EXPERIENCE - REDUCED SPACING (60px → 26px)
|
|
=================================== */
|
|
.experience-item {
|
|
margin-bottom: 4mm !important; /* ~15px, down from 40px */
|
|
padding-bottom: 3mm !important; /* ~11px, down from 32px */
|
|
border-bottom: 0.5pt solid #dddddd !important;
|
|
}
|
|
|
|
.experience-item:last-child {
|
|
border-bottom: none !important;
|
|
margin-bottom: 0 !important; /* Remove bottom margin from last experience */
|
|
padding-bottom: 2mm !important; /* Minimal padding */
|
|
}
|
|
|
|
.position {
|
|
font-size: 10pt;
|
|
margin-bottom: 2pt;
|
|
}
|
|
|
|
.company,
|
|
.company-link {
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.experience-period,
|
|
.experience-location,
|
|
.experience-duration {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.short-desc {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
margin-top: 1mm !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
.responsibilities {
|
|
margin-top: 2mm;
|
|
}
|
|
|
|
.responsibilities li {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
margin-bottom: 1mm;
|
|
}
|
|
|
|
/* Ensure all experience content is properly sized */
|
|
.experience-item p,
|
|
.experience-item div {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
/* All logos already hidden above - no exceptions */
|
|
|
|
/* ===================================
|
|
PROJECTS & COURSES
|
|
=================================== */
|
|
.project-item,
|
|
.course-item,
|
|
.award-item {
|
|
display: block !important; /* Remove flex/grid layouts for print */
|
|
margin-bottom: 4mm !important;
|
|
padding-bottom: 3mm !important;
|
|
border-bottom: 0.5pt solid #dddddd !important;
|
|
}
|
|
|
|
.project-item:last-child,
|
|
.course-item:last-child,
|
|
.award-item:last-child {
|
|
border-bottom: none !important; /* Remove border from last item */
|
|
}
|
|
|
|
/* Projects footer - "See all projects" link */
|
|
.projects-footer {
|
|
margin-top: 4mm !important;
|
|
padding-top: 3mm !important;
|
|
text-align: center !important;
|
|
font-size: 9pt !important;
|
|
border-top: 0.5pt solid #dddddd !important; /* Single separator */
|
|
}
|
|
|
|
.projects-footer p {
|
|
margin: 0 !important;
|
|
padding: 2mm 0 !important;
|
|
}
|
|
|
|
.projects-footer a {
|
|
color: #0066cc !important;
|
|
text-decoration: none !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* Icons/logos already hidden - display: none above */
|
|
|
|
/* Consistent item titles */
|
|
.project-title,
|
|
.course-title,
|
|
.award-item strong,
|
|
.course-item strong {
|
|
font-size: 10pt !important;
|
|
font-weight: 600 !important;
|
|
line-height: 1.3 !important;
|
|
display: block !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
.project-desc,
|
|
.course-desc,
|
|
.award-desc {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
margin-top: 1mm !important;
|
|
}
|
|
|
|
/* Course/Project headers - match Experience spacing */
|
|
.course-header,
|
|
.project-header {
|
|
margin-bottom: 0.5mm !important; /* Minimal spacing */
|
|
}
|
|
|
|
.course-item small,
|
|
.project-item small {
|
|
font-size: 8pt !important;
|
|
color: #666 !important;
|
|
display: inline !important; /* Inline like experience dates */
|
|
margin-top: 0 !important;
|
|
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,
|
|
.course-separator {
|
|
font-size: 8pt !important;
|
|
color: #666 !important;
|
|
display: inline !important;
|
|
}
|
|
|
|
/* Ensure all text and paragraphs in course items are properly sized */
|
|
.course-item p,
|
|
.course-item div,
|
|
.project-item p,
|
|
.project-item div {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
margin-top: 1mm !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
.project-technologies,
|
|
.technologies {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
/* ===================================
|
|
EDUCATION & SKILLS
|
|
=================================== */
|
|
.degree,
|
|
.skill-title,
|
|
.project-name {
|
|
font-size: 9.5pt;
|
|
}
|
|
|
|
.institution,
|
|
.skill-list,
|
|
.project-description {
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.education-item {
|
|
margin-bottom: 3mm;
|
|
}
|
|
|
|
/* ===================================
|
|
CERTIFICATIONS & AWARDS
|
|
=================================== */
|
|
.cert-item,
|
|
.award-item {
|
|
margin-bottom: 3mm !important;
|
|
padding-bottom: 2mm !important;
|
|
}
|
|
|
|
.award-item strong,
|
|
.cert-item strong {
|
|
font-size: 10pt !important;
|
|
font-weight: 600 !important;
|
|
display: block !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
.award-item small,
|
|
.cert-item small {
|
|
font-size: 8pt !important;
|
|
color: #666 !important;
|
|
}
|
|
|
|
/* Ensure all award/cert content is properly sized */
|
|
.award-item p,
|
|
.award-item div,
|
|
.cert-item p,
|
|
.cert-item div {
|
|
font-size: 9pt !important;
|
|
line-height: 1.4 !important;
|
|
margin-top: 1mm !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
/* ===================================
|
|
LANGUAGES
|
|
=================================== */
|
|
.languages-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2mm;
|
|
}
|
|
|
|
.language-item {
|
|
font-size: 9pt !important;
|
|
line-height: 1.3 !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
.language-item small {
|
|
font-size: 8pt;
|
|
}
|
|
|
|
/* ===================================
|
|
REFERENCES & OTHER
|
|
=================================== */
|
|
.reference-item,
|
|
.other-content {
|
|
font-size: 9pt !important;
|
|
line-height: 1.3 !important;
|
|
margin-bottom: 1mm !important;
|
|
}
|
|
|
|
/* ===================================
|
|
CONTACT INFO
|
|
=================================== */
|
|
.cv-contact {
|
|
font-size: 8.5pt;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 2mm;
|
|
}
|
|
|
|
/* ===================================
|
|
CLEAN THEME - Full Width Main Content
|
|
=================================== */
|
|
.theme-clean .page-content,
|
|
.page-content {
|
|
display: block !important;
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
.theme-clean .cv-main,
|
|
.cv-main {
|
|
grid-column: 1 !important;
|
|
padding: 0 !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
/* ===================================
|
|
LINKS - Print Styling
|
|
=================================== */
|
|
a {
|
|
color: #0066cc;
|
|
text-decoration: none;
|
|
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
|
|
=================================== */
|
|
/* Show short descriptions */
|
|
.cv-short .short-desc {
|
|
display: block !important;
|
|
font-size: 9pt;
|
|
line-height: 1.5;
|
|
margin-top: 2mm;
|
|
}
|
|
|
|
/* Hide long-only content (detailed descriptions) */
|
|
.cv-short .long-only,
|
|
.long-only {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide responsibilities (detailed bullet points) */
|
|
.cv-short .responsibilities,
|
|
.responsibilities {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Long version rules (should not apply, but just in case) */
|
|
.cv-long .short-desc {
|
|
display: none !important;
|
|
}
|
|
|
|
.cv-long .long-only {
|
|
display: block !important;
|
|
}
|
|
|
|
.cv-long .responsibilities {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ===================================
|
|
THEME CLEAN - Minimal Print Mode
|
|
=================================== */
|
|
/* All sidebars, headers, footers already hidden above */
|
|
/* Main content takes full width */
|
|
|
|
/* ===================================
|
|
COLLAPSIBLE SECTIONS - Force Open
|
|
=================================== */
|
|
details {
|
|
display: block !important;
|
|
}
|
|
|
|
summary {
|
|
display: block !important;
|
|
list-style: none !important;
|
|
}
|
|
|
|
summary::after,
|
|
summary .section-title::after,
|
|
.sidebar-section summary::after {
|
|
display: none !important; /* Hide collapse indicators */
|
|
}
|
|
|
|
details > *:not(summary) {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
max-height: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* ===================================
|
|
ENSURE PROPER TEXT RENDERING
|
|
=================================== */
|
|
body,
|
|
.cv-paper {
|
|
font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|