DND: From Serfs and Frauds 4

fezcode · fezcode · commit d2bd156be24f · 2025-10-24T01:44:18.000+03:00
diff --git a/src/pages/DndEpisodePage.js b/src/pages/DndEpisodePage.js
@@ -171,21 +171,21 @@ function DndEpisodePage() {
           ))}
         </div>
 
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '90%', maxWidth: '800px', margin: '2rem auto', zIndex: 1 }}>
-          <div style={{ flex: 1, textAlign: 'left' }}>
+        <div className="flex flex-wrap justify-between w-[90%] max-w-[800px] mx-auto my-8 z-10 gap-4">
+          <div className="flex-1 text-left min-w-[200px]">
             {prevEpisode && (
-                          <Link to={`/dnd/books/${bookId}/pages/${prevEpisode.id}`} style={{ color: '#E09500', textDecoration: 'none', fontSize: '1.3rem', textShadow: '2px 2px 4px rgba(0, 0, 0, 1)', border: '1px solid #E09500', padding: '0.5rem 1rem', borderRadius: '5px', backgroundColor: 'rgba(100, 60, 0, 0.5)' }}>
+                          <Link to={`/dnd/books/${bookId}/pages/${prevEpisode.id}`} className="dnd-episode-nav-button">
                             &larr; Previous Episode
                           </Link>            )}
           </div>
-          <div style={{ flex: 1, textAlign: 'center' }}>
-            <Link to="/dnd/lore" style={{ color: '#E09500', textDecoration: 'none', fontSize: '1.3rem', textShadow: '2px 2px 4px rgba(0, 0, 0, 1)', border: '1px solid #E09500', padding: '0.5rem 1rem', borderRadius: '5px', backgroundColor: 'rgba(100, 60, 0, 0.5)' }}>
+          <div className="flex-1 text-center min-w-[200px]">
+            <Link to="/dnd/lore" className="dnd-episode-nav-button">
               Show All Episodes
             </Link>
           </div>
-          <div style={{ flex: 1, textAlign: 'right' }}>
+          <div className="flex-1 text-right min-w-[200px]">
             {nextEpisode && (
-                          <Link to={`/dnd/books/${bookId}/pages/${nextEpisode.id}`} style={{ color: '#E09500', textDecoration: 'none', fontSize: '1.3rem', textShadow: '2px 2px 4px rgba(0, 0, 0, 1)', border: '1px solid #E09500', padding: '0.5rem 1rem', borderRadius: '5px', backgroundColor: 'rgba(100, 60, 0, 0.5)' }}>
+                          <Link to={`/dnd/books/${bookId}/pages/${nextEpisode.id}`} className="dnd-episode-nav-button">
                             Next Episode &rarr;
                           </Link>            )}
           </div>
diff --git a/src/styles/dnd.css b/src/styles/dnd.css
@@ -7,13 +7,10 @@
   background-position: center;
   color: #fff;
   font-family: 'MedievalSharp', cursive;
-  overflow: hidden;
-  min-height: 100vh; /* Ensure it takes full viewport height */
-  /*padding-bottom: 200px; !* Add padding for fixed footer *!*/
 }
 
 .dnd-hero {
-  min-height: 100vh;
+  min-height: calc(100vh - 12rem);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -275,9 +272,7 @@
   align-items: flex-start;
   font-family: 'MedievalSharp', cursive;
   color: #FFA500; /* Orange */
-  position: fixed; /* Change to fixed for a sticky footer */
-  bottom: 0;
-  width: 100%;
+  position: relative;
   z-index: 10;
   min-height: 200px; /* Make footer larger */
 }
@@ -324,3 +319,21 @@
   color: #e0e0e0;
   margin-top: 0.5rem;
 }
+
+.dnd-episode-nav-button {
+  color: #E09500;
+  text-decoration: none;
+  font-size: 1.3rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
+  border: 1px solid #E09500;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  background-color: rgba(100, 60, 0, 0.5);
+  display: inline-block; /* To apply padding and border correctly */
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
+.dnd-episode-nav-button:hover {
+  background-color: rgba(150, 90, 0, 0.7); /* Darker on hover */
+  color: #FFB03A; /* Lighter text on hover */
+}
