Fix PDF: full-height sidebar + space-between layout fills A4 page
All checks were successful
Build and Deploy Erika CV / build-and-deploy (push) Successful in 57s
All checks were successful
Build and Deploy Erika CV / build-and-deploy (push) Successful in 57s
- Use height: 276mm (fixed) instead of min-height so sidebar fills page - Add height: 100% + box-sizing: border-box on sidebar - Add justify-content: space-between on .main to distribute sections - Slightly larger fonts (10-12.5px) and spacing for readability
This commit is contained in:
Henrik Jess Nielsen
@@ -389,79 +389,139 @@
|
||||
|
||||
/* Print / PDF via WeasyPrint */
|
||||
@media print {
|
||||
@page { size: A4 portrait; margin: 5mm; }
|
||||
@page { size: A4 portrait; margin: 10mm 8mm; }
|
||||
html, body { background: white !important; padding: 0 !important; margin: 0 !important; }
|
||||
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.pdf-btn { display: none !important; }
|
||||
|
||||
/* Fixed height = A4(297mm) - top(10mm) - bottom(10mm) - border(~1mm) = 276mm */
|
||||
.cv-wrapper {
|
||||
box-shadow: none !important; border-radius: 0 !important;
|
||||
width: 204mm !important; max-width: 204mm !important;
|
||||
border-top: 3px solid var(--accent) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
border-top: 3px solid #4a8fe8 !important;
|
||||
display: flex !important;
|
||||
height: 276mm !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
/* ---- SIDEBAR ---- */
|
||||
.sidebar {
|
||||
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
||||
width: 195px !important; min-width: 195px !important;
|
||||
padding: 12px 13px !important;
|
||||
gap: 10px !important;
|
||||
background: #1e2d4a !important;
|
||||
width: 188px !important; min-width: 188px !important;
|
||||
height: 100% !important;
|
||||
padding: 22px 16px !important;
|
||||
gap: 20px !important;
|
||||
color: #c8d6ed !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.avatar-wrap { padding: 0 !important; }
|
||||
.avatar { width: 54px !important; height: 54px !important; }
|
||||
.avatar-initials { font-size: 15px !important; }
|
||||
.sidebar-name { margin-top: 0 !important; }
|
||||
.sidebar-name h1 { font-size: 13px !important; }
|
||||
.sidebar-name p { font-size: 7.5px !important; margin-top: 1px !important; }
|
||||
.avatar-wrap { padding: 0 !important; justify-content: flex-start !important; }
|
||||
.avatar {
|
||||
width: 80px !important; height: 80px !important;
|
||||
border: 2px solid #4a8fe8 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.avatar-initials { font-size: 24px !important; }
|
||||
.sidebar-name { text-align: left !important; }
|
||||
.sidebar-name h1 { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.25 !important; margin: 0 !important; }
|
||||
.sidebar-name p { font-size: 10px !important; margin-top: 4px !important; color: #4a8fe8 !important; }
|
||||
.sidebar-section h3 {
|
||||
font-size: 7.5px !important; padding-bottom: 3px !important; margin-bottom: 6px !important;
|
||||
font-size: 9px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 1px !important;
|
||||
color: #4a8fe8 !important;
|
||||
padding-bottom: 6px !important;
|
||||
margin-bottom: 10px !important;
|
||||
border-bottom: 1px solid rgba(74,143,232,0.35) !important;
|
||||
}
|
||||
.contact-list { gap: 9px !important; }
|
||||
.contact-list li { font-size: 10.5px !important; gap: 7px !important; line-height: 1.45 !important; color: #c8d6ed !important; }
|
||||
.contact-icon { width: 13px !important; height: 13px !important; flex-shrink: 0 !important; }
|
||||
.profile-text { font-size: 10px !important; line-height: 1.65 !important; color: #c8d6ed !important; }
|
||||
.skill-tags { gap: 6px !important; }
|
||||
.skill-tag {
|
||||
font-size: 9.5px !important; padding: 4px 11px !important;
|
||||
background: rgba(74,143,232,0.18) !important;
|
||||
border: 1px solid rgba(74,143,232,0.35) !important;
|
||||
color: #d6e6ff !important;
|
||||
border-radius: 20px !important;
|
||||
}
|
||||
.contact-list { gap: 5px !important; }
|
||||
.contact-list li { font-size: 9px !important; gap: 5px !important; line-height: 1.3 !important; }
|
||||
.contact-icon { width: 11px !important; height: 11px !important; }
|
||||
.profile-text { font-size: 8.5px !important; line-height: 1.45 !important; }
|
||||
.skill-tags { gap: 4px !important; }
|
||||
.skill-tag { font-size: 7.5px !important; padding: 2px 7px !important; }
|
||||
|
||||
/* Main */
|
||||
.main { padding: 10px 14px 8px !important; gap: 0 !important; }
|
||||
section { margin-bottom: 9px !important; }
|
||||
/* ---- MAIN ---- */
|
||||
.main {
|
||||
padding: 24px 22px 20px !important;
|
||||
gap: 0 !important;
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: space-between !important;
|
||||
box-sizing: border-box !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
section { margin-bottom: 0 !important; }
|
||||
.section-title {
|
||||
font-size: 8px !important; padding: 3px 0 3px 8px !important;
|
||||
margin-bottom: 6px !important;
|
||||
font-size: 10px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 2px !important;
|
||||
color: #4a8fe8 !important;
|
||||
border-left: 3px solid #4a8fe8 !important;
|
||||
padding: 4px 0 4px 9px !important;
|
||||
margin-bottom: 14px !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline-item { padding-bottom: 7px !important; gap: 9px !important; }
|
||||
.timeline-item { padding-bottom: 16px !important; gap: 11px !important; }
|
||||
.timeline-item:last-child { padding-bottom: 0 !important; }
|
||||
.timeline-dot { width: 8px !important; height: 8px !important; margin-top: 2px !important; box-shadow: none !important; }
|
||||
.timeline-period { font-size: 7.5px !important; margin-bottom: 1px !important; }
|
||||
.timeline-title { font-size: 10px !important; line-height: 1.2 !important; }
|
||||
.timeline-subtitle { font-size: 8.5px !important; margin-top: 0 !important; margin-bottom: 3px !important; }
|
||||
.timeline-bullets { gap: 1px !important; }
|
||||
.timeline-dot {
|
||||
width: 9px !important; height: 9px !important;
|
||||
margin-top: 4px !important;
|
||||
box-shadow: none !important;
|
||||
background: #4a8fe8 !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
.timeline-line { background: #dce6f5 !important; }
|
||||
.timeline-period { font-size: 9px !important; margin-bottom: 2px !important; color: #7a8caa !important; }
|
||||
.timeline-title { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #1e2d4a !important; }
|
||||
.timeline-subtitle { font-size: 10.5px !important; margin-top: 2px !important; margin-bottom: 5px !important; color: #4a8fe8 !important; }
|
||||
.timeline-bullets { gap: 3px !important; }
|
||||
.timeline-bullets li {
|
||||
font-size: 8.5px !important; line-height: 1.3 !important;
|
||||
padding-left: 10px !important;
|
||||
font-size: 10px !important; line-height: 1.5 !important;
|
||||
padding-left: 12px !important;
|
||||
color: #3a4a62 !important;
|
||||
}
|
||||
.timeline-bullets li::before {
|
||||
width: 4px !important; height: 4px !important;
|
||||
top: 7px !important;
|
||||
background: #4a8fe8 !important;
|
||||
}
|
||||
|
||||
/* Education — 3 kolonner */
|
||||
/* Education — 3 columns */
|
||||
.edu-grid {
|
||||
flex-direction: row !important; gap: 7px !important;
|
||||
flex-direction: row !important; gap: 8px !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
.edu-card {
|
||||
flex: 1 !important; padding: 6px 8px !important;
|
||||
flex: 1 !important; padding: 11px 13px !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #dce6f5 !important;
|
||||
border-left: 3px solid #4a8fe8 !important;
|
||||
border-radius: 0 6px 6px 0 !important;
|
||||
}
|
||||
.edu-period { font-size: 7px !important; margin-bottom: 2px !important; }
|
||||
.edu-title { font-size: 9px !important; }
|
||||
.edu-place { font-size: 8px !important; margin-top: 1px !important; }
|
||||
.edu-period { font-size: 8.5px !important; margin-bottom: 4px !important; color: #7a8caa !important; }
|
||||
.edu-title { font-size: 11px !important; font-weight: 600 !important; color: #1e2d4a !important; }
|
||||
.edu-place { font-size: 10px !important; margin-top: 2px !important; color: #7a8caa !important; }
|
||||
|
||||
/* Sprog */
|
||||
.lang-grid { gap: 8px !important; }
|
||||
.lang-item label { font-size: 9px !important; margin-bottom: 3px !important; }
|
||||
.lang-item .level { font-size: 7.5px !important; }
|
||||
.lang-bar-track { height: 4px !important; }
|
||||
/* Language bars */
|
||||
.lang-grid { gap: 14px !important; }
|
||||
.lang-item label { font-size: 10.5px !important; margin-bottom: 5px !important; color: #1e2d4a !important; }
|
||||
.lang-item .level { font-size: 9px !important; color: #7a8caa !important; }
|
||||
.lang-bar-track { height: 6px !important; background: #dce6f5 !important; }
|
||||
.lang-bar-fill { background: #4a8fe8 !important; }
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@@ -479,9 +539,13 @@
|
||||
<aside class="sidebar">
|
||||
<div class="avatar-wrap">
|
||||
<div class="avatar">
|
||||
{% if pdf_mode %}
|
||||
<div class="avatar-initials" style="display:flex">EN</div>
|
||||
{% else %}
|
||||
<img src="/static/photo.jpg" alt="Erika Nielsen"
|
||||
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
|
||||
<div class="avatar-initials" style="display:none">EN</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user