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

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
Details

Browse Source 
- 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
2026-04-19 18:39:56 +02:00
parent 1e62db4dd3
commit ab589f2960
2 changed files with 120 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
Makefile
View File

@@ -1,10 +1,17 @@
.PHONY: run install docker-build docker-run stop .PHONY: run install docker-build docker-run stop
run: install VENV=.venv
FLASK_ENV=development PORT=9234 python3 app.py PYTHON=$(VENV)/bin/python3
PIP=$(VENV)/bin/pip3
install: $(VENV)/bin/activate:
pip3 install -r requirements.txt --quiet python3 -m venv $(VENV)
install: $(VENV)/bin/activate
$(PIP) install -r requirements.txt --quiet
run: install
FLASK_ENV=development PORT=9234 $(PYTHON) app.py
docker-build: docker-build:
docker build -t web-erika . docker build -t web-erika .

154
templates/index.html
View File

@@ -389,79 +389,139 @@
/* Print / PDF via WeasyPrint */ /* Print / PDF via WeasyPrint */
@media print { @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; } 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; }
.pdf-btn { display: none !important; } .pdf-btn { display: none !important; }
/* Fixed height = A4(297mm) - top(10mm) - bottom(10mm) - border(~1mm) = 276mm */
.cv-wrapper { .cv-wrapper {
box-shadow: none !important; border-radius: 0 !important; box-shadow: none !important;
width: 204mm !important; max-width: 204mm !important; border-radius: 0 !important;
border-top: 3px solid var(--accent) !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 { .sidebar {
-webkit-print-color-adjust: exact; print-color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact;
width: 195px !important; min-width: 195px !important; background: #1e2d4a !important;
padding: 12px 13px !important; width: 188px !important; min-width: 188px !important;
gap: 10px !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-wrap { padding: 0 !important; justify-content: flex-start !important; }
.avatar { width: 54px !important; height: 54px !important; } .avatar {
.avatar-initials { font-size: 15px !important; } width: 80px !important; height: 80px !important;
.sidebar-name { margin-top: 0 !important; } border: 2px solid #4a8fe8 !important;
.sidebar-name h1 { font-size: 13px !important; } box-shadow: none !important;
.sidebar-name p { font-size: 7.5px !important; margin-top: 1px !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 { .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 ---- */
.main { padding: 10px 14px 8px !important; gap: 0 !important; } .main {
section { margin-bottom: 9px !important; } 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 { .section-title {
font-size: 8px !important; padding: 3px 0 3px 8px !important; font-size: 10px !important;
margin-bottom: 6px !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 */
.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-item:last-child { padding-bottom: 0 !important; }
.timeline-dot { width: 8px !important; height: 8px !important; margin-top: 2px !important; box-shadow: none !important; } .timeline-dot {
.timeline-period { font-size: 7.5px !important; margin-bottom: 1px !important; } width: 9px !important; height: 9px !important;
.timeline-title { font-size: 10px !important; line-height: 1.2 !important; } margin-top: 4px !important;
.timeline-subtitle { font-size: 8.5px !important; margin-top: 0 !important; margin-bottom: 3px !important; } box-shadow: none !important;
.timeline-bullets { gap: 1px !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 { .timeline-bullets li {
font-size: 8.5px !important; line-height: 1.3 !important; font-size: 10px !important; line-height: 1.5 !important;
padding-left: 10px !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 { .edu-grid {
flex-direction: row !important; gap: 7px !important; flex-direction: row !important; gap: 8px !important;
align-items: stretch !important; align-items: stretch !important;
} }
.edu-card { .edu-card {
flex: 1 !important; padding: 6px 8px !important; flex: 1 !important; padding: 11px 13px !important;
box-shadow: none !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-period { font-size: 8.5px !important; margin-bottom: 4px !important; color: #7a8caa !important; }
.edu-title { font-size: 9px !important; } .edu-title { font-size: 11px !important; font-weight: 600 !important; color: #1e2d4a !important; }
.edu-place { font-size: 8px !important; margin-top: 1px !important; } .edu-place { font-size: 10px !important; margin-top: 2px !important; color: #7a8caa !important; }
/* Sprog */ /* Language bars */
.lang-grid { gap: 8px !important; } .lang-grid { gap: 14px !important; }
.lang-item label { font-size: 9px !important; margin-bottom: 3px !important; } .lang-item label { font-size: 10.5px !important; margin-bottom: 5px !important; color: #1e2d4a !important; }
.lang-item .level { font-size: 7.5px !important; } .lang-item .level { font-size: 9px !important; color: #7a8caa !important; }
.lang-bar-track { height: 4px !important; } .lang-bar-track { height: 6px !important; background: #dce6f5 !important; }
.lang-bar-fill { background: #4a8fe8 !important; }
} }
/* Mobile */ /* Mobile */
@@ -479,9 +539,13 @@
<aside class="sidebar"> <aside class="sidebar">
<div class="avatar-wrap"> <div class="avatar-wrap">
<div class="avatar"> <div class="avatar">
{% if pdf_mode %}
<div class="avatar-initials" style="display:flex">EN</div>
{% else %}
<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">EN</div> <div class="avatar-initials" style="display:none">EN</div>
{% endif %}
</div> </div>
</div> </div>