From ff1188b4b21b7764f914f6e2e71c197c90ff693d Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Sun, 7 Apr 2024 02:56:29 +0200
Subject: [PATCH] feat: style toc simpler

---
 public/app.css                    |  1 -
 src/components/ImageSlider.svelte | 18 ++++++++++--------
 src/components/TOC.astro          |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/public/app.css b/public/app.css
index 9e32668..796ff22 100644
--- a/public/app.css
+++ b/public/app.css
@@ -11,7 +11,6 @@ h3 {
 
 article>h1 {
   font-size: 28px;
-  margin-top: 24px;
 }
 
 article>h2 {
diff --git a/src/components/ImageSlider.svelte b/src/components/ImageSlider.svelte
index bd82029..c2f00d5 100644
--- a/src/components/ImageSlider.svelte
+++ b/src/components/ImageSlider.svelte
@@ -62,10 +62,12 @@
   style={`--height:${height}px`}
 >
   {#if title}
-    <div class="flex items-center p-x-4 bg justify-between">
+    <div class="flex items-center p-x-4 p-y-6 bg justify-between">
       <h3>{title}</h3>
 
-      <div class="overflow-hidden rounded-md bg-light gap-2 flex p-1">
+      <div
+        class="overflow-hidden rounded-md bg-light gap-2 flex p-2 border border-light"
+      >
         <button
           class="flex-1 i-tabler-arrow-left"
           aria-label="previous image"
@@ -80,10 +82,10 @@
     </div>
   {/if}
 
-  <div class="images" bind:this={slot}>
+  <div class="images border-t-1 border-b-1 border-neutral" bind:this={slot}>
     <slot />
   </div>
-  <div class="p-2 flex place-content-between bg">
+  <div class="px-4 flex items-center place-content-between bg">
     <p>
       {#if images?.length}
         {index + 1}/{images?.length}
@@ -97,7 +99,7 @@
 
 <style>
   .wrapper {
-    grid-template-rows: 1fr 40px;
+    grid-template-rows: 1fr 50px;
     transition: height 0.3s;
   }
 
@@ -106,11 +108,11 @@
   }
 
   .wrapper.title {
-    grid-template-rows: 40px 1fr 40px;
+    grid-template-rows: 50px 1fr 50px;
   }
 
   .loaded {
-    height: calc(var(--height) + 40px);
+    height: calc(var(--height) + 50px);
   }
 
   .not-loaded .images :global(picture):first-child {
@@ -118,7 +120,7 @@
   }
 
   .wrapper.title.loaded {
-    height: calc(var(--height) + 80px);
+    height: calc(var(--height) + 100px);
   }
 
   .images :global(picture) {
diff --git a/src/components/TOC.astro b/src/components/TOC.astro
index 1655443..5fa88fd 100644
--- a/src/components/TOC.astro
+++ b/src/components/TOC.astro
@@ -12,7 +12,7 @@ const { headings } = Astro.props;
 
 <div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
   <details
-    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+    class="py-2 lg:px-4 rounded-xl lg:border lg:border-neutral flex flex-col lg:bg gap-2"
   >
     <summary class="text-lg cursor-pointer select-none"
       >{t("toc.title")}</summary