Added mobile responsiveness and print styles for book-like experience

Copilot · 0xrinegade · Copilot · commit 910a4f08cbc1 · 2025-05-24T12:53:14.000Z
Co-authored-by: 0xrinegade &lt;101195284+0xrinegade@users.noreply.github.com&gt;
diff --git a/docs.html b/docs.html
@@ -218,6 +218,22 @@
             margin: 0 auto;
         }
 
+        @media (max-width: 768px) {
+            .chart-container {
+                height: 250px;
+            }
+            
+            .infographic-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .book-nav {
+                flex-direction: column;
+                gap: 1rem;
+                align-items: center;
+            }
+        }
+
         .infographic-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -239,6 +255,47 @@
             border-bottom: 1px solid #D4D4D4;
             padding-bottom: 0.25rem;
         }
+
+        /* Print styles for book-like printing */
+        @media print {
+            body {
+                font-size: 12pt;
+            }
+
+            .header, .footer, #sidebar, .book-nav {
+                display: none !important;
+            }
+
+            #content {
+                width: 100% !important;
+                margin: 0 !important;
+                padding: 0 !important;
+            }
+
+            #markdown-content {
+                box-shadow: none !important;
+                padding: 0 !important;
+                background-color: white !important;
+            }
+
+            .book-chapter {
+                page-break-after: always;
+                border-bottom: none;
+            }
+
+            .chart-container {
+                height: 400px !important;
+                page-break-inside: avoid;
+            }
+
+            .diagram-container {
+                page-break-inside: avoid;
+            }
+
+            .infographic-grid {
+                page-break-inside: avoid;
+            }
+        }
     </style>
 </head>
 <body>
@@ -414,6 +471,8 @@ <h2 class="font-bold">Error Loading Document</h2>
         }
 
         // Override the original loadMarkdown function to add our enhancement logic
+        // We no longer need this since we modified the original loadMarkdown function
+        /* 
         const originalLoadMarkdown = loadMarkdown;
         loadMarkdown = async function(path) {
             await originalLoadMarkdown(path);
@@ -422,6 +481,7 @@ <h2 class="font-bold">Error Loading Document</h2>
                 checkAndEnhanceContent();
             }, 100);
         };
+        */
 
         // Functions to add specific diagrams
         function addServiceEscrowDiagram() {
