kobold-ai/wtc.waiswuaschd.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix print layout: absolute-pinned corner footers, 286mm single-sheet height, margin 0 without borders

Browse Source
This commit is contained in:
kobold-ai
2026-10-14 21:23:42 +02:00
parent ceb84825d7
commit aa78de0cbc
1 changed files with 2187 additions and 2184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cookbook.html
+37 -34
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Kochbuch – What To Cook?</title>
<link rel="stylesheet" href="/static/cookbook.css?v=4.5.2">
<link rel="stylesheet" href="/static/cookbook.css?v=4.5.3">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
<style id="print-engine-styles">
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
@@ -18,11 +18,11 @@
/* ==========================================================================
A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop
Verwendet saubere Block-/Table-Architektur ohne Flex-Height-Bugs und ohne Clipping.
Jede Seite ist exakt 1 Blatt A4 (286mm). Kein Rahmen, Seitenzahl fest in der Ecke.
========================================================================== */
@page {
size: A4 portrait;
margin: 10mm 12mm 10mm 12mm;
margin: 0;
}
@media print {
@@ -31,17 +31,18 @@
print-color-adjust: exact !important;
color-adjust: exact !important;
box-sizing: border-box !important;
box-shadow: none !important;
text-shadow: none !important;
}
html, body.cookbook-body {
width: 100% !important;
min-width: 186mm !important;
height: auto !important;
min-height: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: var(--creme) !important;
background-color: #FAF7F2 !important;
color: var(--schwarz) !important;
display: block !important;
}
@@ -76,26 +77,30 @@
overflow: visible !important;
}
/* Jede Seite ist ein blockweises A4-Blatt */
/* Jede Seite ist ein eigenständiges DIN A4 Blatt mit fester 286mm Höhe */
.page {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
width: 210mm !important;
max-width: 210mm !important;
min-width: 210mm !important;
height: 286mm !important;
min-height: 286mm !important;
max-height: 286mm !important;
margin: 0 auto !important;
padding: 8mm 12mm 18mm 12mm !important;
box-sizing: border-box !important;
background: transparent !important;
background: var(--creme) !important;
background-color: #FAF7F2 !important;
box-shadow: none !important;
border: none !important;
outline: none !important;
border-radius: 0 !important;
page-break-after: always !important;
break-after: page !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
overflow: visible !important;
position: relative !important;
overflow: hidden !important;
}
.page:first-child {
@@ -299,10 +304,9 @@
}
.ingredients-box {
padding: 4px 6px !important;
border: 1px dashed rgba(30, 77, 59, 0.4) !important;
background: rgba(255, 255, 255, 0.7) !important;
border-radius: 6px !important;
padding: 2px 4px !important;
background: transparent !important;
border: none !important;
}
.section-hand-title {
@@ -422,15 +426,19 @@
display: block !important;
}
/* 5. SEITENZAHL AM FUẞ DER SEITE */
/* 5. SEITENZAHL FEST IN DEN ECKEN DES BLATTES VERANKERT */
.page-footer {
position: absolute !important;
bottom: 7mm !important;
left: 12mm !important;
right: 12mm !important;
width: auto !important;
display: block !important;
width: 100% !important;
margin-top: 4mm !important;
padding-top: 2mm !important;
border-top: 1px dotted rgba(30, 77, 59, 0.3) !important;
box-sizing: border-box !important;
clear: both !important;
border: none !important;
border-top: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 100 !important;
}
.page-footer.page-even {
@@ -443,17 +451,12 @@
.page-footer .page-number {
font-family: var(--font-hand), 'Caveat', cursive !important;
font-size: 1.15rem !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: var(--tannengruen) !important;
display: inline-block !important;
}
.divider .page-footer {
border-top: none !important;
margin-top: 15mm !important;
}
.cover .page-footer {
display: none !important;
}