juanatsap
f7cda5dba3
CSS Restructuring: - Reorganize monolithic main.css into modular architecture - Create foundation/ (reset, variables, typography, themes) - Create layout/ (container, page, grid, paper) - Create components/ (8 component files) - Create interactive/ (toggles, remaining for future split) - Create effects/ (skeleton loading) - Create contexts/ (print styles) Theme Support Fixes: - Replace all hardcoded text colors with CSS variables - Fix .section-title: rgb(51,51,51) → var(--text-primary) - Fix .cv-name, .intro-text: hardcoded → theme-aware - Fix .experience-period, .duration-text: #555/#aaa → variables - Fix course/project/experience text colors - Support proper light/dark theme text contrast Icon & Layout Fixes: - Standardize all icon sizes to 80×80px - Change all icon backgrounds to transparent - Fix award section layout (missing flexbox) - Update HTML templates (experience.html, awards.html) to width='80' - Fix default icon sizing conflicts View Switcher Fix: - Fix toggleTheme() to target .cv-container instead of body - Ensures clean/default theme toggle works correctly Files: 40+ CSS files modularized, 3 templates updated, 7 tests added
73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
{{define "section-awards"}}
|
|
<!-- Awards Section -->
|
|
{{if .CV.Awards}}
|
|
<section id="awards" class="cv-section component-wrapper">
|
|
<!-- Actual Content -->
|
|
<div class="actual-content">
|
|
<details open>
|
|
<summary>
|
|
<h3 class="section-title">
|
|
<iconify-icon icon="mdi:trophy" width="24" height="24" class="section-icon"></iconify-icon>
|
|
{{if eq .Lang "es"}}Premios y Reconocimientos{{else}}Awards{{end}}
|
|
</h3>
|
|
</summary>
|
|
{{range .CV.Awards}}
|
|
<div class="award-item">
|
|
{{if .AwardLogo}}
|
|
<div class="award-logo">
|
|
<img src="/static/images/companies/{{.AwardLogo}}" alt="{{.Title}} logo" onerror="this.parentElement.innerHTML='<iconify-icon icon=\'mdi:trophy\' width=\'80\' height=\'80\' class=\'default-award-icon\'></iconify-icon>'">
|
|
</div>
|
|
{{end}}
|
|
<div class="award-content">
|
|
<strong>{{.Title}}</strong><br>
|
|
<small>{{.Issuer}} - {{.Date}}</small>
|
|
|
|
{{if .ShortDescription}}
|
|
<p class="award-desc short-desc">{{.ShortDescription | safeHTML}}</p>
|
|
{{end}}
|
|
|
|
{{if .Responsibilities}}
|
|
<ul class="responsibilities long-only">
|
|
{{range .Responsibilities}}
|
|
<li>{{. | safeHTML}}</li>
|
|
{{end}}
|
|
</ul>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</details>
|
|
</div>
|
|
|
|
<!-- Skeleton Content -->
|
|
<div class="skeleton-content">
|
|
<div class="skeleton-section">
|
|
<div class="skeleton skeleton-section-title"></div>
|
|
|
|
<!-- Award Item 1 - With description and responsibilities -->
|
|
<div class="skeleton-award-item">
|
|
<div class="skeleton skeleton-award-logo"></div>
|
|
<div class="skeleton-award-content">
|
|
<div class="skeleton skeleton-award-title-line"></div>
|
|
<div class="skeleton skeleton-award-info-line"></div>
|
|
<div class="skeleton skeleton-description-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line"></div>
|
|
<div class="skeleton skeleton-responsibility-line" style="width: 91%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Award Item 2 - Shorter -->
|
|
<div class="skeleton-award-item">
|
|
<div class="skeleton skeleton-award-logo"></div>
|
|
<div class="skeleton-award-content">
|
|
<div class="skeleton skeleton-award-title-line"></div>
|
|
<div class="skeleton skeleton-award-info-line"></div>
|
|
<div class="skeleton skeleton-description-line" style="width: 87%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
{{end}}
|