change to grid layout and make navigation header not show up when printing
This commit is contained in:
Sven Balzer
parent
2c8341cd1e
commit
ecbe717655
183
dnd-book.css
183
dnd-book.css
@ -1,112 +1,81 @@
|
||||
/* Container für das Buchlayout */
|
||||
.phb {
|
||||
width: 210mm;
|
||||
/* A4 Breite */
|
||||
height: 296.8mm;
|
||||
/* A4 Höhe */
|
||||
margin: 20mm auto;
|
||||
/* Zentriert das Layout horizontal auf dem Bildschirm */
|
||||
padding: 10mm;
|
||||
/* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
|
||||
position: relative;
|
||||
background-image: url('./background.png');
|
||||
/* Hintergrundbild */
|
||||
background-size: cover;
|
||||
/* Hintergrundbild strecken */
|
||||
background-position: center;
|
||||
/* Bild zentrieren */
|
||||
box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3);
|
||||
/* Schatten links und rechts */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* Zentriert die Spalten */
|
||||
box-sizing: border-box;
|
||||
page-break-before: always;
|
||||
/* Seite beginnt immer nach einer neuen phb */
|
||||
font-size: 1em; /* Basis-Schriftgröße */
|
||||
}
|
||||
.pages {
|
||||
--page-width: 210mm;
|
||||
--page-height: calc(var(--page-width) * sqrt(2));
|
||||
|
||||
.phb::after {
|
||||
content: "";
|
||||
/* Necessary for the pseudo-element to be visible */
|
||||
width: var(--page-width);
|
||||
margin: 2em auto;
|
||||
|
||||
font-size: 12pt;
|
||||
color: #222;
|
||||
|
||||
display: grid;
|
||||
gap: 2em;
|
||||
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
|
||||
width: var(--page-width);
|
||||
height: var(--page-height);
|
||||
padding: 15mm;
|
||||
|
||||
background-image: url('./background.png');
|
||||
background-size: cover;
|
||||
|
||||
box-shadow: -10px 0 20px rgba(0, 0, 0, 0.3), 10px 0 20px rgba(0, 0, 0, 0.3);
|
||||
|
||||
display: grid;
|
||||
gap: 10mm;
|
||||
|
||||
&:has(> :last-child:nth-child(1)) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
&:has(> :last-child:nth-child(2)) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
& > * > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
|
||||
background-color: #e0e5c1;
|
||||
border-image: url('./note-wrap.png') 11 / auto / 9px 0;
|
||||
|
||||
box-shadow: 1px 4px 14px #888;
|
||||
}
|
||||
|
||||
& table {
|
||||
width: 100%;
|
||||
|
||||
& td, th {
|
||||
border: 1pt solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 55px;
|
||||
|
||||
width: 100%;
|
||||
height: 42pt;
|
||||
|
||||
content: "";
|
||||
background-image: url('./footer_even.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* Ensure image is centered */
|
||||
padding-top: 28px;
|
||||
/* Adjust the vertical position of the text */
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding-left: 65px;
|
||||
padding-right: 85px;
|
||||
line-height: 1.1;
|
||||
color: white;
|
||||
/* Ensure text is readable over the footer image */
|
||||
z-index: 2;
|
||||
/* Ensure footer is always above other content */
|
||||
box-sizing: border-box;
|
||||
/* Ensure padding is included in the element's width/height */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout für die Spalten */
|
||||
.phb .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1%;
|
||||
/* Verringert den Abstand zwischen den Spalten */
|
||||
width: 100%;
|
||||
/* Gesamtbreite für den Inhalt */
|
||||
}
|
||||
|
||||
/* Jede Spalte nimmt 48% der Breite ein */
|
||||
.phb .column {
|
||||
width: 48%;
|
||||
/* Breite der Spalten */
|
||||
padding: 5mm;
|
||||
/* Reduziert das Padding in den Spalten */
|
||||
box-sizing: border-box;
|
||||
color: #222;
|
||||
line-height: 1.5;
|
||||
page-break-inside: avoid;
|
||||
/* Verhindert, dass der Inhalt in eine neue Seite umbricht */
|
||||
}
|
||||
|
||||
|
||||
/* Stil für Blockquotes */
|
||||
.phb blockquote {
|
||||
margin: 0 0 21px;
|
||||
font-size: 1em;
|
||||
border-left: 5px solid #f4f5f5;
|
||||
font-family: ScalySans;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 10px;
|
||||
background-color: #e0e5c1;
|
||||
border-style: solid;
|
||||
border-width: 11px;
|
||||
border-image: url('./note-wrap.png') 11;
|
||||
border-image-outset: 0;
|
||||
border-image-outset: 9px 0;
|
||||
box-shadow: 1px 4px 14px #888;
|
||||
}
|
||||
|
||||
/* Stil für Tabellen */
|
||||
.phb table {
|
||||
font-size: 0.8em;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Stil für Tabellenkopf */
|
||||
.phb table th,
|
||||
.phb table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
@media print {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Überschriften und Absätze */
|
||||
@ -148,13 +117,3 @@
|
||||
font-size: .8em;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */
|
||||
.phb:not(:first-of-type) {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
/* Stil für den Blockquote */
|
||||
.phb blockquote hr {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M0 0l2 1L0 2z' fill='%239c2b1b'/%3E%3C/svg%3E");
|
||||
}
|
||||
26
test.html
26
test.html
@ -19,11 +19,9 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Seite 1 -->
|
||||
<div class="phb">
|
||||
<div class="content">
|
||||
<!-- Erste Spalte: Elfen -->
|
||||
<div class="column">
|
||||
<div class="pages">
|
||||
<div class="page">
|
||||
<div>
|
||||
<h1>Die Elfen und ihre Geschichte</h1>
|
||||
<p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
|
||||
|
||||
@ -55,9 +53,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Zweite Spalte: Zwerge -->
|
||||
<div class="column">
|
||||
<div>
|
||||
<h1>Die Zwerge und ihre Bedeutung</h1>
|
||||
<p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
|
||||
|
||||
@ -90,13 +86,8 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seite 2 (neues Bild und Inhalt) -->
|
||||
<div class="phb">
|
||||
<div class="content">
|
||||
<!-- Erste Spalte für die nächste Seite -->
|
||||
<div class="column">
|
||||
<div class="page">
|
||||
<div>
|
||||
<h1>Die Magie der Welt</h1>
|
||||
<p>Die Magie durchzieht die Welt, sie ist die Quelle der größten Kräfte und der gefährlichsten Geheimnisse...</p>
|
||||
|
||||
@ -104,9 +95,7 @@
|
||||
<p>„Magie ist die Sprache der Welt, die jeder versteht, der mit der richtigen Intention hört“, erklärte der alte Zauberer.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<!-- Zweite Spalte für die nächste Seite -->
|
||||
<div class="column">
|
||||
<div>
|
||||
<h1>Die Götter und ihre Anhänger</h1>
|
||||
<p>Die Götter der Welt sind nicht nur Wesen von unvorstellbarer Macht, sondern auch Teil des täglichen Lebens...</p>
|
||||
|
||||
@ -130,6 +119,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -63,6 +63,10 @@ body {
|
||||
display: flex;
|
||||
gap: 2em
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user