edit image gallery function

themes/bluewater/assets/style.css

@@ -1383,10 +1383,6 @@ video {
   left: 0px;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1418,6 +1414,14 @@ video {
   margin-bottom: 1rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1426,10 +1430,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -1450,14 +1450,6 @@ video {
   margin-right: 1.5rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -1488,10 +1480,6 @@ video {
   height: 2.5rem;
 }
 
-.max-h-80 {
-  max-height: 20rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1564,6 +1552,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -1588,6 +1580,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-8 {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
@@ -1719,6 +1715,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
@@ -1729,16 +1730,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1757,9 +1748,9 @@ video {
   color: rgb(82 82 82 / var(--tw-text-opacity));
 }
 
-.text-neutral-800 {
+.text-tertiary-600 {
   --tw-text-opacity: 1;
-  color: rgb(38 38 38 / var(--tw-text-opacity));
+  color: rgb(76 35 133 / var(--tw-text-opacity));
 }
 
 .text-neutral-500 {
@@ -1767,11 +1758,6 @@ video {
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
 
-.text-primary-600 {
-  --tw-text-opacity: 1;
-  color: rgb(35 69 131 / var(--tw-text-opacity));
-}
-
 .text-primary-400 {
   --tw-text-opacity: 1;
   color: rgb(123 164 238 / var(--tw-text-opacity));
@@ -1782,16 +1768,6 @@ video {
   color: rgb(69 113 194 / var(--tw-text-opacity));
 }
 
-.text-tertiary-400 {
-  --tw-text-opacity: 1;
-  color: rgb(171 123 239 / var(--tw-text-opacity));
-}
-
-.text-tertiary-600 {
-  --tw-text-opacity: 1;
-  color: rgb(76 35 133 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1831,16 +1807,16 @@ video {
   background-color: rgb(69 113 194 / var(--tw-bg-opacity));
 }
 
-.hover\:text-primary-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(69 113 194 / var(--tw-text-opacity));
-}
-
 .hover\:text-tertiary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(122 69 197 / var(--tw-text-opacity));
 }
 
+.hover\:text-primary-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(69 113 194 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1895,6 +1871,14 @@ video {
     width: 66.666667%;
   }
 
+  .md\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:border-x-\[20px\] {
     border-left-width: 20px;
     border-right-width: 20px;

themes/bluewater/layouts/blog/single.html

@@ -3,8 +3,7 @@
   <div class="text-xs md:text-sm mb-4">{{ .Date | time.Format ":date_long" }}</div>
   <h1 class="text-neutral-600">{{ .Title }}</h1>
   {{ .Content }}
-</article>
+  {{- partial "post-gallery.html" . -}} 
-
   <div class="flex flex-row justify-between mt-8">
     <div>
       {{ if .PrevPage }}
@@ -17,7 +16,6 @@
       {{ end }}
     </div>
   </div>
-
+</article>
-{{- partial "post-gallery.html" . -}} 
 
 {{ end }}

themes/bluewater/layouts/partials/post-gallery.html

@@ -1,6 +1,9 @@
 {{ $image := (.Page.Resources.ByType "image") }}
 {{ with $image }}
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         {{ range . }}
-        <a href="{{ .Permalink }}" data-lightbox="x"><img src="{{ .Permalink }}" /></a>
+            {{ $resized := .Resize "512x webp q70" }}
+            <a href="{{ .Permalink }}" data-lightbox="x"><img src="{{ $resized.Permalink }}" /></a>
         {{ end }}
+    </div>
 {{ end }}