Less details in cards, hide ToC for content only view, dark mode color shift

src/app.css

@@ -160,11 +160,11 @@
   }
 
   aside.sidebar-leather > div {
-    @apply bg-primary-50 dark:bg-primary-900 h-full px-5 py-0;
+    @apply bg-primary-50 dark:bg-gray-800 h-full px-5 py-0;
   }
 
   a.sidebar-item-leather {
-    @apply hover:bg-primary-100 dark:hover:bg-primary-800;
+    @apply hover:bg-primary-100 dark:hover:bg-gray-800;
   }
 
   div.skeleton-leather div {

src/lib/components/Publication.svelte

@@ -84,6 +84,7 @@
   // region Columns visibility
   let currentBlog: null|string = $state(null);
   let currentBlogEvent: null|NDKEvent = $state(null);
+  const isLeaf = $derived(indexEvent.kind === 30041);
 
   function isInnerActive() {
     return currentBlog !== null && $publicationColumnVisibility.inner;
@@ -122,7 +123,7 @@
   onMount(() => {
     // Set current columns depending on the publication type
     const isBlog = publicationType === 'blog';
-    publicationColumnVisibility.update(v => ({ ...v, main: !isBlog, blog: isBlog }));
+    publicationColumnVisibility.update(v => ({ ...v, main: !isBlog, blog: isBlog, toc: !(isLeaf || isBlog) }));
 
     // Set up the intersection observer.
     observer = new IntersectionObserver((entries) => {
@@ -142,7 +143,7 @@
 </script>
 
 <!-- Table of contents -->
-{#if publicationType !== 'blog'}
+{#if publicationType !== 'blog' || !isLeaf}
   <TocToggle rootId={rootAddress} />
 {/if}
 
@@ -233,7 +234,7 @@
       <SidebarGroup class='sidebar-group-leather'>
         <div class="flex justify-between items-baseline">
           <Heading tag="h1" class="h-leather !text-lg">Discussion</Heading>
-          <Button class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-primary-900" outline onclick={closeDiscussion}>
+          <Button class="btn-leather hidden sm:flex z-30 !p-1 bg-primary-50 dark:bg-gray-800" outline onclick={closeDiscussion}>
             <CloseOutline />
           </Button>
         </div>

src/lib/components/util/ArticleNav.svelte

@@ -19,6 +19,7 @@
   let title: string = $derived(indexEvent.getMatchingTags('title')[0]?.[1]);
   let author: string = $derived(indexEvent.getMatchingTags('author')[0]?.[1] ?? 'unknown');
   let pubkey: string = $derived(indexEvent.getMatchingTags('p')[0]?.[1] ?? null);
+  let isLeaf: boolean = $derived(indexEvent.kind === 30041);
 
   let lastScrollY = $state(0);
   let isVisible = $state(true);
@@ -116,13 +117,13 @@
           <CaretLeftOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Back</span>
         </Button>
       {/if}
+      {#if !isLeaf}
         {#if publicationType === 'blog'}
           <Button class="btn-leather hidden sm:flex !w-auto {$publicationColumnVisibility.blog ? 'active' : ''}"
                   outline={true} onclick={() => toggleColumn('blog')} >
             <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</span>
           </Button>
-      {:else}
-        {#if !$publicationColumnVisibility.discussion && !$publicationColumnVisibility.toc}
+        {:else if !$publicationColumnVisibility.discussion && !$publicationColumnVisibility.toc}
           <Button class='btn-leather !w-auto' outline={true} onclick={() => toggleColumn('toc')}>
             <BookOutline class="!fill-none inline mr-1"  /><span class="hidden sm:inline">Table of Contents</span>
           </Button>
@@ -132,7 +133,7 @@
     <div class="flex flex-grow text justify-center items-center">
         <p class="max-w-[60vw] line-ellipsis"><b class="text-nowrap">{title}</b> <span class="whitespace-nowrap">by <InlineProfile pubkey={pubkey} title={author} /></span></p>
     </div>
-    <div class="flex justify-end space-x-2 md:min-w-52 min-w-8">
+    <div class="flex justify-end items-center space-x-2 md:min-w-52 min-w-8">
       {#if $publicationColumnVisibility.inner}
         <Button class='btn-leather !w-auto hidden sm:flex' outline={true} onclick={backToBlog}>
           <CloseOutline class="!fill-none inline mr-1" /><span class="hidden sm:inline">Close</span>

src/lib/components/util/Details.svelte

@@ -2,7 +2,11 @@
   import InlineProfile from "$components/util/InlineProfile.svelte";
   import CardActions from "$components/util/CardActions.svelte";
   import Interactions from "$components/util/Interactions.svelte";
+  import { P } from "flowbite-svelte";
 
+  // isModal
+  //  - don't show interactions in modal view
+  //  - don't show all the details when _not_ in modal view
   let { event, isModal = false } = $props();
 
   let title: string = $derived(event.getMatchingTags('title')[0]?.[1]);
@@ -18,18 +22,26 @@
   let identifier: string = $derived(event.getMatchingTags('i')[0]?.[1] ?? null);
   let hashtags: [] = $derived(event.getMatchingTags('t') ?? []);
   let rootId: string = $derived(event.getMatchingTags('d')[0]?.[1] ?? null);
+  let kind = $derived(event.kind);
+
 
 </script>
 
 
-<div class="flex flex-row relative">
+<div class="flex flex-col relative mb-2">
+  {#if !isModal}
+    <div class="flex flex-row justify-between items-center">
+      <P class='text-base font-normal'><InlineProfile pubkey={event.pubkey} /></P>
+      <CardActions event={event}></CardActions>
+    </div>
+  {/if}
   <div class="flex-grow grid grid-cols-1 md:grid-cols-[auto_1fr] gap-4 items-center">
     {#if image}
-      <div>
+      <div class="my-2">
         <img class="w-full md:max-w-48 object-contain rounded" alt={title} src={image} />
       </div>
     {/if}
-    <div class="space-y-4 {!image && !isModal ? 'mt-8' : ''}">
+    <div class="space-y-4  my-4">
       <h1 class="text-3xl font-bold">{title}</h1>
       <h2 class="text-base font-bold">
         by
@@ -39,14 +51,11 @@
           {author}
         {/if}
       </h2>
+      {#if version !== '1' }
         <h4 class="text-base font-thin">Version: {version}</h4>
+      {/if}
     </div>
   </div>
-  {#if !isModal}
-    <div class="absolute right-0 sm:relative sm:flex sm:flex-col space-y-4">
-       <CardActions event={event}></CardActions>
-    </div>
-  {/if}
 </div>
 
 {#if summary}
@@ -63,11 +72,20 @@
   </div>
 {/if}
 
-<div class="flex flex-row my-4">
-  <h4 class='text-base font-normal mt-2'>Index author: <InlineProfile pubkey={event.pubkey} /></h4>
-</div>
+{#if isModal}
+  <div class="flex flex-row my-4">
+    <h4 class='text-base font-normal mt-2'>
+      {#if kind === 30040}
+        <span>Index author:</span>
+      {:else}
+        <span>Author:</span>
+      {/if}
+      <InlineProfile pubkey={event.pubkey} />
+    </h4>
+  </div>
+
 
-<div class="flex flex-col pb-4 space-y-1">
+  <div class="flex flex-col pb-4 space-y-1">
     {#if source !== null}
       <h5 class="text-sm">Source: <a class="underline break-all" href={source} target="_blank">{source}</a></h5>
     {/if}
@@ -83,8 +101,8 @@
     {#if identifier !== null}
       <h5 class="text-sm">{identifier}</h5>
     {/if}
-
-</div>
+  </div>
+{/if}
 
 {#if !isModal}
   <Interactions event={event} rootId={rootId} direction="row"/>

tailwind.config.cjs

@@ -22,11 +22,11 @@ const config = {
           400: '#ad8351',
           500: '#c6a885',
           600: '#795c39',
-          700: '#574229',
-          800: '#342718',
-          900: '#231a10',
-          950: '#17110A',
-          1000: '#110d08',
+          700: '#564a3e',
+          800: '#3c352c',
+          900: '#2a241c',
+          950: '#1d1812',
+          1000: '#15110d',
         },
         success: {
           50: '#e3f2e7',