juanatsap
2c372eee49
**Social Links in Footer (Page 2):** - Replace address/phone with LinkedIn, GitHub, and Behance links - Maintain email@ link - All links are clickable and open in new tabs - Footer displays social media profiles prominently **Company Logo Toggle Feature:** - Add "Show logos" toggle switch in top action bar - Toggle displays company logos (48x48px) to the left of each experience item - LinkedIn-style layout when logos are shown - Logos hidden by default, optional display via toggle - Graceful fallback: missing logos don't break layout (onerror handler) - Logos directory created at static/images/logos/ with README **Technical Implementation:** - New CSS file: logo-toggle.css for toggle switch and logo layout - JavaScript: toggleLogos() function for show/hide functionality - Template updates: experience items now support flex layout with logos - Action bar grid updated to accommodate 4 columns - Logo display uses CSS class `.show-logos` on `.cv-paper` - Print CSS: logos hidden in PDF exports by default **User Experience:** - Clean toggle switch UI with smooth animations - Mobile responsive design - Accessibility: proper ARIA labels for toggle - Optional feature that doesn't clutter default view - Professional LinkedIn-style appearance when enabled Logos can be added to static/images/logos/ directory using filenames from the companyLogo field in CV JSON data.
132 lines
2.4 KiB
CSS
132 lines
2.4 KiB
CSS
/* Logo Toggle Component */
|
|
.logo-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.toggle-switch input[type="checkbox"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
background-color: #ccc;
|
|
border-radius: 24px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.toggle-slider::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
top: 3px;
|
|
left: 3px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
|
|
background-color: var(--accent-blue);
|
|
}
|
|
|
|
.toggle-switch input[type="checkbox"]:checked + .toggle-slider::after {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.toggle-switch input[type="checkbox"]:focus + .toggle-slider {
|
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2);
|
|
}
|
|
|
|
.toggle-label {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: #ccc;
|
|
}
|
|
|
|
/* Experience Item with Logo Support */
|
|
.experience-item {
|
|
margin-bottom: 1.5rem;
|
|
page-break-inside: avoid;
|
|
display: flex;
|
|
gap: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.company-logo {
|
|
display: none; /* Hidden by default */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.company-logo img {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
background: white;
|
|
}
|
|
|
|
.experience-content {
|
|
flex: 1;
|
|
min-width: 0; /* Prevents flex item from overflowing */
|
|
}
|
|
|
|
/* Show logos when toggle is active */
|
|
.show-logos .company-logo {
|
|
display: block;
|
|
}
|
|
|
|
/* Hide logos in print by default */
|
|
@media print {
|
|
.company-logo {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|