fix: Override inline icon sizes to 1.2em across all sections
Problem: Inline icons embedded in responsibilities, courses, and projects had explicit width='60' height='60' attributes that made them too large (60px instead of ~16px). Solution: - Added CSS with !important to override inline width/height attributes - Targeted inline icons in: * Course responsibilities and descriptions * Project descriptions and technologies * Experience responsibilities (within divs) - Preserved large icons (80px) for main company/course/project logos Changes: - static/css/03-components/_courses.css: Override to 1.2em - static/css/03-components/_projects.css: Override to 1.2em - static/css/03-components/_cv-section.css: Override to 1.2em Test Results: ✅ 7 course inline icons: 16px × 16px ✅ Main company icons: 80px × 80px (preserved)
This commit is contained in:
juanatsap
@@ -91,9 +91,12 @@
|
||||
/* Inline icons within course responsibilities and descriptions */
|
||||
.course-item .responsibilities li iconify-icon,
|
||||
.course-desc iconify-icon {
|
||||
font-size: 1.2em;
|
||||
width: 1.2em !important; /* Override inline width attributes */
|
||||
height: 1.2em !important; /* Override inline height attributes */
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.15em;
|
||||
color: inherit !important; /* Preserve icon colors */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
@@ -267,6 +267,22 @@
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Inline icons within responsibility text (not the main icon) */
|
||||
.responsibilities li div iconify-icon,
|
||||
.responsibilities li strong + iconify-icon,
|
||||
.responsibilities li em + iconify-icon {
|
||||
width: 1.2em !important;
|
||||
height: 1.2em !important;
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.15em;
|
||||
color: inherit !important;
|
||||
display: inline-block;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Education */
|
||||
.education-item {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@@ -227,4 +227,16 @@ footer {
|
||||
animation: fadeInGrow 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Inline icons within project descriptions */
|
||||
.project-desc iconify-icon,
|
||||
.project-technologies iconify-icon {
|
||||
width: 1.2em !important; /* Override inline width attributes */
|
||||
height: 1.2em !important; /* Override inline height attributes */
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.15em;
|
||||
color: inherit !important; /* Preserve icon colors */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -2041,15 +2041,15 @@ html {
|
||||
}
|
||||
|
||||
.pdf-option-card:focus {
|
||||
outline: 2px solid #4caf50;
|
||||
outline: 2px solid #ef4444;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Selected State */
|
||||
.pdf-option-card.selected {
|
||||
border-color: #4caf50;
|
||||
box-shadow: 0 6px 16px rgba(76, 175, 80, 0.2);
|
||||
background: #f9fff9;
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
/* PDF Thumbnail Container */
|
||||
@@ -2185,13 +2185,13 @@ html {
|
||||
|
||||
/* Enabled State */
|
||||
.pdf-download-btn:not(:disabled) {
|
||||
background: #4caf50;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pdf-download-btn:not(:disabled):hover {
|
||||
background: #45a049;
|
||||
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
|
||||
background: #dc2626;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,64 @@
|
||||
/* 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
|
||||
=================================== */
|
||||
|
||||
Reference in New Issue
Block a user