mobile improvements

fezcode · fezcode · commit dbfa58a2da65 · 2025-10-25T00:24:52.000+03:00
diff --git a/src/index.css b/src/index.css
@@ -73,3 +73,9 @@ code {
   --color-series-badge: #e11d48; /* rose-600 */
   --color-dnd-badge: #583fa3; /* violet-400 */
 }
+
+@media (max-width: 768px) {
+  body {
+    font-family: serif !important;
+  }
+}
diff --git a/src/pages/DndLorePage.js b/src/pages/DndLorePage.js
@@ -105,9 +105,9 @@ function DndLorePage() {
         <h1 className="dnd-title-box">
           <span className="dnd-hero-title-white">The Lore</span>
         </h1>
-        <div className="dnd-content-box" style={{ zIndex: 1 }}>
+        <div className="dnd-content-box dnd-books-section" style={{ zIndex: 1 }}>
           <h2 >Books</h2>
-          <Slider {...settings}>
+          <Slider {...settings} className="dnd-carousel">
             {episodes.map((book) => (
               <div key={book.bookId} className="px-12"> {/* Add padding for spacing between cards */}
                 <DndCard
diff --git a/src/styles/dnd.css b/src/styles/dnd.css
@@ -358,3 +358,27 @@
 .dnd-list-item-link:hover {
   color: #FFB03A;
 }
+
+@media (max-width: 768px) {
+  .dnd-page-container,
+  .dnd-navbar,
+  .dnd-footer {
+    font-family: serif !important;
+  }
+
+  .dnd-books-section {
+    display: none;
+  }
+
+  .dnd-breadcrumbs {
+    display: none;
+  }
+
+  .dnd-navbar-center {
+    display: none;
+  }
+
+  .dnd-footer-logo-section {
+    display: none;
+  }
+}
