change to grid layout and make navigation header not show up when printing

dnd-book.css

@@ -1,112 +1,81 @@
-/* Container für das Buchlayout */
+.pages {
-.phb {
+    --page-width:  210mm;
-    width: 210mm;
+    --page-height: calc(var(--page-width) * sqrt(2));
-    /* 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 */
-}
 
-.phb::after {
+    width: var(--page-width);
-    content: "";
+    margin: 2em auto;
-    /* 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 */
-}
 
-/* Layout für die Spalten */
+    font-size: 12pt;
-.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 */
-}
 
+    display: grid;
+    gap: 2em;
 
-/* Stil für Blockquotes */
+    & * {
-.phb blockquote {
+        box-sizing: border-box;
-    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 {
+        position: relative;
-    font-size: 0.8em;
-    width: 100%;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
 
-/* Stil für Tabellenkopf */
+        width:   var(--page-width);
-.phb table th,
+        height:  var(--page-height);
-.phb table td {
+        padding: 15mm;
-    padding: 5px;
+
-    border: 1px solid #ccc;
+        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;
+
+            width:  100%;
+            height: 42pt;
+
+            content: "";
+            background-image: url('./footer_even.png');
+            background-size: cover;
+        }
+    }
+
+    @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");
-}

test.html

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

website_main.css

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