From ab589f2960d57c449eea004e93577efaa10405b2 Mon Sep 17 00:00:00 2001 From: Henrik Jess Nielsen Date: Sun, 19 Apr 2026 18:39:56 +0200 Subject: [PATCH] Fix PDF: full-height sidebar + space-between layout fills A4 page - 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 --- Makefile | 15 +++-- templates/index.html | 154 ++++++++++++++++++++++++++++++------------- 2 files changed, 120 insertions(+), 49 deletions(-) diff --git a/Makefile b/Makefile index eee4dcc..789ef5f 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,17 @@ .PHONY: run install docker-build docker-run stop -run: install - FLASK_ENV=development PORT=9234 python3 app.py +VENV=.venv +PYTHON=$(VENV)/bin/python3 +PIP=$(VENV)/bin/pip3 -install: - pip3 install -r requirements.txt --quiet +$(VENV)/bin/activate: + 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 -t web-erika . diff --git a/templates/index.html b/templates/index.html index afd1f96..b901fd8 100644 --- a/templates/index.html +++ b/templates/index.html @@ -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 @@