juanatsap
542419de45
Each project now shows a colored icon badge indicating its type: - CLI (purple terminal), App (blue apple), Web (cyan globe) - WebApp (teal app), Plugin (amber puzzle), SDK (violet package) - Contrib (gray pull request)
675 lines
18 KiB
CSS
675 lines
18 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;
|
|
}
|
|
|
|
/* ===================================
|
|
SHOW ALL ICONS, ICONS, 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;
|
|
}
|
|
|
|
/* Company/Project/Course icons - compact for print */
|
|
.company-logo,
|
|
.project-icon,
|
|
.course-icon,
|
|
.award-logo {
|
|
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,
|
|
.live-badge,
|
|
.expired-badge,
|
|
.maintained-badge,
|
|
.github-badge {
|
|
font-size: 7pt !important;
|
|
padding: 1px 4px !important;
|
|
}
|
|
|
|
.live-badge iconify-icon,
|
|
.github-badge iconify-icon {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
}
|
|
|
|
.github-badge {
|
|
color: white !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.stars-badge,
|
|
.category-badge {
|
|
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 with Desktop Layout
|
|
=================================== */
|
|
.cv-header {
|
|
page-break-after: avoid;
|
|
margin-bottom: 8mm !important; /* Reduced from 15mm */
|
|
}
|
|
|
|
/* Override mobile layout - use positioned layout for print */
|
|
.cv-header-content {
|
|
display: block !important; /* Use block instead of flex */
|
|
position: relative !important;
|
|
}
|
|
|
|
.cv-header-left {
|
|
display: block !important;
|
|
position: static !important;
|
|
padding-right: 130px !important; /* Make room for bigger photo on the right */
|
|
text-align: right !important; /* Right-align name and years */
|
|
}
|
|
|
|
.cv-name {
|
|
font-size: 20pt;
|
|
margin-bottom: 4pt;
|
|
text-align: right !important; /* Override mobile center alignment */
|
|
}
|
|
|
|
.cv-title {
|
|
font-size: 12pt;
|
|
}
|
|
|
|
.years-experience,
|
|
.cv-experience-years {
|
|
font-size: 10pt;
|
|
text-align: right !important; /* Override mobile center alignment */
|
|
}
|
|
|
|
/* ===================================
|
|
PHOTO - FIXED ASPECT RATIO (3:4 Portrait) - RIGHT SIDE
|
|
=================================== */
|
|
.cv-photo {
|
|
width: 110px !important; /* Increased from 90px */
|
|
height: 147px !important; /* Maintains 3:4 ratio (110 * 1.33) */
|
|
object-fit: contain !important; /* Show full photo, no crop */
|
|
border: none !important; /* Remove border */
|
|
box-shadow: none !important;
|
|
page-break-inside: avoid;
|
|
/* Position photo to the right */
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
right: 0 !important;
|
|
margin: 10px 0 0 0!important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
.cv-photo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain !important;
|
|
}
|
|
|
|
/* Intro text should be justified and below name/years */
|
|
.intro-text {
|
|
font-size: 9pt !important;
|
|
line-height: 1.5 !important;
|
|
text-align: justify !important; /* Justified text for print */
|
|
margin-top: 3mm !important;
|
|
width: 100% !important;
|
|
padding-right: 0 !important; /* Intro text extends full width below photo */
|
|
text-align-last: left !important; /* Last line left-aligned */
|
|
}
|
|
|
|
/* ===================================
|
|
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 */
|
|
}
|
|
|
|
.summary-text {
|
|
font-size: 9pt;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ===================================
|
|
EXPERIENCE - REDUCED SPACING (60px → 26px)
|
|
=================================== */
|
|
.experience-item {
|
|
display: flex !important; /* Show icons 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Logos are visible at 40x40 for compact print layout */
|
|
|
|
/* ===================================
|
|
PROJECTS & COURSES
|
|
=================================== */
|
|
.project-item,
|
|
.course-item,
|
|
.award-item {
|
|
display: flex !important; /* Show icons side-by-side with content */
|
|
gap: 12px !important;
|
|
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;
|
|
}
|
|
|
|
/* Logos visible at 40x40 - default icons remain hidden */
|
|
|
|
/* Consistent item titles */
|
|
.project-title,
|
|
.course-title,
|
|
.experience-title,
|
|
.award-title {
|
|
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 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;
|
|
font-size: 9pt !important; /* Match body text size (equivalent to 0.95rem) */
|
|
line-height: 1.5 !important;
|
|
}
|
|
|
|
.education-item strong {
|
|
font-size: 9pt !important; /* Ensure degree title matches body text */
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
/* ===================================
|
|
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;
|
|
}
|
|
|
|
/* ===================================
|
|
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;
|
|
}
|
|
}
|