diff --git a/dnd-book.css b/dnd-book.css index 0e4434a..cf27ef4 100644 --- a/dnd-book.css +++ b/dnd-book.css @@ -1,45 +1,97 @@ /* 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 */ + 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 */ + 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 */ + justify-content: center; + /* Zentriert die Spalten */ box-sizing: border-box; - page-break-before: always; /* Seite beginnt immer nach einer neuen phb */ + page-break-before: always; + /* Seite beginnt immer nach einer neuen phb */ + font-size: 16px; /* Basis-Schriftgröße */ +} + +.phb::after { + content: ""; + /* Necessary for the pseudo-element to be visible */ + position: absolute; + bottom: 0; + left: 0; + height: 55px; + width: 100%; + 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: 11px; + 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 */ + 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 */ + 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 */ + page-break-inside: avoid; + /* Verhindert, dass der Inhalt in eine neue Seite umbricht */ } /* Stil für Blockquotes */ .phb blockquote { - background-color: lightgrey; - margin-top: 1em; - padding: 0.5em; - font-style: italic; + margin: 0 0 21px; + font-size: 17.5px; + 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 */ @@ -51,17 +103,50 @@ } /* Stil für Tabellenkopf */ -.phb table th, .phb table td { +.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; +.phb h1, +.phb h2, +.phb h3, +.phb h4 { + margin-top: .2em; + margin-bottom: .2em; + font-family: 'MrJeeves', sans-serif; + font-weight: 800; color: #58180D; - font-weight: bold; +} + +.phb h1 { + column-span: all; + font-size: 2.3em; + -webkit-column-span: all; + -moz-column-span: all; +} + +.phb h2 { + font-size: 1.6em; +} + +.phb h3 { + font-size: 1.2em; + border-bottom: 2px solid #c9ad6a; +} + +.phb h4 { + margin-bottom: 0; + font-size: 1em; +} + +.phb h5 { + margin-bottom: .2em; + font-family: 'ScalySansSmallCaps', sans-serif; + font-size: .8em; + font-weight: 900; } /* Sicherstellen, dass die nächste Seite nach der ersten immer auf einer neuen Seite beginnt */ @@ -69,17 +154,7 @@ page-break-before: always; } -.phb h2 { - font-size: 1.8em; - margin-bottom: 10px; -} - -.phb h3 { - font-size: 0.529cm; - border-bottom: 2px solid #c9ad6a; -} - /* 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"); -} +} \ No newline at end of file diff --git a/footer_even.png b/footer_even.png new file mode 100644 index 0000000..7dba862 Binary files /dev/null and b/footer_even.png differ diff --git a/note-wrap.png b/note-wrap.png new file mode 100644 index 0000000..7aaf7fa Binary files /dev/null and b/note-wrap.png differ