refactor: update CV styling, implement print-specific pill link visibility

This commit is contained in:
Dejvino 2026-07-27 14:17:07 +02:00
parent 5ea3bf21b2
commit 4e41649002
2 changed files with 26 additions and 18 deletions

View File

@ -221,7 +221,7 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
<div class="hero-row hero-contacts">
<?php foreach ($extra_contact_links as $label => $href): ?>
<?= render_pill($href, $label, $pill_icons[$label] ?? '🔗', 'contact-pill') ?>
<?= render_pill($href, $label, $pill_icons[$label] ?? '🔗', 'contact-pill' . ($label === 'CV' || $label === 'Resume' ? ' pill-cv-only-print' : '')) ?>
<?php endforeach; ?>
</div>
@ -286,8 +286,8 @@ $cv_skills = $cvData['cv']['skills'] ?? [];
<?php endif; ?>
</article>
<?php endforeach; ?>
<?php if ($cvData['cv']['philosophy'] ?? []): ?>
<p class="philosophy"><?= $cvData['cv']['philosophy'] ?></p>
<?php if ($cvData['cv']['philosophy'] ?? ''): ?>
<blockquote class="philosophy"><?= $cvData['cv']['philosophy'] ?></blockquote>
<?php endif; ?>
</section>
<?php endif; ?>

View File

@ -234,15 +234,6 @@ body {
}
.card .philosophy {
margin: 1.2em 0 0 0;
padding-top: 1em;
border-top: 1px solid rgba(255,255,255,0.08);
font-style: italic;
opacity: 0.75;
font-size: 0.9rem;
}
.highlight-item h3 {
display: flex;
align-items: baseline;
@ -256,6 +247,7 @@ body {
font-weight: normal;
white-space: nowrap;
}
/**
* Link pills shared base
*/
@ -273,7 +265,6 @@ body {
white-space: nowrap;
}
.pill-icon {
font-size: 1.1em;
line-height: 1;
@ -286,16 +277,28 @@ body {
filter: grayscale(90%) brightness(0.8);
}
.pill-label {
font-weight: 600;
}
.pill-url {
font-size: 0.72rem;
opacity: 0.5;
margin-left: 2px;
display: none;
}
.pill-cv-only-print {
display: none;
}
.card blockquote.philosophy {
margin: 1.5em 0 0 0;
padding: 1rem 1.25rem;
border-left: 3px solid var(--accent-color);
background: rgba(0, 243, 255, 0.03);
font-style: italic;
opacity: 0.85;
font-size: 0.9rem;
line-height: 1.5;
border-radius: 0 6px 6px 0;
}
@ -954,9 +957,14 @@ body.cv-mode {
display: none !important;
}
.pill .pill-url {
display: inline !important;
opacity: 1 !important;
color: #333 !important;
font-size: 0.7rem !important;
margin-left: 4px !important;
}
.pill-cv-only-print {
display: inline-flex !important;
}
/* CV Container hidden unless CV mode */