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
All checks were successful
Build and Deploy Erika CV / build-and-deploy (push) Successful in 1m2s
- 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
@@ -42,13 +42,14 @@
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 60px rgba(30, 45, 74, 0.18);
|
||||
display: flex;
|
||||
border-top: 5px solid var(--accent);
|
||||
}
|
||||
|
||||
/* ---- SIDEBAR ---- */
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
background: var(--sidebar-bg);
|
||||
background: linear-gradient(170deg, #243761 0%, #1a2840 100%);
|
||||
color: var(--sidebar-text);
|
||||
padding: 40px 28px;
|
||||
display: flex;
|
||||
@@ -65,9 +66,10 @@
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
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;
|
||||
background: #2e4270;
|
||||
background: linear-gradient(135deg, #2e4a7a, #1e2d4a);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -174,14 +176,16 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 2.5px;
|
||||
color: var(--accent);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 12px;
|
||||
border-left: 4px solid var(--accent);
|
||||
padding: 4px 0 4px 12px;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(90deg, rgba(74,143,232,0.07) 0%, transparent 80%);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
@@ -211,13 +215,13 @@
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.2);
|
||||
margin-top: 3px;
|
||||
box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.25), 0 0 0 6px rgba(74,143,232,0.08);
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
@@ -295,11 +299,15 @@
|
||||
}
|
||||
|
||||
.edu-card {
|
||||
background: var(--body-bg);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: 0 8px 8px 0;
|
||||
background: var(--white);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid var(--accent);
|
||||
border-radius: 0 10px 10px 0;
|
||||
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 {
|
||||
font-size: 11px;
|
||||
@@ -346,7 +354,7 @@
|
||||
}
|
||||
|
||||
.lang-bar-track {
|
||||
height: 5px;
|
||||
height: 7px;
|
||||
background: var(--border);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@@ -354,7 +362,7 @@
|
||||
|
||||
.lang-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
background: linear-gradient(90deg, var(--accent), #7ab4f5);
|
||||
border-radius: 10px;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
@@ -381,42 +389,79 @@
|
||||
|
||||
/* Print / PDF via WeasyPrint */
|
||||
@media print {
|
||||
@page { size: A4; margin: 8mm; }
|
||||
html, body { background: white !important; padding: 0; margin: 0; }
|
||||
@page { size: A4 portrait; margin: 5mm; }
|
||||
html, body { background: white !important; padding: 0 !important; margin: 0 !important; }
|
||||
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; }
|
||||
/* Kompakt til 1 side */
|
||||
body { padding: 0; }
|
||||
.hero { padding: 18px 22px 12px; }
|
||||
.hero-name { font-size: 22px; }
|
||||
.hero-tagline { font-size: 11px; margin-bottom: 6px; }
|
||||
.hero-summary { font-size: 11px; line-height: 1.5; }
|
||||
.main { padding: 0 18px 10px; }
|
||||
section { margin-bottom: 10px; }
|
||||
.section-title { font-size: 10px; padding: 5px 0 4px; margin-bottom: 8px; }
|
||||
.timeline-item { padding: 7px 0; }
|
||||
.timeline-period { font-size: 9px; }
|
||||
.timeline-title { font-size: 12px; }
|
||||
.timeline-subtitle { font-size: 10px; }
|
||||
.timeline-bullets { font-size: 10px; margin-top: 2px; }
|
||||
.timeline-bullets li { margin-bottom: 0; }
|
||||
.edu-card { padding: 7px 10px; }
|
||||
.edu-period { font-size: 9px; }
|
||||
.edu-title { font-size: 11px; }
|
||||
.edu-place { font-size: 10px; }
|
||||
.lang-item label { font-size: 10px; margin-bottom: 3px; }
|
||||
.lang-bar-track { height: 4px; }
|
||||
.tag { font-size: 9px; padding: 2px 6px; }
|
||||
.sidebar-name h1 { font-size: 17px; }
|
||||
.sidebar-name p { font-size: 10px; }
|
||||
.sidebar-section { margin-bottom: 16px; }
|
||||
.sidebar-section-title { font-size: 8px; }
|
||||
.sidebar-item { font-size: 11px; }
|
||||
.sidebar-item small { font-size: 9px; }
|
||||
.avatar-wrap { padding: 18px 0 10px; }
|
||||
.avatar { width: 70px; height: 70px; font-size: 22px; }
|
||||
|
||||
.cv-wrapper {
|
||||
box-shadow: none !important; border-radius: 0 !important;
|
||||
width: 204mm !important; max-width: 204mm !important;
|
||||
border-top: 3px solid var(--accent) !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.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; }
|
||||
.sidebar-section h3 {
|
||||
font-size: 7.5px !important; padding-bottom: 3px !important; margin-bottom: 6px !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; }
|
||||
.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 */
|
||||
@@ -436,7 +481,7 @@
|
||||
<div class="avatar">
|
||||
<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">ES</div>
|
||||
<div class="avatar-initials" style="display:none">EN</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user