hjess/web-erika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compress print CSS to fit PDF on exactly 1 A4 page
All checks were successful
Build and Deploy Erika CV / build-and-deploy (push) Successful in 1m2s
Details

Browse Source 
- Reduced @page margin 8mm → 5mm
- Sidebar: 195px wide, tighter padding/gaps
- Education grid: 3 columns side by side in print
- All font sizes and spacing tuned to fit 1 page
This commit is contained in:
Henrik Jess Nielsen
2026-04-19 18:18:01 +02:00
parent ff48f31ae5
commit 1e62db4dd3
1 changed files with 96 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
templates/index.html
View File

@@ -42,13 +42,14 @@
overflow: hidden; overflow: hidden;
box-shadow: 0 20px 60px rgba(30, 45, 74, 0.18); box-shadow: 0 20px 60px rgba(30, 45, 74, 0.18);
display: flex; display: flex;
border-top: 5px solid var(--accent);
} }
/* ---- SIDEBAR ---- */ /* ---- SIDEBAR ---- */
.sidebar { .sidebar {
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
background: var(--sidebar-bg); background: linear-gradient(170deg, #243761 0%, #1a2840 100%);
color: var(--sidebar-text); color: var(--sidebar-text);
padding: 40px 28px; padding: 40px 28px;
display: flex; display: flex;
@@ -65,9 +66,10 @@
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; border-radius: 50%;
border: 4px solid var(--accent); border: 3px solid var(--accent);
box-shadow: 0 0 0 6px rgba(74,143,232,0.15), 0 8px 24px rgba(0,0,0,0.3);
overflow: hidden; overflow: hidden;
background: #2e4270; background: linear-gradient(135deg, #2e4a7a, #1e2d4a);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -174,14 +176,16 @@
} }
.section-title { .section-title {
font-size: 13px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 2.5px;
color: var(--accent); color: var(--accent);
border-left: 3px solid var(--accent); border-left: 4px solid var(--accent);
padding-left: 12px; padding: 4px 0 4px 12px;
margin-bottom: 20px; margin-bottom: 20px;
background: linear-gradient(90deg, rgba(74,143,232,0.07) 0%, transparent 80%);
border-radius: 0 4px 4px 0;
} }
/* Timeline */ /* Timeline */
@@ -211,13 +215,13 @@
} }
.timeline-dot { .timeline-dot {
width: 12px; width: 14px;
height: 12px; height: 14px;
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--accent);
flex-shrink: 0; flex-shrink: 0;
margin-top: 4px; margin-top: 3px;
box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.2); box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.25), 0 0 0 6px rgba(74,143,232,0.08);
} }
.timeline-line { .timeline-line {
@@ -295,11 +299,15 @@
} }
.edu-card { .edu-card {
background: var(--body-bg); background: var(--white);
border-left: 3px solid var(--accent); border: 1px solid var(--border);
border-radius: 0 8px 8px 0; border-left: 4px solid var(--accent);
border-radius: 0 10px 10px 0;
padding: 14px 16px; padding: 14px 16px;
box-shadow: 0 2px 8px rgba(30,45,74,0.06);
transition: box-shadow 0.2s;
} }
.edu-card:hover { box-shadow: 0 4px 16px rgba(30,45,74,0.12); }
.edu-period { .edu-period {
font-size: 11px; font-size: 11px;
@@ -346,7 +354,7 @@
} }
.lang-bar-track { .lang-bar-track {
height: 5px; height: 7px;
background: var(--border); background: var(--border);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@@ -354,7 +362,7 @@
.lang-bar-fill { .lang-bar-fill {
height: 100%; height: 100%;
background: var(--accent); background: linear-gradient(90deg, var(--accent), #7ab4f5);
border-radius: 10px; border-radius: 10px;
transition: width 1s ease; transition: width 1s ease;
} }
@@ -381,42 +389,79 @@
/* Print / PDF via WeasyPrint */ /* Print / PDF via WeasyPrint */
@media print { @media print {
@page { size: A4; margin: 8mm; } @page { size: A4 portrait; margin: 5mm; }
html, body { background: white !important; padding: 0; margin: 0; } html, body { background: white !important; padding: 0 !important; margin: 0 !important; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cv-wrapper { box-shadow: none; border-radius: 0; width: 194mm; max-width: 194mm; }
.sidebar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pdf-btn { display: none !important; } .pdf-btn { display: none !important; }
/* Kompakt til 1 side */
body { padding: 0; } .cv-wrapper {
.hero { padding: 18px 22px 12px; } box-shadow: none !important; border-radius: 0 !important;
.hero-name { font-size: 22px; } width: 204mm !important; max-width: 204mm !important;
.hero-tagline { font-size: 11px; margin-bottom: 6px; } border-top: 3px solid var(--accent) !important;
.hero-summary { font-size: 11px; line-height: 1.5; } }
.main { padding: 0 18px 10px; }
section { margin-bottom: 10px; } /* Sidebar */
.section-title { font-size: 10px; padding: 5px 0 4px; margin-bottom: 8px; } .sidebar {
.timeline-item { padding: 7px 0; } -webkit-print-color-adjust: exact; print-color-adjust: exact;
.timeline-period { font-size: 9px; } width: 195px !important; min-width: 195px !important;
.timeline-title { font-size: 12px; } padding: 12px 13px !important;
.timeline-subtitle { font-size: 10px; } gap: 10px !important;
.timeline-bullets { font-size: 10px; margin-top: 2px; } }
.timeline-bullets li { margin-bottom: 0; } .avatar-wrap { padding: 0 !important; }
.edu-card { padding: 7px 10px; } .avatar { width: 54px !important; height: 54px !important; }
.edu-period { font-size: 9px; } .avatar-initials { font-size: 15px !important; }
.edu-title { font-size: 11px; } .sidebar-name { margin-top: 0 !important; }
.edu-place { font-size: 10px; } .sidebar-name h1 { font-size: 13px !important; }
.lang-item label { font-size: 10px; margin-bottom: 3px; } .sidebar-name p { font-size: 7.5px !important; margin-top: 1px !important; }
.lang-bar-track { height: 4px; } .sidebar-section h3 {
.tag { font-size: 9px; padding: 2px 6px; } font-size: 7.5px !important; padding-bottom: 3px !important; margin-bottom: 6px !important;
.sidebar-name h1 { font-size: 17px; } }
.sidebar-name p { font-size: 10px; } .contact-list { gap: 5px !important; }
.sidebar-section { margin-bottom: 16px; } .contact-list li { font-size: 9px !important; gap: 5px !important; line-height: 1.3 !important; }
.sidebar-section-title { font-size: 8px; } .contact-icon { width: 11px !important; height: 11px !important; }
.sidebar-item { font-size: 11px; } .profile-text { font-size: 8.5px !important; line-height: 1.45 !important; }
.sidebar-item small { font-size: 9px; } .skill-tags { gap: 4px !important; }
.avatar-wrap { padding: 18px 0 10px; } .skill-tag { font-size: 7.5px !important; padding: 2px 7px !important; }
.avatar { width: 70px; height: 70px; font-size: 22px; }
/* Main */
.main { padding: 10px 14px 8px !important; gap: 0 !important; }
section { margin-bottom: 9px !important; }
.section-title {
font-size: 8px !important; padding: 3px 0 3px 8px !important;
margin-bottom: 6px !important;
}
/* Timeline */
.timeline-item { padding-bottom: 7px !important; gap: 9px !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-bullets li {
font-size: 8.5px !important; line-height: 1.3 !important;
padding-left: 10px !important;
}
/* Education — 3 kolonner */
.edu-grid {
flex-direction: row !important; gap: 7px !important;
align-items: stretch !important;
}
.edu-card {
flex: 1 !important; padding: 6px 8px !important;
box-shadow: none !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; }
/* 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; }
} }
/* Mobile */ /* Mobile */
@@ -436,7 +481,7 @@
<div class="avatar"> <div class="avatar">
<img src="/static/photo.jpg" alt="Erika Nielsen" <img src="/static/photo.jpg" alt="Erika Nielsen"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'"> onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
<div class="avatar-initials" style="display:none">ES</div> <div class="avatar-initials" style="display:none">EN</div>
</div> </div>
</div> </div>