update

themes/gallo/layouts/partials/artist_catalog.html

@@ -28,7 +28,7 @@
       <a class="w-full" href="#modal-{{ $index | urlize }}">
         <button
           type="button"
-          class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
+          class="w-full px-4 py-4 sm:py-2 sm:px-3 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200"
         >
           Expand
         </button>
@@ -62,20 +62,7 @@
                   <strong>{{ .item }}</strong>
                 </h3>
                 {{ if .gallery }}
-                <div
+                <div class="carousel">{{ partial "carousel.html" . }}</div>
-                  class="columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
-                >
-                  {{ range $index, $element := .gallery }}
-                  <div class="relative ease-in-out duration-200 transition-all">
-                    <img
-                      id="img-{{ $index }}"
-                      loading="lazy"
-                      class="rounded-md w-full"
-                      src="{{ .image }}"
-                    />
-                  </div>
-                  {{ end }}
-                </div>
                 {{ end }}
                 <div>
                   <div class="flex flex-row gap-2 my-2 justify-between mt-4">
@@ -108,7 +95,7 @@
                   </div>
                   <div class="flex flex-col items-start">
                     <span class="text-xs text-gray-600">Description:</span>
-                    <span> {{ .description }} </span>
+                    <span class="text-left"> {{ .description }} </span>
                   </div>
                 </div>
               </div>
@@ -117,7 +104,7 @@
           <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
             <button
               id="close-modal"
-              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
+              class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-4 sm:py-2 sm:px-3 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm"
               @click="open = false"
             >
               Close

themes/gallo/layouts/partials/buttons.html

@@ -1,5 +1,5 @@
 {{ if .Params.buttons }}
-<div class="mt-4 flex flex-row gap-4">
+<div class="mt-4 flex flex-wrap gap-2">
   {{ range .Params.buttons}}
   <a href="{{ .url }}"
     ><button

themes/gallo/layouts/partials/carousel.html

@@ -1,37 +1,35 @@
-<div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
+<div class="rounded-md relative overflow-hidden pt-[100%]">
-  <div class="rounded-md relative overflow-hidden pt-[100%]">
+  <div
+    class="carousel-wrapper flex transition-transform duration-300 ease-in-out absolute inset-0"
+  >
+    {{ range .gallery }}
     <div
-      class="carousel-wrapper flex transition-transform duration-300 ease-in-out absolute inset-0"
+      class="carousel-item flex-shrink-0 w-full h-full flex items-center justify-center"
     >
-      {{ range .gallery }}
+      <img
-      <div
+        loading="lazy"
-        class="carousel-item flex-shrink-0 w-full h-full flex items-center justify-center"
+        class="rounded-lg w-full h-auto object-contain"
-      >
+        src="{{ .image }}"
-        <img
+      />
-          loading="lazy"
-          class="rounded-lg w-full h-auto object-contain"
-          src="{{ .image }}"
-        />
-      </div>
-      {{ end }}
     </div>
+    {{ end }}
+  </div>
 
-    <button
+  <button
-      class="absolute top-1/2 left-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-prev z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
+    class="absolute top-1/2 left-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-prev z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
-    >
+  >
-      &lt;
+    &lt;
-    </button>
+  </button>
-    <button
+  <button
-      class="absolute top-1/2 right-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-next z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
+    class="absolute top-1/2 right-4 transform -translate-y-1/2 text-xl sm:text-md text-white p-2 px-4 sm:p-1 sm:px-3 rounded-xl font-extrabold carousel-next z-20 bg-black hover:bg-gray-800 focus:outline-none active:ring-2 active:ring-offset-2 active:ring-black"
-    >
+  >
-      &gt;
+    &gt;
-    </button>
+  </button>
 
-    <div
+  <div
-      class="absolute text-xs right-2 bottom-2 transform text-black bg-white p-1 px-2 rounded-md carousel-indicator z-10"
+    class="absolute text-xs right-2 bottom-2 transform text-black bg-white p-1 px-2 rounded-md carousel-indicator z-10"
-    >
+  >
-      1 / {{ len .gallery }}
+    1 / {{ len .gallery }}
-    </div>
   </div>
 </div>
 

themes/gallo/layouts/partials/nav.html

@@ -1,4 +1,6 @@
-<div class="p-4 min-h-[40.27px] flex flex-col sm:flex-row w-full justify-between bg-black">
+<div
+  class="p-4 min-h-[40.27px] flex flex-col sm:flex-row w-full justify-between bg-black"
+>
   <a class="justify-center flex mb-2 sm:mb-0" aria-label="Back to home" href="/"
     ><img
       class="w-44 h-[40.2667px]"
@@ -6,10 +8,11 @@
       src="{{ .Site.Params.logo }}"
       loading="lazy"
   /></a>
-  <nav class="place-self-center h-8 flex justify-end gap-2 text-white pr-6">
+  <nav class="place-self-center h-8 flex justify-end gap-4 text-white pr-0 sm:pr-6">
     {{ range .Site.Menus.main }}
     <a
-      class="ml-2 underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
+      style="white-space: nowrap"
+      class="underline underline-offset-0 decoration-2 decoration-transparent hover:decoration-white hover:underline-offset-2 ease-in-out duration-300 place-self-center"
       href="{{ .URL }}"
       aria-label="{{ .Identifier }}"
     >

themes/gallo/layouts/partials/rental_catalog.html

@@ -141,7 +141,11 @@
                   {{ .item }}
                 </div>
                 <div class="flex flex-col sm:flex-row">
-                  {{ if .gallery }} {{ partial "carousel.html" . }} {{ end }}
+                  {{ if .gallery }}
+                  <div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
+                    {{ partial "carousel.html" . }}
+                  </div>
+                  {{ end }}
                   <div class="z-20 sm:pl-4 w-full md:w-1/3 sm:w-1/2">
                     <div
                       class="flex flex-col h-full justify-between text-md text-gray-800 text-base"