Dark mode, unbreak toc

src/app.css

@@ -138,7 +138,7 @@
       display: none;
   }
 
-  .leather {
+  .leather, .publication-leather {
     @apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100;
   }
 

src/lib/components/publications/Publication.svelte

@@ -253,7 +253,7 @@
 </script>
 
 <!-- Add gap & items-start so sticky sidebars size correctly -->
-<div class="grid gap-4 items-start grid-cols-[1fr_3fr_1fr] grid-rows-[auto_1fr]">
+<div class="relative grid gap-4 items-start grid-cols-[1fr_3fr_1fr] grid-rows-[auto_1fr]">
   <!-- Full-width ArticleNav row -->
     <ArticleNav
       publicationType={publicationType}
@@ -263,18 +263,20 @@
   <!-- Three-column row -->
   <div class="contents">
     <!-- Table of contents -->
+    <div class="mt-[70px] relative {$publicationColumnVisibility.toc ? 'w-64' : 'w-auto'}">
       {#if publicationType !== "blog" && !isLeaf}
+        {#if $publicationColumnVisibility.toc}
           <Sidebar
-        class="z-10 ml-4 bg-transparent sticky top-[162px] h-[calc(100vh-165px)] overflow-y-auto"
+            class="z-10 ml-2 fixed top-[162px] max-h-[calc(100vh-165px)] overflow-y-auto dark:bg-primary-800 bg-primary-50 rounded"
             activeUrl={`#${activeAddress ?? ""}`}
             classes={{
-          div: 'bg-transparent',
+          div: 'dark:bg-primary-800 bg-primary-50',
           active: 'bg-primary-100 dark:bg-primary-800 p-2 rounded-lg',
           nonactive: 'bg-primary-50 dark:bg-primary-800',
         }}
           >
             <SidebarWrapper>
-          {#if $publicationColumnVisibility.toc}
+              <CloseButton color="secondary" class="m-2 dark:text-primary-100" onclick={closeToc} ></CloseButton>
               <TableOfContents
                 {rootAddress}
                 {toc}
@@ -286,11 +288,13 @@
               }
             }}
               />
-          {/if}
+
             </SidebarWrapper>
           </Sidebar>
         {/if}
+      {/if}
 
+    </div>
     <div class="mt-[70px]">
       <!-- Default publications -->
       {#if $publicationColumnVisibility.main}
@@ -369,9 +373,11 @@
       {/if}
     </div>
 
+    <div class="mt-[70px] relative {$publicationColumnVisibility.discussion ? 'w-64' : 'w-auto'}">
+      <!-- Discussion sidebar -->
     {#if $publicationColumnVisibility.discussion}
       <Sidebar
-        class="z-10 ml-4 sticky top-[162px] h-[calc(100vh-165px)] overflow-y-auto"
+        class="z-10 ml-4 fixed top-[162px] h-[calc(100vh-165px)] overflow-y-auto"
         classes={{
           div: 'bg-transparent'
         }}
@@ -420,3 +426,4 @@
     {/if}
     </div>
   </div>
+</div>

src/styles/publications.css

@@ -1,5 +1,9 @@
 @layer components {
   /* AsciiDoc content */
+  section {
+    @apply my-2;
+  }
+
   .publication-leather p a {
     @apply underline hover:text-primary-600 dark:hover:text-primary-400;
   }
@@ -121,6 +125,12 @@
   }
 
   /* admonition */
+  .publication-leather .admonitionblock,
+  .publication-leather .sidebarblock,
+  .publication-leather .tableblock {
+    @apply my-4;
+  }
+
   .publication-leather .admonitionblock .title {
     @apply font-semibold;
   }