diff --git a/static/css/main.css b/static/css/main.css index 9c039e1..d52ef6c 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -224,7 +224,8 @@ iconify-icon { justify-content: space-between; width: 75px; height: 30px; - background: rgba(255,255,255,0.1); + background: #e0e0e0; + border: 2px solid #d0d0d0; border-radius: 15px; padding: 0 6px; transition: all 0.3s ease; @@ -250,6 +251,7 @@ iconify-icon { .icon-toggle input:checked + .icon-toggle-slider { background: #27ae60; + border-color: #229954; } .icon-toggle-slider .icon-left, @@ -271,18 +273,22 @@ iconify-icon { .icon-toggle input:not(:checked) + .icon-toggle-slider .icon-left { color: #333; + font-weight: bold; } .icon-toggle input:not(:checked) + .icon-toggle-slider .icon-right { - color: rgba(255,255,255,0.3); + color: #999; + opacity: 0.5; } .icon-toggle input:checked + .icon-toggle-slider .icon-left { - color: rgba(255,255,255,0.3); + color: rgba(255,255,255,0.4); + opacity: 0.5; } .icon-toggle input:checked + .icon-toggle-slider .icon-right { - color: #333; + color: #fff; + font-weight: bold; } .icon-toggle input:focus + .icon-toggle-slider { @@ -1424,7 +1430,7 @@ footer { .action-bar-content { grid-template-columns: 1fr; gap: 1rem; - padding: 1rem; + padding: 0rem; } .language-toggle, @@ -1445,6 +1451,22 @@ footer { font-size: 0.9em; margin-top: 15px; } + + /* ========== Hide header controls, show in menu ========== */ + /* Keep language selector visible in header */ + .view-controls-center { + display: none !important; + } + + .action-buttons-right { + display: none !important; + } + + /* Show controls and actions in hamburger menu */ + .menu-controls-section, + .menu-actions-section { + display: block !important; + } } .no-print {} @@ -1666,67 +1688,9 @@ a:focus { } /* =============================================== - PRINT STYLES - TWO-PAGE LAYOUT + PRINT STYLES - Handled by print.css =============================================== */ - -@media print { - body { - background: white; - margin: 0; - padding: 0; - } - - .action-bar { - display: none !important; - } - - .cv-page { - box-shadow: none; - border: none; - margin: 0 auto; - transform: scale(1); - max-width: 100%; - page-break-after: always; - page-break-inside: avoid; - } - - .cv-page.page-2 { - page-break-after: auto; - } - - .page-content { - page-break-inside: avoid; - } - - .cv-section { - page-break-inside: avoid; - } - - /* Ensure footer only on page 2 */ - .page-1 .cv-footer { - display: none !important; - } - - .cv-footer { - page-break-inside: avoid; - background: #ddd !important; - color: #333 !important; - -webkit-print-color-adjust: exact; - print-color-adjust: exact; - } - - a { - text-decoration: none; - font-weight: 800; - color: inherit; - } - - /* Set up proper A4 page dimensions */ - @page { - size: A4 portrait; - margin: 0.5in; - } -} +/* All print styles consolidated in /static/css/print.css */ /* =============================================== SECTION STYLES FOR PAGE 2 @@ -2043,14 +2007,14 @@ a:focus { /* Show menu when hovering menu itself OR when it has the hover class */ .navigation-menu:hover, .navigation-menu.menu-hover { - max-height: 800px; /* Fixed height for consistent animation timing */ + max-height: calc(100vh - 60px); /* Viewport height minus header + some spacing */ pointer-events: auto; /* Enable pointer events when visible */ opacity: 1; } /* Legacy class for JS compatibility - keep for backward compatibility */ .navigation-menu.menu-open { - max-height: 800px; + max-height: calc(100vh - 60px); pointer-events: auto; opacity: 1; } @@ -2090,16 +2054,15 @@ a:focus { } /* Menu item action controls (Expand All, Collapse All) */ -.menu-item-action span { - width: calc(100% - 65px); - text-align: center; -} +/* Removed centered text styling - action items now behave like regular menu items */ /* Remove extra padding - all menu items should align consistently */ -/* Submenu styles - hover triggered */ +/* Submenu styles - hover triggered, opens to the right */ .menu-item-submenu { position: relative; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 0 0 1rem 0; } .menu-item.has-submenu { @@ -2109,41 +2072,176 @@ a:focus { .submenu-arrow { transition: transform 0.2s ease; + margin-left: auto; } -/* Show submenu on hover */ +/* Rotate arrow slightly on hover */ .menu-item-submenu:hover .submenu-arrow { - transform: rotate(180deg); + transform: translateX(3px); } .submenu-content { - background-color: rgba(0, 0, 0, 0.02); - max-height: 0; - overflow: hidden; + position: fixed; /* Changed from absolute to fixed to break out of parent overflow */ + left: 278px; /* Slight overlap with menu to eliminate any gap */ + background: #ffffff; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15); + border-radius: 8px; + min-width: 250px; + max-width: 300px; opacity: 0; - transition: max-height 0.4s ease-in-out, opacity 0.3s ease; + visibility: hidden; + transform: translateX(-3px); + transition: all 0.3s ease; + z-index: 1000; /* Higher z-index to appear above everything */ + padding: 0.5rem 0; + max-height: calc(100vh - 100px); /* Ensure it fits viewport */ + overflow-y: auto; /* Scroll if content is too long */ } -/* Show submenu when hovering the submenu container */ -.menu-item-submenu:hover .submenu-content { - max-height: 600px; +/* Show submenu when hovering the submenu container OR the submenu itself */ +.menu-item-submenu:hover .submenu-content, +.submenu-content:hover { opacity: 1; + visibility: visible; + transform: translateX(0); } /* Legacy class for JS compatibility */ .menu-item-submenu.submenu-open .submenu-arrow { - transform: rotate(180deg); + transform: translateX(3px); } .menu-item-submenu.submenu-open .submenu-content { - max-height: 600px; opacity: 1; + visibility: visible; + transform: translateX(0); } .submenu-content .menu-item { - padding-left: 3rem; + padding: 0.875rem 1.5rem; font-size: 0.9rem; - border-left-width: 2px; + border-left: 3px solid transparent; + border-radius: 0; +} + +.submenu-content .menu-item:first-child { + border-top-left-radius: 8px; + border-top-right-radius: 8px; +} + +.submenu-content .menu-item:last-child { + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; +} + +/* ========== Menu Sections with Separators ========== */ +/* Quick Actions section - always visible */ +.menu-section-wrapper { + padding: 0.5rem 1.5rem 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +/* Remove border from last visible section */ +.menu-content > *:last-child, +.menu-content > div:last-child { + border-bottom: none !important; +} + +/* ========== Menu Controls & Actions (Mobile) ========== */ +/* Hidden by default, shown only on mobile (< 900px) */ +.menu-controls-section, +.menu-actions-section { + display: none; + padding: 0.5rem 1.5rem 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.menu-item-header { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.875rem 0 0.875rem 0; + color: var(--text-dark); + font-size: 0.85rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + cursor: default; +} + +/* Disable hover effect for headers */ +.menu-item-header:hover { + background-color: transparent !important; + color: var(--text-dark) !important; + border-left-color: transparent !important; +} + +.menu-item-header iconify-icon { + color: var(--text-gray); + flex-shrink: 0; +} + +.menu-item-header:hover iconify-icon { + color: var(--text-gray) !important; +} + +.menu-item-header span { + flex: 1; +} + +.menu-control-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.75rem 0; +} + +.menu-control-label { + display: flex; + align-items: center; + gap: 0.75rem; + color: var(--text-dark); + font-size: 0.9rem; + font-weight: 500; +} + +.menu-control-label iconify-icon { + color: var(--text-gray); +} + +.menu-action-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + padding: 0.875rem 1rem; + margin: 0.25rem 0; + background: rgba(0, 0, 0, 0.03); + border: none; + border-radius: 8px; + color: var(--text-dark); + text-decoration: none; + font-size: 0.9rem; + font-weight: 500; + cursor: pointer; + transition: all 0.2s ease; + width: 100%; +} + +.menu-action-btn:hover { + background: rgba(0, 102, 204, 0.08); + color: var(--accent-blue); + text-decoration: none; +} + +.menu-action-btn iconify-icon { + color: var(--text-gray); + flex-shrink: 0; + transition: color 0.2s ease; +} + +.menu-action-btn:hover iconify-icon { + color: var(--accent-blue); } /* Section icons in titles */ diff --git a/static/css/print.css b/static/css/print.css index 5ca0204..cbd4a3d 100644 --- a/static/css/print.css +++ b/static/css/print.css @@ -1,31 +1,80 @@ -/* Print Styles - A4 Optimized */ +/* 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; - margin: 0; + size: A4 portrait; + margin: 8mm; /* Minimal printer margins */ } body { - background: white; - margin: 0; - padding: 0; + background: white !important; + margin: 0 !important; + padding: 0 !important; } - /* Hide non-print elements */ + /* =================================== + HIDE NON-PRINT ELEMENTS + =================================== */ .no-print, .action-bar, - footer { + .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; } - /* CV Container - full page */ + /* 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%; @@ -34,53 +83,166 @@ gap: 0; } + .cv-container.theme-clean { + padding: 0; + } + + /* =================================== + CV PAPER - Reduced Padding (20mm → 12mm) + =================================== */ .cv-paper { - width: 210mm; - min-height: 297mm; - background: white; - padding: 20mm; - box-shadow: none; - margin: 0; + 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; } - /* Force page breaks where needed */ + /* =================================== + 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: always; + 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, - .cv-section, .experience-item, - .project-item { - page-break-inside: avoid; + .project-item, + .course-item, + .award-item { + page-break-inside: avoid !important; + break-inside: avoid !important; } - /* Header */ + /* 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: 15mm; + 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; } - .cv-photo { - width: 80px; - height: 80px; - border-width: 2px; + .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 */ } - /* Sections */ .section-title { - font-size: 12pt; - margin-top: 10mm; + 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 { @@ -88,40 +250,174 @@ line-height: 1.5; } - /* Experience */ + /* =================================== + EXPERIENCE - REDUCED SPACING (60px → 26px) + =================================== */ .experience-item { - margin-bottom: 8mm; - padding-bottom: 8mm; + 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, + .company-link { font-size: 9pt; } - .experience-period { + .experience-period, + .experience-location, + .experience-duration { font-size: 8pt; } - .short-desc, - .responsibilities li { - font-size: 9pt; - line-height: 1.4; + .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; } - .company-logo { - width: 25px; - height: 25px; - } - - /* Education, Skills, etc */ + /* =================================== + EDUCATION & SKILLS + =================================== */ .degree, .skill-title, .project-name { @@ -134,64 +430,190 @@ font-size: 8.5pt; } - /* Certifications & Awards */ - .cert-item, - .award-item { - font-size: 8.5pt; - margin-bottom: 2mm; + .education-item { + margin-bottom: 3mm; } - /* Languages */ + /* =================================== + 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 { - grid-template-columns: repeat(3, 1fr); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2mm; } .language-item { - font-size: 8.5pt; + font-size: 9pt !important; + line-height: 1.3 !important; + margin-bottom: 1mm !important; } - /* Contact info */ + .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; } - /* Links - print URLs */ + /* =================================== + 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; } - /* Ensure borders print */ - .cv-header { - border-bottom: 1.5pt solid #2d2d2d !important; + /* =================================== + BADGES - Hidden for minimal print + =================================== */ + .current-badge, + .expired-badge, + .maintained-badge { + display: none !important; } - .section-title { - border-bottom: 0.5pt solid #dddddd !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; } - .experience-item { - border-bottom: 0.5pt solid #dddddd !important; - } - - .experience-item:last-child { - border-bottom: none !important; - } - - /* Print both short and long version content */ + /* 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-short .short-desc { - display: none !important; + .cv-long .responsibilities { + display: block !important; } - /* Always print full CV in long mode */ - .cv-long .short-desc { - display: none !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; } } diff --git a/templates/index.html b/templates/index.html index 3430ec1..e53effa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -194,19 +194,12 @@ @@ -361,6 +442,17 @@ menu.classList.remove('menu-hover'); hamburgerBtn.setAttribute('aria-expanded', 'false'); }); + + // Position submenu dynamically + const submenuTrigger = document.querySelector('.menu-item-submenu'); + const submenuContent = document.querySelector('.submenu-content'); + + if (submenuTrigger && submenuContent) { + submenuTrigger.addEventListener('mouseenter', function() { + const triggerRect = submenuTrigger.getBoundingClientRect(); + submenuContent.style.top = `${triggerRect.top}px`; + }); + } }); // Legacy toggle function - kept for compatibility @@ -486,13 +578,21 @@ } function toggleCVLength() { - const toggle = document.getElementById('lengthToggle'); + const headerToggle = document.getElementById('lengthToggle'); + const menuToggle = document.getElementById('lengthToggleMenu'); const paper = document.querySelector('.cv-paper'); + // Get the state from whichever toggle was clicked + const isChecked = event?.target?.id === 'lengthToggleMenu' ? menuToggle?.checked : headerToggle?.checked; + + // Sync both toggles + if (headerToggle) headerToggle.checked = isChecked; + if (menuToggle) menuToggle.checked = isChecked; + // Save current scroll position const currentScrollY = window.scrollY || window.pageYOffset; - if (toggle.checked) { + if (isChecked) { paper.classList.add('cv-long'); paper.classList.remove('cv-short'); localStorage.setItem('cv-length', 'long'); @@ -509,13 +609,21 @@ } function toggleLogos() { - const toggle = document.getElementById('logoToggle'); + const headerToggle = document.getElementById('logoToggle'); + const menuToggle = document.getElementById('logoToggleMenu'); const paper = document.querySelector('.cv-paper'); + // Get the state from whichever toggle was clicked + const isChecked = event?.target?.id === 'logoToggleMenu' ? menuToggle?.checked : headerToggle?.checked; + + // Sync both toggles + if (headerToggle) headerToggle.checked = isChecked; + if (menuToggle) menuToggle.checked = isChecked; + // Save current scroll position const currentScrollY = window.scrollY || window.pageYOffset; - if (toggle.checked) { + if (isChecked) { paper.classList.add('show-logos'); localStorage.setItem('cv-logos', 'show'); } else { @@ -530,10 +638,18 @@ } function toggleTheme() { - const toggle = document.getElementById('themeToggle'); + const headerToggle = document.getElementById('themeToggle'); + const menuToggle = document.getElementById('themeToggleMenu'); const container = document.querySelector('.cv-container'); - if (toggle.checked) { + // Get the state from whichever toggle was clicked + const isChecked = event?.target?.id === 'themeToggleMenu' ? menuToggle?.checked : headerToggle?.checked; + + // Sync both toggles + if (headerToggle) headerToggle.checked = isChecked; + if (menuToggle) menuToggle.checked = isChecked; + + if (isChecked) { container.classList.add('theme-clean'); localStorage.setItem('cv-theme', 'clean'); } else { @@ -542,25 +658,38 @@ } } - // Print Friendly - applies Clean theme before printing + // Print Friendly - Apply Clean Theme + Short Version for minimal printing function printFriendly() { const container = document.querySelector('.cv-container'); + const paper = document.querySelector('.cv-paper'); const wasClean = container.classList.contains('theme-clean'); + const wasLong = paper.classList.contains('cv-long'); - // Apply clean theme for printing + // Apply clean theme for minimal print (no sidebars, no header, no icons) if (!wasClean) { container.classList.add('theme-clean'); } - // Print - window.print(); + // Force SHORT version for print (hide detailed content) + paper.classList.remove('cv-long'); + paper.classList.add('cv-short'); - // Restore original theme after print dialog + // Small delay to let CSS apply setTimeout(() => { - if (!wasClean) { - container.classList.remove('theme-clean'); - } - }, 100); + window.print(); + + // Restore original theme and length after print dialog closes + setTimeout(() => { + if (!wasClean) { + container.classList.remove('theme-clean'); + } + // Restore original length + if (wasLong) { + paper.classList.remove('cv-short'); + paper.classList.add('cv-long'); + } + }, 100); + }, 50); } // Initialize with saved preferences or defaults @@ -595,30 +724,43 @@ // Restore CV length preference const savedLength = localStorage.getItem('cv-length') || 'short'; - if (savedLength === 'long') { + const lengthChecked = savedLength === 'long'; + if (lengthChecked) { paper.classList.add('cv-long'); paper.classList.remove('cv-short'); - document.getElementById('lengthToggle').checked = true; } else { paper.classList.add('cv-short'); paper.classList.remove('cv-long'); - document.getElementById('lengthToggle').checked = false; } + // Sync both header and menu toggles + const headerLengthToggle = document.getElementById('lengthToggle'); + const menuLengthToggle = document.getElementById('lengthToggleMenu'); + if (headerLengthToggle) headerLengthToggle.checked = lengthChecked; + if (menuLengthToggle) menuLengthToggle.checked = lengthChecked; // Restore logos preference const savedLogos = localStorage.getItem('cv-logos') || 'show'; - if (savedLogos === 'show') { + const logosChecked = savedLogos === 'show'; + if (logosChecked) { paper.classList.add('show-logos'); - document.getElementById('logoToggle').checked = true; } else { paper.classList.remove('show-logos'); - document.getElementById('logoToggle').checked = false; } + // Sync both header and menu toggles + const headerLogoToggle = document.getElementById('logoToggle'); + const menuLogoToggle = document.getElementById('logoToggleMenu'); + if (headerLogoToggle) headerLogoToggle.checked = logosChecked; + if (menuLogoToggle) menuLogoToggle.checked = logosChecked; // Restore theme preference const savedTheme = localStorage.getItem('cv-theme') || 'default'; - if (savedTheme === 'clean') { - document.getElementById('themeToggle').checked = true; + const themeChecked = savedTheme === 'clean'; + // Sync both header and menu toggles + const headerThemeToggle = document.getElementById('themeToggle'); + const menuThemeToggle = document.getElementById('themeToggleMenu'); + if (headerThemeToggle) headerThemeToggle.checked = themeChecked; + if (menuThemeToggle) menuThemeToggle.checked = themeChecked; + if (themeChecked) { toggleTheme(); } });