add multiple pages
This commit is contained in:
parent
6ec2131a45
commit
a8c6569e10
120
dnd-book.css
120
dnd-book.css
@ -1,60 +1,60 @@
|
||||
/* Setzt den Hintergrund und das Layout der Seite */
|
||||
.phb {
|
||||
width: 210mm; /* A4-Breite */
|
||||
height: 296.8mm; /* A4-Höhe */
|
||||
font-family: 'bookmania', sans-serif;
|
||||
background-image: url('./background.png'); /* Hintergrundbild */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #222;
|
||||
/* Container für das Buchlayout */
|
||||
.phb {
|
||||
width: 210mm; /* A4 Breite */
|
||||
height: 296.8mm; /* A4 Höhe */
|
||||
margin: 20mm;
|
||||
padding: 20mm;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
|
||||
page-break-after: always; /* Um sicherzustellen, dass nach jeder Seite ein Umbruch erfolgt */
|
||||
position: relative;
|
||||
background-image: url('./background.png'); /* Hintergrundbild */
|
||||
background-size: cover; /* Hintergrundbild strecken */
|
||||
background-position: center; /* Bild zentrieren */
|
||||
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Schatten */
|
||||
page-break-after: always; /* Seitensprung nach jeder Seite */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Flexbox für die Spalten */
|
||||
/* Layout für die Spalten */
|
||||
.phb .content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2%;
|
||||
padding-top: 10mm;
|
||||
flex-wrap: wrap;
|
||||
gap: 2%; /* Abstand zwischen den Spalten */
|
||||
}
|
||||
|
||||
/* Jede Spalte nimmt 48% der Breite ein */
|
||||
.phb .column {
|
||||
width: 48%;
|
||||
width: 48%; /* Breite der Spalten */
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
color: #222;
|
||||
line-height: 1.5;
|
||||
page-break-inside: avoid; /* Verhindert, dass der Inhalt in eine neue Seite umbricht */
|
||||
}
|
||||
|
||||
/* Seitenumbruch nach jeder zweiten Spalte */
|
||||
@media print {
|
||||
.phb {
|
||||
page-break-before: always; /* Neue Seite, wenn genug Inhalt vorhanden ist */
|
||||
}
|
||||
/* Blockquote */
|
||||
.phb blockquote {
|
||||
background-color: lightgrey;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* Stil für den Inhalt, wenn eine neue Seite beginnt */
|
||||
.phb .content:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
.phb table {
|
||||
font-size: 9pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Stile für Überschriften */
|
||||
/* Zusätzliche Stile für Tabellen und andere Elemente */
|
||||
.phb table th, .phb table td {
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Überschriften und Absätze */
|
||||
.phb h1, .phb h2, .phb h3, .phb h4, .phb h5 {
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
font-family: 'MrJeeves', sans-serif;
|
||||
font-weight: 800;
|
||||
color: #58180D;
|
||||
}
|
||||
|
||||
/* Stil für Unterüberschriften */
|
||||
.phb h2 {
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 10px;
|
||||
@ -65,59 +65,7 @@
|
||||
border-bottom: 2px solid #c9ad6a;
|
||||
}
|
||||
|
||||
.phb h5 {
|
||||
font-family: ff-scala-sans-pro;
|
||||
font-variant: small-caps;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* Zusätzlicher Stil für Blockquotes */
|
||||
.phb blockquote {
|
||||
background-color: lightgrey;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* Beispiel für Bilder in einem Blockquote */
|
||||
.phb blockquote img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Dynamische Spaltenerstellung auf der Seite */
|
||||
.phb .column {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 48%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
/* Zusätzliche Stile für Text */
|
||||
.phb table {
|
||||
font-size: 9pt;
|
||||
width: 100%;
|
||||
font-family: ff-scala-sans-pro;
|
||||
}
|
||||
|
||||
/* Porträts */
|
||||
.portrait {
|
||||
width: 22%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Dynamische Bildpositionierung innerhalb der Seite */
|
||||
.phb .content hr+hr+section blockquote img.portrait {
|
||||
width: 10%;
|
||||
left: 38%;
|
||||
}
|
||||
|
||||
/* Seitenumbruch innerhalb des Drucks */
|
||||
@media print {
|
||||
.phb {
|
||||
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");
|
||||
}
|
||||
|
||||
116
test.html
116
test.html
@ -7,9 +7,11 @@
|
||||
<link rel="stylesheet" href="dnd-book.css"> <!-- Dein CSS-File -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Seite 1 -->
|
||||
<div class="phb">
|
||||
<div class="content">
|
||||
<!-- Erster Abschnitt der Spalten: Elfen -->
|
||||
<!-- Erste Spalte: Elfen -->
|
||||
<div class="column">
|
||||
<h1>Die Elfen und ihre Geschichte</h1>
|
||||
<p>Die Elfen sind eine uralte Rasse, bekannt für ihre Weisheit und Verbindung zur Natur...</p>
|
||||
@ -19,9 +21,31 @@
|
||||
|
||||
<h3>Die goldene Ära der Elfen</h3>
|
||||
<p>In der goldenen Ära der Elfen errichteten sie monumentale Städte...</p>
|
||||
|
||||
<blockquote>
|
||||
<p>„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“</p>
|
||||
</blockquote>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Charakter</th>
|
||||
<th>Rasse</th>
|
||||
<th>Waffe</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Filaron</td>
|
||||
<td>Elf</td>
|
||||
<td>Bogen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grunther</td>
|
||||
<td>Zwerg</td>
|
||||
<td>Axt</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Zweiter Abschnitt der Spalten: Zwerge -->
|
||||
<!-- Zweite Spalte: Zwerge -->
|
||||
<div class="column">
|
||||
<h1>Die Zwerge und ihre Bedeutung</h1>
|
||||
<p>Die Zwerge sind für ihre Handwerkskunst und ihren tiefen Bezug zu den Bergen bekannt...</p>
|
||||
@ -32,35 +56,69 @@
|
||||
<h3>Die Zwergenkriege und ihre Krieger</h3>
|
||||
<p>Die Geschichte der Zwerge ist von zahllosen Kriegen und Schlachten geprägt...</p>
|
||||
|
||||
<!-- Blockquote -->
|
||||
<blockquote>
|
||||
<p>„Der Wald ist nicht nur ein Ort, sondern ein lebendiger Organismus“, sagte der weise Magier. „Wer sich in ihn wagt, muss die Regeln des Waldes respektieren.“</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>„Die Stärke eines Zwerges liegt nicht nur in seiner Axt, sondern in seinem unerschütterlichen Willen“, sagte der alte Schmied.</p>
|
||||
</blockquote>
|
||||
|
||||
<!-- Tabelle -->
|
||||
<table>
|
||||
<tr>
|
||||
<th>Charakter</th>
|
||||
<th>Rasse</th>
|
||||
<th>Waffe</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Filaron</td>
|
||||
<td>Elf</td>
|
||||
<td>Bogen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grunther</td>
|
||||
<td>Zwerg</td>
|
||||
<td>Axt</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Weiterer Text -->
|
||||
<p>Die beiden Abenteurer erreichten schließlich den Wald und standen vor der Entscheidung, ob sie den geheimen Pfad betreten sollten...</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Charakter</th>
|
||||
<th>Rasse</th>
|
||||
<th>Waffe</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thorin</td>
|
||||
<td>Zwerg</td>
|
||||
<td>Hammer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Haldor</td>
|
||||
<td>Zwerg</td>
|
||||
<td>Schwert</td>
|
||||
</tr>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<blockquote>
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Gottheit</th>
|
||||
<th>Domäne</th>
|
||||
<th>Anhänger</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Aerath</td>
|
||||
<td>Winde</td>
|
||||
<td>Flügelvolk</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Valkor</td>
|
||||
<td>Krieg</td>
|
||||
<td>Kriegsherren</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user