From 62848ed1848fe2e3de6b139664a91724a3d9a01d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Fri, 12 Sep 2025 21:41:16 +0200
Subject: [PATCH] Dark mode, unbreak toc

---
 src/app.css                                   |  2 +-
 .../publications/Publication.svelte           | 49 +++++++++++--------
 src/styles/publications.css                   | 10 ++++
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/app.css b/src/app.css
index 45a0c4d..fe0b865 100644
--- a/src/app.css
+++ b/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;
   }
 
diff --git a/src/lib/components/publications/Publication.svelte b/src/lib/components/publications/Publication.svelte
index f6bbacb..9616495 100644
--- a/src/lib/components/publications/Publication.svelte
+++ b/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,34 +263,38 @@
   <!-- Three-column row -->
   <div class="contents">
     <!-- Table of contents -->
-    {#if publicationType !== "blog" && !isLeaf}
-      <Sidebar
-        class="z-10 ml-4 bg-transparent sticky top-[162px] h-[calc(100vh-165px)] overflow-y-auto"
-        activeUrl={`#${activeAddress ?? ""}`}
-        classes={{
-          div: 'bg-transparent',
+    <div class="mt-[70px] relative {$publicationColumnVisibility.toc ? 'w-64' : 'w-auto'}">
+      {#if publicationType !== "blog" && !isLeaf}
+        {#if $publicationColumnVisibility.toc}
+          <Sidebar
+            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: '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}
-            <TableOfContents
-              {rootAddress}
-              {toc}
-              depth={2}
-              onSectionFocused={(address: string) => publicationTree.setBookmark(address)}
-              onLoadMore={() => {
+          >
+            <SidebarWrapper>
+              <CloseButton color="secondary" class="m-2 dark:text-primary-100" onclick={closeToc} ></CloseButton>
+              <TableOfContents
+                {rootAddress}
+                {toc}
+                depth={2}
+                onSectionFocused={(address: string) => publicationTree.setBookmark(address)}
+                onLoadMore={() => {
               if (!isLoading && !isDone && publicationTree) {
                 loadMore(4);
               }
             }}
               />
-          {/if}
-        </SidebarWrapper>
-      </Sidebar>
-    {/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'
         }}
@@ -418,5 +424,6 @@
         </SidebarWrapper>
       </Sidebar>
     {/if}
+    </div>
   </div>
 </div>
diff --git a/src/styles/publications.css b/src/styles/publications.css
index 9ac48b0..02afec9 100644
--- a/src/styles/publications.css
+++ b/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;
   }