dnd-book.css

@@ -1,81 +1,112 @@
-.pages {
+/* Container für das Buchlayout */
-    --page-width:  210mm;
+.phb {
-    --page-height: calc(var(--page-width) * sqrt(2));
+    width: 210mm;
-
+    /* A4 Breite */
-    width: var(--page-width);
+    height: 296.8mm;
-    margin: 2em auto;
+    /* A4 Höhe */
-
+    margin: 20mm auto;
-    font-size: 12pt;
+    /* Zentriert das Layout horizontal auf dem Bildschirm */
-    color: #222;
+    padding: 10mm;
-
+    /* Verringert das Padding auf der Seite, um mehr Platz zu schaffen */
-    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');
+    /* 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: grid;
+    display: flex;
-        gap: 10mm;
+    justify-content: center;
-
+    /* Zentriert die Spalten */
-        &:has(> :last-child:nth-child(1)) {
+    box-sizing: border-box;
-            grid-template-columns: 1fr;
+    page-break-before: always;
+    /* Seite beginnt immer nach einer neuen phb */
+    font-size: 1em; /* Basis-Schriftgröße */
 }
 
-        &:has(> :last-child:nth-child(2)) {
+.phb::after {
-            grid-template-columns: repeat(2, 1fr);
+    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: 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 */
 }
 
-        & > * > :first-child {
+/* Layout für die Spalten */
-            margin-top: 0;
+.phb .content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1%;
+    /* Verringert den Abstand zwischen den Spalten */
+    width: 100%;
+    /* Gesamtbreite für den Inhalt */
 }
 
-        & blockquote {
+/* Jede Spalte nimmt 48% der Breite ein */
-            margin: 1em 0;
+.phb .column {
-            padding: 1em;
+    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-image: url('./note-wrap.png') 11 / auto / 9px 0;
+    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;
 }
 
-        & table {
+/* Stil für Tabellen */
+.phb table {
+    font-size: 0.8em;
     width: 100%;
-
+    margin-top: 10px;
-            & td, th {
+    margin-bottom: 10px;
-                border: 1pt solid #ccc;
-            }
 }
 
-        &::after {
+/* Stil für Tabellenkopf */
-            position: absolute;
+.phb table th,
-            bottom: 0;
+.phb table td {
-
+    padding: 5px;
-            width:  100%;
+    border: 1px solid #ccc;
-            height: 42pt;
-
-            content: "";
-            background-image: url('./footer_even.png');
-            background-size: cover;
-        }
-    }
-
-    @media print {
-        margin: 0;
-    }
 }
 
 /* Überschriften und Absätze */
@@ -117,3 +148,13 @@
     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");
+}

test.html

@@ -19,9 +19,11 @@
         </div>
     </header>
 
-    <div class="pages">
+    <!-- Seite 1 -->
-        <div class="page">
+    <div class="phb">
-            <div>
+        <div class="content">
+            <!-- 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>
 
@@ -53,7 +55,9 @@
                     </tr>
                 </table>
             </div>
-            <div>
+
+            <!-- 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>
 
@@ -86,8 +90,13 @@
                 </table>
             </div>
         </div>
-        <div class="page">
+    </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>
 
@@ -95,7 +104,9 @@
                     <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>
-            <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>
 
@@ -119,5 +130,6 @@
             </div>
         </div>
     </div>
+
 </body>
 </html>

website_main.css

@@ -12,62 +12,55 @@
 
 /*BODY*/
 body {
-    margin: 0em;
-
-    font-family: 'Inconsolata', 'Courier New';
-    font-size: 16pt;
-
-    color: #EEE;
     background: #292a2d;
-
+    color: #EEE;
-    & a {
+    margin: 0em;
-        text-decoration: none;
 }
 
-    & > header {
+/*##########################################################*/
-        position: sticky;
+/*HEADER*/
-        z-index:  100;
+header {
-        top:      0;
+    z-index: 1;
-
+    display: flex;
-        margin-bottom: 1em;
+    position: fixed;
-
+    width: 100%;
-        background: #151617;
-        font-size: 1.2em;
     line-height: 3.5em;
+    background: #151617;
     box-shadow:  0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
-
+    /*font*/
-        display: grid;
+    font-size: 1.2em;
-        grid-template-columns: minmax(0, 3em) max-content auto max-content minmax(0, 3em);
-
-        & a {
-            color: inherit;
-
-            &:hover {
-                transform: scale(1.02);
-                text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
-            }
 }
 
-        & .title {
+header .title {
-            grid-column: 2;
+    margin-left: 3em;
-
-            font-size: 1.6em;
     font-weight: bold;
-
+    font-size: 1.6em;
     text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
 }
 
-        & .menu {
+header .title a{
-            grid-column: 4;
+    color: inherit;
-
+    text-decoration: none;
-            display: flex;
-            gap: 2em
 }    
 
-        @media print {
+header .menu {
-            display: none;
+    margin-left: auto;
+    margin-right: 3em;
 }
+
+header .menu a{
+    color: inherit;
+    text-decoration: none;
+    margin-right: 2em;
 }
+
+header .menu a:last-child {
+    margin-right: 0; /* No margin for the last menu item */
+}
+
+header .menu a:hover {
+    transform: scale(1.02);
+    text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
 }
 
 /*##########################################################*/