fix: some design layouts

src/components/ImageGallery.svelte

@@ -2,8 +2,18 @@
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
   import normalizeWheel from "@helpers/normalizeWheel";
-  let images = [];
-  let progress = [];
+  type Image = {
+    exif: string[];
+    src: string;
+    alt: string;
+    sizes: string;
+    original: string;
+    loaded: string;
+    originalLoaded: boolean;
+    startedLoading: boolean;
+  };
+  let images: Image[] = [];
+  let progress: number[] = [];
   let currentIndex = -1;
   const maxZoom = 5;
   import { swipe } from "svelte-gestures";
@@ -34,14 +44,14 @@
     currentIndex = index;
   };
 
-  const handleKeyDown = ({ key }) => {
+  const handleKeyDown = ({ key }: KeyboardEvent) => {
     if (currentIndex < 0) return;
     if (key === "Escape" && currentIndex > -1) setIndex(-1);
     if (key === "ArrowLeft") addIndex(-1);
     if (key === "ArrowRight") addIndex(+1);
   };
 
-  const handleOriginalLoading = async (image) => {
+  const handleOriginalLoading = async (image: Image) => {
     if (!image.startedLoading) {
       image.startedLoading = true;
       let cIndex = currentIndex;
@@ -54,7 +64,8 @@
           },
         });
         const total = Number(response.headers.get("content-length"));
-        const reader = response.body.getReader();
+        const reader = response?.body?.getReader();
+        if (!reader) return;
         let bytesReceived = 0;
         let chunks = [];
         console.log("[SLIDER] started loading " + image.original);
@@ -145,7 +156,7 @@
         console.log("Error loading", image);
       });
 
-      let exif = [];
+      let exif: string[] = [];
 
       try {
         const rawExif = image.getAttribute("data-exif");
@@ -166,7 +177,8 @@
 
       return {
         exif,
-        // preview: preview.getAttribute("src"),
+        startedLoading: false,
+        loaded: "",
         src: image.getAttribute("srcset"),
         alt: image.getAttribute("alt"),
         sizes: image.getAttribute("sizes"),
@@ -210,6 +222,7 @@
     <div
       class="image"
       use:swipe
+      role="dialog"
       on:swipe={handleSwipe}
       on:wheel|passive={handleScroll}
       on:mousemove={handleMouseMove}
@@ -221,11 +234,6 @@
           style={`transform: scaleX(${progress[currentIndex]});`} />
       {/if}
 
-      <img
-        class="background"
-        src={images[currentIndex].preview}
-        alt="background blur" />
-
       <span>
         <img
           style={`transform: scale(${scale}); transform-origin: ${
@@ -239,7 +247,9 @@
     {#if images[currentIndex].exif}
       {@const exif = images[currentIndex].exif}
       <div class="exif">
-        {exif.join(" | ")}
+        {#each exif as e}
+          <span> {e} </span>
+        {/each}
       </div>
     {/if}
   {/if}
@@ -252,7 +262,7 @@
     height: 10px;
     z-index: 99;
     left: 47px;
-    background-color: black;
+    background: var(--neutral-800);
     width: calc(100% - 94px);
     transform-origin: left;
     transition: transform 0.3s ease;
@@ -264,7 +274,7 @@
     left: 0;
     height: 100vh;
     width: 100vw;
-    background-color: rgba(24, 24, 24, 0.99);
+    background: var(--neutral-800);
 
     opacity: 0;
     transition: opacity 0.1s ease;
@@ -304,21 +314,11 @@
       transform-origin 0.1s linear;
   }
 
-  .image > .background {
-    filter: brightness(0.2);
-    position: absolute;
-    opacity: 0.3;
-    width: 100%;
-    z-index: 98;
-    height: 100%;
-    object-fit: fill;
-  }
-
   .controls {
     width: fit-content;
     left: 50vw;
     transform: translateX(-50%);
-    background: black;
+    background: var(--neutral-800);
     padding: 5px;
     position: absolute;
     z-index: 99;
@@ -329,7 +329,7 @@
     width: 15px;
     height: 15px;
     border-style: none;
-    background: black;
+    background: transparent;
     border: solid 1px white;
     cursor: pointer;
     margin: 2px;
@@ -346,15 +346,25 @@
     left: 50vw;
     transform: translateX(-50%);
     z-index: 99;
-    background-color: black;
+    background: var(--neutral-800);
     color: white;
     padding: 5px;
-    font-size: 0.8em;
+    padding-inline: 10px;
+    font-size: 0.9em;
     white-space: pre;
+    display: flex;
+  }
+
+  .exif > span {
+    padding: 0px 8px;
+  }
+
+  .exif > span:last-child {
+    border-right: none;
   }
 
   .gallery-wrapper > button {
-    background: black;
+    background: var(--neutral-800);
     color: white;
     border-radius: 0px;
     border: none;

src/components/arrows/ArrowB.astro

@@ -12,6 +12,7 @@ const t = useTranslations(Astro.url);
   .arrow {
     position: absolute;
     left: 0;
+    z-index: 1;
     transform: translateX(-110%) translateY(-160px);
   }
   .arrow > p {

src/layouts/Layout.astro

@@ -120,7 +120,7 @@ import "./global.css";
     </style>
   </head>
   <body class="text-neutral flex flex-col">
-    <header class="sticky bottom-0 sm:top-0 z-2 order-last sm:order-first">
+    <header class="sticky top-0 z-2">
       <Nav />
     </header>
     <main id="main-content" class="relative flex flex-col gap-6">