From f1e362bc305f109dfc708f9c6dd7786e0dbf9096 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Sun, 30 Nov 2025 11:13:47 +0000 Subject: [PATCH] refactor: Clean up CSS structure and separate print.css - Delete orphaned CSS files (color-theme.css, logo-toggle.css, skeleton.css, main.new.css) - replaced by modular equivalents - Delete 08-contexts/_print.css - wrongly created during modularization - Remove 08-contexts folder (now empty) - Add print.css as standalone with media="print" in HTML - Update stale comments referencing old file names - Remove _print.css import from main.css print.css remains standalone and will NOT be bundled, as it's a special case loaded only when printing (media="print"). --- static/css/01-foundation/_variables.css | 2 +- static/css/03-components/_cv-section.css | 2 +- static/css/03-components/_experience.css | 2 +- .../css/04-interactive/_scroll-behavior.css | 4 +- static/css/04-interactive/_toggles.css | 2 +- static/css/08-contexts/_print.css | 722 ------------------ static/css/color-theme.css | 333 -------- static/css/logo-toggle.css | 229 ------ static/css/main.css | 3 +- static/css/main.new.css | 36 - static/css/skeleton.css | 603 --------------- templates/index.html | 2 + 12 files changed, 9 insertions(+), 1931 deletions(-) delete mode 100644 static/css/08-contexts/_print.css delete mode 100644 static/css/color-theme.css delete mode 100644 static/css/logo-toggle.css delete mode 100644 static/css/main.new.css delete mode 100644 static/css/skeleton.css diff --git a/static/css/01-foundation/_variables.css b/static/css/01-foundation/_variables.css index 5a82cd4..90c0041 100644 --- a/static/css/01-foundation/_variables.css +++ b/static/css/01-foundation/_variables.css @@ -13,7 +13,7 @@ --accent-blue: #0066cc; --border-gray: #dddddd; - /* Theme System - These get overridden by color-theme.css */ + /* Theme System - These get overridden by _themes.css */ /* Page Background */ --page-bg: #d6d6d6; diff --git a/static/css/03-components/_cv-section.css b/static/css/03-components/_cv-section.css index d646e66..525a68b 100644 --- a/static/css/03-components/_cv-section.css +++ b/static/css/03-components/_cv-section.css @@ -95,7 +95,7 @@ } /* Experience */ -/* Experience item layout moved to logo-toggle.css */ +/* Experience item layout moved to _toggles.css */ .experience-header { margin-bottom: 0.6rem; diff --git a/static/css/03-components/_experience.css b/static/css/03-components/_experience.css index 26a0b39..1d89f5c 100644 --- a/static/css/03-components/_experience.css +++ b/static/css/03-components/_experience.css @@ -1,5 +1,5 @@ /* Experience */ -/* Experience item layout moved to logo-toggle.css */ +/* Experience item layout moved to _toggles.css */ .experience-header { margin-bottom: 0.6rem; diff --git a/static/css/04-interactive/_scroll-behavior.css b/static/css/04-interactive/_scroll-behavior.css index 8aab9a3..843569a 100644 --- a/static/css/04-interactive/_scroll-behavior.css +++ b/static/css/04-interactive/_scroll-behavior.css @@ -190,7 +190,7 @@ left: calc(50% - 55px) !important; /* Third button */ } - /* Theme switcher button - fourth position (defined in color-theme.css) */ + /* Theme switcher button - fourth position (defined in _themes.css) */ /* left: calc(50% + 5px) !important; */ .info-button { @@ -219,7 +219,7 @@ left: calc(50% - 85px) !important; /* Second button */ } - /* Theme switcher on mobile - third position (see color-theme.css for override) */ + /* Theme switcher on mobile - third position (see _themes.css for override) */ .is-mobile-device .info-button { left: calc(50% + 35px) !important; /* Fourth button */ diff --git a/static/css/04-interactive/_toggles.css b/static/css/04-interactive/_toggles.css index c20f134..8ff79c4 100644 --- a/static/css/04-interactive/_toggles.css +++ b/static/css/04-interactive/_toggles.css @@ -227,7 +227,7 @@ height: auto; } -/* Company icons visible in print - styling controlled by print.css */ +/* Company icons visible in print - styling controlled by _print.css */ /* Mobile responsiveness */ @media (max-width: 768px) { diff --git a/static/css/08-contexts/_print.css b/static/css/08-contexts/_print.css deleted file mode 100644 index f8ce3e9..0000000 --- a/static/css/08-contexts/_print.css +++ /dev/null @@ -1,722 +0,0 @@ -/* Print Styles - A4 Optimized - Consolidated & Fixed */ - -@media print { - /* =================================== - CRITICAL: FORCE LIGHT MODE FOR ALL PDFs - =================================== */ - /* PDF generation MUST ALWAYS use light mode colors */ - /* This overrides ANY color theme (dark/auto/light) */ - *, - :root, - [data-color-theme="dark"], - [data-color-theme="auto"], - [data-color-theme="light"], - html, - body { - /* Page Background - Softer version for light mode */ - --page-bg: #b8bbbe !important; - - /* Paper/Card Backgrounds */ - --paper-bg: #ffffff !important; - --paper-secondary-bg: #f5f5f5 !important; - - /* Text Colors - Dark text for light background */ - --text-primary: #1a1a1a !important; - --text-secondary: #333333 !important; - --text-muted: #666666 !important; - --text-light: #999999 !important; - - /* Action Bar & Navigation */ - --action-bar-bg: #2b2b2b !important; - --action-bar-text: #ffffff !important; - --action-bar-text-muted: rgba(255, 255, 255, 0.85) !important; - - /* Borders & Dividers */ - --border-color: #333333 !important; - --border-light: #e0e0e0 !important; - --icon-border: #ddd !important; - --item-separator: rgba(0, 0, 0, 0.1) !important; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1) !important; - --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15) !important; - --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5) !important; - - /* Interactive Elements */ - --button-bg: transparent !important; - --button-bg-hover: rgba(0, 0, 0, 0.05) !important; - --button-bg-active: rgba(0, 0, 0, 0.1) !important; - - /* Accent Colors */ - --accent-blue: #0066cc !important; - --accent-green: #27ae60 !important; - - /* Sidebar (for non-clean theme) */ - --sidebar-bg: #d1d4d2 !important; - - /* Legacy CV content variables - light mode */ - --text-dark: #1a1a1a !important; - --text-gray: #333333 !important; - } - - /* =================================== - 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 - =================================== */ - /* IMPORTANT: print.css is ONLY for clean/print-friendly version */ - /* Extended version uses screen rendering, NOT print CSS */ - .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 { - font-size: 7pt !important; - padding: 1px 4px !important; - } - - .live-badge iconify-icon { - width: 10px !important; - height: 10px !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; - } -} diff --git a/static/css/color-theme.css b/static/css/color-theme.css deleted file mode 100644 index 1c85959..0000000 --- a/static/css/color-theme.css +++ /dev/null @@ -1,333 +0,0 @@ -/* ============================================================================== - COLOR THEME SYSTEM - ============================================================================== */ -/* - IMPORTANT: This is the COLOR theme system (light/dark/auto) - This is SEPARATE from the LAYOUT theme (.theme-clean) - - - COLOR theme: Controls backgrounds, text colors, shadows - - LAYOUT theme (.theme-clean): Controls sidebars, layout structure - - Both systems work independently and can be combined. -*/ - -/* ============================================================================== - LIGHT THEME (DEFAULT) - ============================================================================== */ -:root { - /* Page Background - Softer version of dark theme */ - --page-bg: #b8bbbe; - - /* TEST: Woven Fabric Pattern - Light (TESTING - can be removed later) */ - --page-bg-pattern: repeating-linear-gradient(0deg, rgba(75, 85, 99, 0.08), rgba(75, 85, 99, 0.08) 2px, transparent 2px, transparent 6px), - repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.06), rgba(107, 114, 128, 0.06) 2px, transparent 2px, transparent 6px), - repeating-linear-gradient(0deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px), - repeating-linear-gradient(90deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px); - - /* Paper/Card Backgrounds */ - --paper-bg: #ffffff; - --paper-secondary-bg: #f5f5f5; - - /* Text Colors */ - --text-primary: #1a1a1a; - --text-secondary: #333333; - --text-muted: #666666; - --text-light: #999999; - - /* Action Bar & Navigation */ - --action-bar-bg: #2b2b2b; - --action-bar-text: #ffffff; - --action-bar-text-muted: rgba(255, 255, 255, 0.85); - - /* Borders & Dividers */ - --border-color: #ffffff; - --border-light: #e0e0e0; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); - --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15); - --shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.06); - - /* Interactive Elements */ - --button-bg: transparent; - --button-bg-hover: rgba(0, 0, 0, 0.05); - --button-bg-active: rgba(0, 0, 0, 0.1); - - /* Accent Colors (unchanged in dark mode) */ - --accent-blue: #0066cc; - --accent-green: #27ae60; - - /* Sidebar (for non-clean theme) */ - --sidebar-bg: #d1d4d2; - - /* Legacy CV content variables - theme-aware overrides */ - --text-dark: #1a1a1a; /* Dark text for light background */ - --text-gray: #333333; /* Secondary text for light background */ -} - -/* ============================================================================== - DARK THEME - ============================================================================== */ -[data-color-theme="dark"] { - /* Page Background - Original background */ - --page-bg: rgb(82, 86, 89); - - /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */ - --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px), - repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px); - - /* Paper/Card Backgrounds */ - --paper-bg: #1a1a1a; - --paper-secondary-bg: #2a2a2a; - - /* Text Colors */ - --text-primary: #e0e0e0; - --text-secondary: #d0d0d0; - --text-muted: #b0b0b0; - --text-light: #808080; - - /* Action Bar & Navigation */ - --action-bar-bg: #1a1a1a; - --action-bar-text: #e0e0e0; - --action-bar-text-muted: rgba(224, 224, 224, 0.85); - - /* Borders & Dividers */ - --border-color: #404040; - --border-light: #333333; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); - - /* Interactive Elements */ - --button-bg: transparent; - --button-bg-hover: rgba(255, 255, 255, 0.05); - --button-bg-active: rgba(255, 255, 255, 0.1); - - /* Accent Colors - slightly brighter in dark mode */ - --accent-blue: #3399ff; - --accent-green: #2ecc71; - - /* Sidebar (for non-clean theme) */ - --sidebar-bg: #2a2a2a; - - /* Legacy CV content variables - theme-aware overrides */ - --text-dark: #e0e0e0; /* Light text for dark background */ - --text-gray: #d0d0d0; /* Secondary text for dark background */ -} - -/* ============================================================================== - AUTO THEME - Follows System Preference - ============================================================================== */ -@media (prefers-color-scheme: dark) { - [data-color-theme="auto"] { - /* Page Background - Original background */ - --page-bg: rgb(82, 86, 89); - - /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */ - --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px), - repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px); - - /* Paper/Card Backgrounds */ - --paper-bg: #1a1a1a; - --paper-secondary-bg: #2a2a2a; - - /* Text Colors */ - --text-primary: #e0e0e0; - --text-secondary: #d0d0d0; - --text-muted: #b0b0b0; - --text-light: #808080; - - /* Action Bar & Navigation */ - --action-bar-bg: #1a1a1a; - --action-bar-text: #e0e0e0; - --action-bar-text-muted: rgba(224, 224, 224, 0.85); - - /* Borders & Dividers */ - --border-color: #404040; - --border-light: #333333; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); - - /* Interactive Elements */ - --button-bg: transparent; - --button-bg-hover: rgba(255, 255, 255, 0.05); - --button-bg-active: rgba(255, 255, 255, 0.1); - - /* Accent Colors - slightly brighter in dark mode */ - --accent-blue: #3399ff; - --accent-green: #2ecc71; - - /* Sidebar (for non-clean theme) */ - --sidebar-bg: #2a2a2a; - - /* Legacy CV content variables - theme-aware overrides */ - --text-dark: #e0e0e0; /* Light text for dark background */ - --text-gray: #d0d0d0; /* Secondary text for dark background */ - } -} - -/* ============================================================================== - THEME SWITCHER BUTTON STYLES - Dynamic colors based on theme mode - ============================================================================== */ -.color-theme-switcher { - position: fixed; - bottom: 14rem; /* Middle position - between print (18rem) and shortcuts (10rem) */ - left: 2rem; - width: 50px; - height: 50px; - background: var(--black-bar); - color: white; - border: none; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - transition: all 0.3s ease; - z-index: 999; - opacity: 0.6; -} - -/* Dynamic colors ONLY on hover based on active theme mode */ -.color-theme-switcher:hover[data-theme-mode="light"] { - background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */ -} - -.color-theme-switcher:hover[data-theme-mode="dark"] { - background: #013c77 !important; /* Dark nighty blue for dark mode */ -} - -.color-theme-switcher:hover[data-theme-mode="auto"] { - background: #9b59b6 !important; /* Purple for auto mode (mix of both) */ -} - -.color-theme-switcher:hover { - opacity: 1 !important; - transform: translateY(-3px); - box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); -} - -/* At-bottom state - dynamic colors based on theme mode (matches hover) */ -.color-theme-switcher.at-bottom[data-theme-mode="light"] { - opacity: 1; - background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */ -} - -.color-theme-switcher.at-bottom[data-theme-mode="dark"] { - opacity: 1; - background: #013c77 !important; /* Dark nighty blue for dark mode */ -} - -.color-theme-switcher.at-bottom[data-theme-mode="auto"] { - opacity: 1; - background: #9b59b6 !important; /* Purple for auto mode */ -} - -.color-theme-switcher iconify-icon { - color: white !important; - transition: color 0.3s ease; -} - -.color-theme-switcher:hover iconify-icon { - color: white !important; -} - -/* Hide the internal theme buttons - we'll cycle through on click */ -.theme-option-btn { - display: none; -} - -/* ============================================================================== - ICON COLOR PRESERVATION - ============================================================================== */ -/* Ensure all iconify icons keep their intended colors across themes */ - -/* Section icons - keep their brand colors */ -.section-icon iconify-icon, -.project-icon iconify-icon, -.course-icon iconify-icon, -.default-project-icon iconify-icon { - color: inherit !important; -} - -/* Toggle switch icons - keep their state-specific colors */ -/* Note: Already defined in main.css with !important - just ensure they're not overridden */ - -/* Hamburger menu and site icons */ -.site-icon iconify-icon, -.site-icon-mobile iconify-icon { - color: white !important; -} - -/* CV content icons */ -.cv-paper iconify-icon { - color: inherit !important; -} - -/* Error toast icon */ -.error-icon iconify-icon { - color: #dc3545 !important; -} - -/* Mobile adjustments */ -@media (max-width: 900px) { - .color-theme-switcher { - position: fixed !important; - bottom: 1.5rem !important; - left: auto !important; - right: auto !important; - width: 50px !important; - height: 50px !important; - opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */ - transform: none !important; - /* Desktop mobile view: 6 buttons with shortcuts */ - /* Download, Print, Shortcuts, Theme, Info, Back-to-top */ - /* Total width: 6 * 50px + 5 * 10px = 350px */ - left: calc(50% + 5px) !important; /* Fourth button */ - } - - /* REAL MOBILE DEVICES: 5 buttons without shortcuts */ - /* Download, Print, Theme, Info, Back-to-top */ - /* Total width: 5 * 50px + 4 * 10px = 290px */ - .is-mobile-device .color-theme-switcher { - left: calc(50% - 25px) !important; /* Third button (no gap) */ - } - - /* Show theme colors at full opacity on mobile (no transparency with blur bar) */ - .color-theme-switcher[data-theme-mode="light"] { - background: rgba(212, 178, 0, 1) !important; /* Gold - full opacity */ - opacity: 1 !important; /* Override base opacity */ - } - - .color-theme-switcher[data-theme-mode="dark"] { - background: rgba(1, 60, 119, 1) !important; /* Blue - full opacity */ - opacity: 1 !important; /* Override base opacity */ - } - - .color-theme-switcher[data-theme-mode="auto"] { - background: rgba(155, 89, 182, 1) !important; /* Purple - full opacity */ - opacity: 1 !important; /* Override base opacity */ - } - - /* Full color opacity on hover */ - .color-theme-switcher:hover[data-theme-mode="light"] { - background: rgba(212, 178, 0, 1) !important; /* Full gold opacity */ - transform: translateY(-3px) !important; - } - - .color-theme-switcher:hover[data-theme-mode="dark"] { - background: rgba(1, 60, 119, 1) !important; /* Full blue opacity */ - transform: translateY(-3px) !important; - } - - .color-theme-switcher:hover[data-theme-mode="auto"] { - background: rgba(155, 89, 182, 1) !important; /* Full purple opacity */ - transform: translateY(-3px) !important; - } -} diff --git a/static/css/logo-toggle.css b/static/css/logo-toggle.css deleted file mode 100644 index 004cd9f..0000000 --- a/static/css/logo-toggle.css +++ /dev/null @@ -1,229 +0,0 @@ -/* Toggle Components - Unified Design */ -.language-toggle, -.cv-length-toggle, -.logo-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - white-space: nowrap; -} - -.toggle-switch { - display: inline-block; - cursor: pointer; - user-select: none; - position: relative; -} - -.toggle-switch input[type="checkbox"] { - position: absolute; - opacity: 0; - width: 0; - height: 0; -} - -.toggle-slider { - position: relative; - display: inline-block; - width: 50px; - height: 26px; - background-color: #555; - border-radius: 26px; - transition: background-color 0.3s ease; -} - -.toggle-slider::after { - content: ''; - position: absolute; - width: 20px; - height: 20px; - border-radius: 50%; - background-color: white; - top: 3px; - left: 3px; - transition: transform 0.3s ease; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); -} - -.toggle-switch input[type="checkbox"]:checked + .toggle-slider { - background-color: var(--accent-blue); -} - -.toggle-switch input[type="checkbox"]:checked + .toggle-slider::after { - transform: translateX(24px); -} - -.toggle-switch input[type="checkbox"]:focus + .toggle-slider { - box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2); -} - -.toggle-label-left, -.toggle-label-right { - font-size: 0.8rem; - font-weight: 500; - color: #999; - transition: all 0.3s ease; - white-space: nowrap; - display: flex; - align-items: center; - justify-content: center; - height: 28px; -} - -/* Flag icons - special styling */ -.flag-icon { - border-radius: 50%; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -/* Highlight active label/icon based on parent container state */ -.language-toggle:has(#langToggle:not(:checked)) .toggle-label-left, -.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-left, -.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-left { - color: #fff; - opacity: 1; -} - -.language-toggle:has(#langToggle:checked) .toggle-label-right, -.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-right, -.logo-toggle:has(#logoToggle:checked) .toggle-label-right { - color: #fff; - opacity: 1; -} - -/* Dim inactive icons */ -.language-toggle:has(#langToggle:not(:checked)) .toggle-label-right, -.cv-length-toggle:has(#lengthToggle:not(:checked)) .toggle-label-right, -.logo-toggle:has(#logoToggle:not(:checked)) .toggle-label-right { - opacity: 0.4; -} - -.language-toggle:has(#langToggle:checked) .toggle-label-left, -.cv-length-toggle:has(#lengthToggle:checked) .toggle-label-left, -.logo-toggle:has(#logoToggle:checked) .toggle-label-left { - opacity: 0.4; -} - -/* Experience Item with Logo Support */ -.experience-item { - margin-bottom: 2.5rem; - padding-bottom: 2rem; - border-bottom: 2px solid var(--icon-border); - page-break-inside: avoid; - display: flex; - gap: 1.2rem; - position: relative; - transition: gap 0.3s ease-in-out; -} - -.experience-item:last-child { - border-bottom: none; - padding-bottom: 0; -} - -/* Adjust gap when icons are hidden */ -.cv-paper:not(.show-icons) .experience-item { - gap: 0; -} - -.company-logo { - display: block; - flex-shrink: 0; -} - -.company-logo img { - width: 80px; - height: 80px; - object-fit: contain; - border-radius: 4px; - border: 1px solid var(--icon-border); - background: white; - padding: 10px; -} - -.default-company-icon { - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; - border: 1px solid var(--icon-border); - background: #f5f5f5; - color: #999; - padding: 10px; -} - -.experience-content { - flex: 1; - min-width: 0; /* Prevents flex item from overflowing */ -} - -/* Animate icons with fade and scale */ -.company-logo, -.award-logo { - overflow: hidden; - transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out; - opacity: 1; - transform: scale(1); - width: auto; - height: auto; -} - -/* Hide icons when toggle is OFF - with animation */ -.cv-paper:not(.show-icons) .company-logo, -.cv-paper:not(.show-icons) .award-logo { - opacity: 0; - transform: scale(0.8); - width: 0; - height: 0; - margin: 0; - padding: 0; - pointer-events: none; - overflow: hidden; -} - -/* Show icons when toggle is ON (default) - with animation */ -.show-icons .company-logo, -.show-icons .award-logo { - opacity: 1; - transform: scale(1); - width: auto; - height: auto; -} - -/* Company icons visible in print - styling controlled by print.css */ - -/* Mobile responsiveness */ -@media (max-width: 768px) { - .logo-toggle { - order: 3; /* Move to bottom on mobile */ - } - - .toggle-label { - font-size: 0.85rem; - } - - .toggle-slider { - width: 38px; - height: 20px; - } - - .toggle-slider::after { - width: 14px; - height: 14px; - } - - .toggle-switch input[type="checkbox"]:checked + .toggle-slider::after { - transform: translateX(18px); - } - - .company-logo img { - width: 40px; - height: 40px; - } -} diff --git a/static/css/main.css b/static/css/main.css index 2e55590..783f5f3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -41,5 +41,4 @@ /* 06 - Effects */ @import './06-effects/_skeleton.css'; -/* 08 - Contexts */ -@import './08-contexts/_print.css'; +/* NOTE: print.css is loaded separately in HTML with media="print" */ diff --git a/static/css/main.new.css b/static/css/main.new.css deleted file mode 100644 index 2e1c228..0000000 --- a/static/css/main.new.css +++ /dev/null @@ -1,36 +0,0 @@ -/* ============================================================================ - MAIN.CSS - Entry Point (New Modular Structure) - ============================================================================ */ - -/* 01 - Foundation */ -@import './01-foundation/_reset.css'; -@import './01-foundation/_variables.css'; -@import './01-foundation/_typography.css'; -@import './01-foundation/_themes.css'; - -/* 02 - Layout */ -@import './02-layout/_container.css'; -@import './02-layout/_page.css'; -@import './02-layout/_grid.css'; -@import './02-layout/_paper.css'; - -/* 03 - Components */ -@import './03-components/_action-bar.css'; -@import './03-components/_sidebar.css'; -@import './03-components/_cv-header.css'; -@import './03-components/_cv-section.css'; -@import './03-components/_experience.css'; -@import './03-components/_projects.css'; -@import './03-components/_courses.css'; -@import './03-components/_education.css'; -@import './03-components/_languages.css'; - -/* 04 - Interactive (includes hamburger, buttons, modals, zoom - TO BE SPLIT LATER) */ -@import './04-interactive/_toggles.css'; -@import './04-interactive/_remaining.css'; - -/* 06 - Effects */ -@import './06-effects/_skeleton.css'; - -/* 08 - Contexts */ -@import './08-contexts/_print.css'; diff --git a/static/css/skeleton.css b/static/css/skeleton.css deleted file mode 100644 index b181f49..0000000 --- a/static/css/skeleton.css +++ /dev/null @@ -1,603 +0,0 @@ -/** - * Component-Level Skeleton Loaders for Language Transitions - * ========================================================== - * Each CV component has dual-state structure: - * - .actual-content (real CV content) - * - .skeleton-content (gray pulsing placeholders) - * - * Loading state controlled via .loading class on component wrapper - */ - -/* ======================================================================== - BASE SKELETON STYLES - ======================================================================== */ - -.skeleton { - background: linear-gradient( - 90deg, - #f0f0f0 0%, - #e8e8e8 20%, - #f0f0f0 40%, - #f0f0f0 100% - ); - background-size: 200% 100%; - animation: skeleton-shimmer 1.8s ease-in-out infinite; - border-radius: 4px; - will-change: background-position; -} - -@keyframes skeleton-shimmer { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} - -/* ======================================================================== - COMPONENT WRAPPER STATE TOGGLING - ======================================================================== */ - -/* Default state: Show actual content, hide skeleton */ -.component-wrapper { - position: relative; -} - -.component-wrapper .actual-content { - opacity: 1; - transition: opacity 250ms ease-out; -} - -.component-wrapper .skeleton-content { - position: absolute; - top: 0; - left: 0; - right: 0; - opacity: 0; - pointer-events: none; - transition: opacity 250ms ease-out; -} - -/* Loading state: Hide actual content, show skeleton */ -/* Triggered by manual .loading class OR when parent page container has .loading */ -.component-wrapper.loading .actual-content, -.loading .component-wrapper .actual-content { - opacity: 0; - pointer-events: none; -} - -.component-wrapper.loading .skeleton-content, -.loading .component-wrapper .skeleton-content { - opacity: 1; - pointer-events: all; -} - -/* ======================================================================== - SKELETON SHAPE DEFINITIONS - ======================================================================== */ - -/* Header Section Skeleton */ -/* Matches actual header layout with photo absolutely positioned on right */ -.skeleton-header { - position: relative; - padding-right: 185px; /* Match .cv-header-left padding */ - min-height: 200px; /* Ensure space for photo */ -} - -.skeleton-header-text { - position: relative; - z-index: 1; -} - -.skeleton-name { - height: 40px; /* Larger to match h1 */ - width: 75%; - margin-bottom: 12px; -} - -.skeleton-experience-years { - height: 24px; /* Larger subtitle */ - width: 55%; - margin-bottom: 24px; -} - -.skeleton-photo { - width: 150px; /* Match actual photo */ - height: 200px; /* Match actual photo */ - border-radius: 0; /* No border-radius on actual photo */ - border: 3px solid #e8e8e8; /* Match photo border style */ - - /* Absolute positioning to match actual layout */ - position: absolute; - top: 15px; - right: 15px; - flex-shrink: 0; -} - -.skeleton-intro { - height: 90px; /* Taller for 3-4 lines of text */ - width: 100%; - margin-top: 12px; -} - -/* Section Title Skeleton */ -.skeleton-section-title { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 16px; -} - -.skeleton-icon { - width: 24px; - height: 24px; - border-radius: 4px; - flex-shrink: 0; -} - -.skeleton-title-text { - height: 24px; - width: 40%; -} - -/* Skill Item Skeleton (Sidebar) */ -.skeleton-skill-category { - margin-bottom: 20px; -} - -.skeleton-skill-title { - height: 20px; - width: 60%; - margin-bottom: 12px; -} - -.skeleton-skill-items { - display: flex; - flex-direction: column; - gap: 8px; -} - -.skeleton-skill-item { - height: 32px; - width: 100%; -} - -.skeleton-skill-item:nth-child(2) { - width: 85%; -} - -.skeleton-skill-item:nth-child(3) { - width: 90%; -} - -.skeleton-skill-item:nth-child(4) { - width: 75%; -} - -/* Experience Entry Skeleton */ -.skeleton-experience-item { - display: flex; - gap: 16px; - margin-bottom: 24px; -} - -.skeleton-company-logo { - width: 60px; - height: 60px; - border-radius: 8px; - flex-shrink: 0; -} - -.skeleton-experience-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; -} - -/* NEW: Structural skeleton lines for experience */ -.skeleton-position-line { - height: 20px; - width: 80%; -} - -.skeleton-date-line { - height: 14px; - width: 50%; -} - -.skeleton-description-line { - height: 16px; - width: 100%; - margin-top: 4px; -} - -.skeleton-responsibility-line { - height: 14px; - width: 100%; - margin-left: 16px; /* Indent like list items */ -} - -/* Legacy styles (keeping for backward compatibility) */ -.skeleton-position { - height: 20px; - width: 80%; -} - -.skeleton-company-info { - height: 16px; - width: 60%; -} - -.skeleton-description { - height: 40px; - width: 100%; - margin-top: 4px; -} - -.skeleton-description.short { - width: 85%; -} - -/* Section Skeleton Base */ -.skeleton-section { - padding: 16px 0; -} - -.skeleton-section-title { - height: 28px; - width: 35%; - margin-bottom: 20px; -} - -/* Education Item Skeleton */ -.skeleton-education-item { - height: 48px; - width: 100%; - margin-bottom: 12px; -} - -.skeleton-education-item:last-child { - margin-bottom: 0; -} - -/* Skills Summary Skeleton */ -.skeleton-summary-paragraph { - height: 18px; - width: 100%; - margin-bottom: 10px; -} - -.skeleton-summary-paragraph:last-child { - margin-bottom: 0; -} - -/* Award Item Skeleton */ -.skeleton-award-item { - display: flex; - gap: 16px; - margin-bottom: 24px; -} - -.skeleton-award-logo { - width: 60px; - height: 60px; - border-radius: 8px; - flex-shrink: 0; -} - -.skeleton-award-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; -} - -/* NEW: Structural skeleton lines for awards */ -.skeleton-award-title-line { - height: 20px; - width: 70%; -} - -.skeleton-award-info-line { - height: 14px; - width: 50%; -} - -/* Legacy styles (keeping for backward compatibility) */ -.skeleton-award-title { - height: 20px; - width: 70%; -} - -.skeleton-award-info { - height: 16px; - width: 50%; -} - -.skeleton-award-description { - height: 40px; - width: 100%; - margin-top: 4px; -} - -/* Project Item Skeleton */ -.skeleton-project-item { - display: flex; - gap: 16px; - margin-bottom: 24px; -} - -.skeleton-project-icon { - width: 80px; - height: 80px; - border-radius: 8px; - flex-shrink: 0; -} - -.skeleton-project-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; -} - -/* NEW: Structural skeleton lines for projects */ -.skeleton-project-title-line { - height: 20px; - width: 75%; -} - -.skeleton-tech-line { - height: 14px; - width: 85%; - margin-top: 4px; -} - -.skeleton-footer-line { - height: 16px; - width: 70%; - margin-top: 16px; -} - -/* Legacy styles (keeping for backward compatibility) */ -.skeleton-project-title { - height: 20px; - width: 75%; -} - -.skeleton-project-info { - height: 16px; - width: 55%; -} - -.skeleton-project-description { - height: 40px; - width: 100%; - margin-top: 4px; -} - -.skeleton-project-description.short { - width: 80%; -} - -/* Course Item Skeleton */ -.skeleton-course-item { - display: flex; - gap: 16px; - margin-bottom: 20px; -} - -.skeleton-course-icon { - width: 80px; - height: 80px; - border-radius: 8px; - flex-shrink: 0; -} - -.skeleton-course-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 8px; -} - -/* NEW: Structural skeleton lines for courses */ -.skeleton-course-title-line { - height: 18px; - width: 70%; -} - -.skeleton-course-info-line { - height: 14px; - width: 60%; -} - -/* Legacy styles (keeping for backward compatibility) */ -.skeleton-course-title { - height: 18px; - width: 70%; -} - -.skeleton-course-info { - height: 16px; - width: 60%; -} - -/* Language Item Skeleton */ -.skeleton-language-item { - height: 20px; - width: 100%; - margin-bottom: 12px; -} - -.skeleton-language-item:last-child { - margin-bottom: 0; -} - -/* Reference Item Skeleton */ -.skeleton-reference-item { - height: 22px; - width: 100%; - margin-bottom: 10px; -} - -.skeleton-reference-item:last-child { - margin-bottom: 0; -} - -/* Other Section Skeleton */ -.skeleton-other-item { - height: 20px; - width: 60%; -} - -/* Sidebar Skeleton */ -.skeleton-sidebar { - padding: 16px 0; -} - -.skeleton-sidebar-header { - height: 28px; - width: 80%; - margin-bottom: 20px; -} - -/* Skill Item Skeleton (Sidebar) - Already defined above but keeping for reference */ - -/* Footer Skeleton */ -.skeleton-footer { - display: flex; - flex-direction: column; - gap: 12px; - padding: 16px 0; -} - -.skeleton-footer-item { - height: 20px; - width: 100%; -} - -.skeleton-footer-item:nth-child(2) { - width: 90%; -} - -.skeleton-footer-item:nth-child(3) { - width: 85%; -} - -.skeleton-footer-item:nth-child(4) { - width: 80%; -} - -.skeleton-footer-item:nth-child(5) { - width: 75%; -} - -/* Text Block Skeletons (Generic) */ -.skeleton-text { - height: 16px; - margin-bottom: 8px; -} - -.skeleton-text.short { - width: 60%; -} - -.skeleton-text.medium { - width: 80%; -} - -.skeleton-text.long { - width: 95%; -} - -/* ======================================================================== - RESPONSIVE ADJUSTMENTS - ======================================================================== */ - -@media (max-width: 768px) { - .skeleton-header { - flex-direction: column; - align-items: center; - } - - .skeleton-header-text { - text-align: center; - width: 100%; - } - - .skeleton-name, - .skeleton-experience-years { - width: 80%; - margin-left: auto; - margin-right: auto; - } - - .skeleton-photo { - width: 100px; - height: 100px; - border-radius: 8px; - } - - .skeleton-experience-item { - flex-direction: column; - gap: 12px; - } - - .skeleton-company-logo { - width: 50px; - height: 50px; - } -} - -/* ======================================================================== - ACCESSIBILITY - REDUCED MOTION - ======================================================================== */ - -@media (prefers-reduced-motion: reduce) { - .skeleton { - animation: none; - background: #e8e8e8; - } - - .component-wrapper .actual-content, - .component-wrapper .skeleton-content { - transition: none; - } -} - -/* ======================================================================== - PRINT STYLES - ======================================================================== */ - -@media print { - .skeleton-content { - display: none !important; - } - - .component-wrapper .actual-content { - opacity: 1 !important; - } -} - -/* ======================================================================== - PERFORMANCE OPTIMIZATIONS - ======================================================================== */ - -/* Force GPU acceleration for skeleton elements */ -.skeleton { - transform: translateZ(0); - backface-visibility: hidden; -} - -/* Contain layout/paint/style to prevent reflow */ -.component-wrapper { - contain: layout style; -} - -/* Optimize skeleton rendering */ -.skeleton-content { - contain: layout paint; -} diff --git a/templates/index.html b/templates/index.html index 8d53610..da362b4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -111,6 +111,8 @@ + +