1

pages/novel/[slug]/[chapter].tsx

@@ -51,7 +51,7 @@ const Chapter: NextPageWithLayout = () => {
           </button>
         </div>
       </header>
-      <main className="flex justify-center">
+      <main className={styles["chapter-main"]}>
         <div className={styles["chapter-page"]}>
           <article className={styles["novel"]}>
             <header>

styles/chapter.module.scss

@@ -1,11 +1,18 @@
 .chapter-page {
-  @apply w-full lg:w-0 lg:max-w-4xl flex-1 p-5 bg-white;
+  @apply w-full lg:w-0 lg:max-w-3xl flex-1 py-5 px-10 border-x border-x-gray-200 bg-white;
   :global(.dark) & {
-    @apply bg-gray-800;
+    @apply bg-gray-800 border-x-gray-700;
   }
 }
 .chapter-header {
   @apply flex px-5 items-center relative;
+  @apply lg:sticky;
+}
+.chapter-main {
+  @apply flex justify-center bg-gray-100;
+  :global(.dark) & {
+    @apply bg-gray-900;
+  }
 }
 .novel {
   @apply w-full;
@@ -20,8 +27,8 @@
   }
 }
 .toolbar {
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30; // hidden;
-  @apply lg:right-0 lg:w-11 lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center ; 
+  @apply fixed bottom-0 left-0 w-full bg-gray-800 z-30 text-gray-400; // hidden;
+  @apply lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center;
   .toolbar-items {
     @apply flex lg:flex-col lg:w-full;
   }
@@ -37,15 +44,15 @@
     // gap: 0.25rem;
     // border-color: currentColor;
 
-    @apply flex-1 flex items-center justify-center py-5;
+    @apply flex-1 flex items-center justify-center py-5 lg:border-t lg:border-t-gray-900 lg:p-4 lg:hover:bg-gray-700 lg:last:border-b lg:last:border-b-gray-900;
     svg {
-      @apply w-full w-5 h-5;
+      @apply w-5 h-5 lg:w-4 lg:h-4;
     }
   }
 }
 .toolbar-display {
-  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 pt-4 pb-5 px-5;
-  @apply relative w-96;
+  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 pt-4 pb-5 px-5 hidden;
+  @apply lg:relative lg:w-96;
   .toolbar-display-title {
     @apply text-base mb-2;
   }