Fix print layout: absolute-pinned corner footers, 286mm single-sheet height, margin 0 without borders
This commit is contained in:
+37
-34
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Mein Kochbuch – What To Cook?</title>
|
<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>">
|
<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">
|
<style id="print-engine-styles">
|
||||||
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
|
/* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
|
||||||
@@ -18,11 +18,11 @@
|
|||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop
|
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 {
|
@page {
|
||||||
size: A4 portrait;
|
size: A4 portrait;
|
||||||
margin: 10mm 12mm 10mm 12mm;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
@@ -31,17 +31,18 @@
|
|||||||
print-color-adjust: exact !important;
|
print-color-adjust: exact !important;
|
||||||
color-adjust: exact !important;
|
color-adjust: exact !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body.cookbook-body {
|
html, body.cookbook-body {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
min-width: 186mm !important;
|
max-width: 100% !important;
|
||||||
height: auto !important;
|
|
||||||
min-height: auto !important;
|
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
background: var(--creme) !important;
|
background: var(--creme) !important;
|
||||||
|
background-color: #FAF7F2 !important;
|
||||||
color: var(--schwarz) !important;
|
color: var(--schwarz) !important;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
@@ -76,26 +77,30 @@
|
|||||||
overflow: visible !important;
|
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 {
|
.page {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
position: relative !important;
|
||||||
max-width: 100% !important;
|
width: 210mm !important;
|
||||||
height: auto !important;
|
max-width: 210mm !important;
|
||||||
min-height: auto !important;
|
min-width: 210mm !important;
|
||||||
max-height: none !important;
|
height: 286mm !important;
|
||||||
margin: 0 !important;
|
min-height: 286mm !important;
|
||||||
padding: 0 !important;
|
max-height: 286mm !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
padding: 8mm 12mm 18mm 12mm !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
background: transparent !important;
|
background: var(--creme) !important;
|
||||||
|
background-color: #FAF7F2 !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
border: none !important;
|
||||||
|
outline: none !important;
|
||||||
border-radius: 0 !important;
|
border-radius: 0 !important;
|
||||||
page-break-after: always !important;
|
page-break-after: always !important;
|
||||||
break-after: page !important;
|
break-after: page !important;
|
||||||
page-break-inside: avoid !important;
|
page-break-inside: avoid !important;
|
||||||
break-inside: avoid !important;
|
break-inside: avoid !important;
|
||||||
overflow: visible !important;
|
overflow: hidden !important;
|
||||||
position: relative !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page:first-child {
|
.page:first-child {
|
||||||
@@ -299,10 +304,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ingredients-box {
|
.ingredients-box {
|
||||||
padding: 4px 6px !important;
|
padding: 2px 4px !important;
|
||||||
border: 1px dashed rgba(30, 77, 59, 0.4) !important;
|
background: transparent !important;
|
||||||
background: rgba(255, 255, 255, 0.7) !important;
|
border: none !important;
|
||||||
border-radius: 6px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-hand-title {
|
.section-hand-title {
|
||||||
@@ -422,15 +426,19 @@
|
|||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 5. SEITENZAHL AM FUẞ DER SEITE */
|
/* 5. SEITENZAHL FEST IN DEN ECKEN DES BLATTES VERANKERT */
|
||||||
.page-footer {
|
.page-footer {
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 7mm !important;
|
||||||
|
left: 12mm !important;
|
||||||
|
right: 12mm !important;
|
||||||
|
width: auto !important;
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
border: none !important;
|
||||||
margin-top: 4mm !important;
|
border-top: none !important;
|
||||||
padding-top: 2mm !important;
|
margin: 0 !important;
|
||||||
border-top: 1px dotted rgba(30, 77, 59, 0.3) !important;
|
padding: 0 !important;
|
||||||
box-sizing: border-box !important;
|
z-index: 100 !important;
|
||||||
clear: both !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-footer.page-even {
|
.page-footer.page-even {
|
||||||
@@ -443,17 +451,12 @@
|
|||||||
|
|
||||||
.page-footer .page-number {
|
.page-footer .page-number {
|
||||||
font-family: var(--font-hand), 'Caveat', cursive !important;
|
font-family: var(--font-hand), 'Caveat', cursive !important;
|
||||||
font-size: 1.15rem !important;
|
font-size: 1.25rem !important;
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
color: var(--tannengruen) !important;
|
color: var(--tannengruen) !important;
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider .page-footer {
|
|
||||||
border-top: none !important;
|
|
||||||
margin-top: 15mm !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover .page-footer {
|
.cover .page-footer {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user