Change how to use images jpg format to webp

mkfizi · Nov 15, 2023 · ee7eac4 · ee7eac4
1 parent c0cda93
commit ee7eac4
Show file tree

Hide file tree

Showing 50 changed files with 15 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -1709,7 +1709,7 @@ <h2 class="mt-4 text-lg text-black sm:text-xl lg:text-2xl dark:text-white">Gener
                 </div>
             </div>
 
-            <div class="grid mb-4 overflow-hidden border rounded-md border-neutral-300 dark:border-neutral-700 sm:grid-cols-2 lg:grid-cols-4">
+            <div class="grid lg:min-h-[32rem] mb-4 overflow-hidden border rounded-md border-neutral-300 dark:border-neutral-700 sm:grid-cols-2 lg:grid-cols-4">
 
                 <!-- Output background -->
                 <div class="overflow-auto border-b sm:col-span-2 lg:order-2 bg-neutral-50 dark:bg-neutral-900 lg:border-b-0 lg:border-x border-neutral-300 dark:border-neutral-700"
@@ -1947,8 +1947,8 @@ <h3 class="text-2xl font-extrabold text-black sm:text-3xl lg:text-4xl dark:text-
                     <div class="grid mx-auto space-y-4">
                         <template x-for="(image, childIndex) in howToUse.images" hidden>
                             <div class="w-full overflow-hidden border rounded-md border-neutral-300 dark:border-neutral-700">
-                                <img class="w-full h-auto dark:hidden" :src="`src/images/how-to-use-${parentIndex + 1}-${childIndex + 1}.jpg`" :alt="image">
-                                <img class="hidden w-full h-auto dark:block" :src="`src/images/how-to-use-${parentIndex + 1}-${childIndex + 1}-dark.jpg`" :alt="image">
+                                <img class="w-full h-auto dark:hidden" width="512" height="288" :src="`src/images/how-to-use-${parentIndex + 1}-${childIndex + 1}.webp`" :alt="image">
+                                <img class="hidden w-full h-auto dark:block" width="512" height="288" :src="`src/images/how-to-use-${parentIndex + 1}-${childIndex + 1}-dark.webp`" :alt="image">
                             </div>
                         </template>
                     </div>

diff --git a/src/css/app.css b/src/css/app.css
@@ -1424,6 +1424,10 @@ video {
   min-height: calc(var(--vh, 1vh) * 100);
 }
 
+.min-h-\[24rem\] {
+  min-height: 24rem;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -2564,6 +2568,14 @@ pre .string.value) {
     height: auto;
   }
 
+  .lg\:min-h-\[36rem\] {
+    min-height: 36rem;
+  }
+
+  .lg\:min-h-\[32rem\] {
+    min-height: 32rem;
+  }
+
   .lg\:w-auto {
     width: auto;
   }

diff --git a/src/images/how-to-use-1-1-dark.jpg b/src/images/how-to-use-1-1-dark.jpg
diff --git a/src/images/how-to-use-1-1-dark.webp b/src/images/how-to-use-1-1-dark.webp
diff --git a/src/images/how-to-use-1-1.jpg b/src/images/how-to-use-1-1.jpg
diff --git a/src/images/how-to-use-1-1.webp b/src/images/how-to-use-1-1.webp
diff --git a/src/images/how-to-use-1-2-dark.jpg b/src/images/how-to-use-1-2-dark.jpg
diff --git a/src/images/how-to-use-1-2-dark.webp b/src/images/how-to-use-1-2-dark.webp
diff --git a/src/images/how-to-use-1-2.jpg b/src/images/how-to-use-1-2.jpg
diff --git a/src/images/how-to-use-1-2.webp b/src/images/how-to-use-1-2.webp
diff --git a/src/images/how-to-use-2-1-dark.jpg b/src/images/how-to-use-2-1-dark.jpg
diff --git a/src/images/how-to-use-2-1-dark.webp b/src/images/how-to-use-2-1-dark.webp
diff --git a/src/images/how-to-use-2-1.jpg b/src/images/how-to-use-2-1.jpg
diff --git a/src/images/how-to-use-2-1.webp b/src/images/how-to-use-2-1.webp
diff --git a/src/images/how-to-use-2-2-dark.jpg b/src/images/how-to-use-2-2-dark.jpg
diff --git a/src/images/how-to-use-2-2-dark.webp b/src/images/how-to-use-2-2-dark.webp
diff --git a/src/images/how-to-use-2-2.jpg b/src/images/how-to-use-2-2.jpg
diff --git a/src/images/how-to-use-2-2.webp b/src/images/how-to-use-2-2.webp
diff --git a/src/images/how-to-use-2-3-dark.jpg b/src/images/how-to-use-2-3-dark.jpg
diff --git a/src/images/how-to-use-2-3-dark.webp b/src/images/how-to-use-2-3-dark.webp
diff --git a/src/images/how-to-use-2-3.jpg b/src/images/how-to-use-2-3.jpg
diff --git a/src/images/how-to-use-2-3.webp b/src/images/how-to-use-2-3.webp
diff --git a/src/images/how-to-use-3-1-dark.jpg b/src/images/how-to-use-3-1-dark.jpg
diff --git a/src/images/how-to-use-3-1-dark.webp b/src/images/how-to-use-3-1-dark.webp
diff --git a/src/images/how-to-use-3-1.jpg b/src/images/how-to-use-3-1.jpg
diff --git a/src/images/how-to-use-3-1.webp b/src/images/how-to-use-3-1.webp
diff --git a/src/images/how-to-use-4-1-dark.jpg b/src/images/how-to-use-4-1-dark.jpg
diff --git a/src/images/how-to-use-4-1-dark.webp b/src/images/how-to-use-4-1-dark.webp
diff --git a/src/images/how-to-use-4-1.jpg b/src/images/how-to-use-4-1.jpg
diff --git a/src/images/how-to-use-4-1.webp b/src/images/how-to-use-4-1.webp
diff --git a/src/images/how-to-use-4-2-dark.jpg b/src/images/how-to-use-4-2-dark.jpg
diff --git a/src/images/how-to-use-4-2-dark.webp b/src/images/how-to-use-4-2-dark.webp
diff --git a/src/images/how-to-use-4-2.jpg b/src/images/how-to-use-4-2.jpg
diff --git a/src/images/how-to-use-4-2.webp b/src/images/how-to-use-4-2.webp
diff --git a/src/images/how-to-use-5-1-dark.jpg b/src/images/how-to-use-5-1-dark.jpg
diff --git a/src/images/how-to-use-5-1-dark.webp b/src/images/how-to-use-5-1-dark.webp
diff --git a/src/images/how-to-use-5-1.jpg b/src/images/how-to-use-5-1.jpg
diff --git a/src/images/how-to-use-5-1.webp b/src/images/how-to-use-5-1.webp
diff --git a/src/images/how-to-use-5-2-dark.jpg b/src/images/how-to-use-5-2-dark.jpg
diff --git a/src/images/how-to-use-5-2-dark.webp b/src/images/how-to-use-5-2-dark.webp
diff --git a/src/images/how-to-use-5-2.jpg b/src/images/how-to-use-5-2.jpg
diff --git a/src/images/how-to-use-5-2.webp b/src/images/how-to-use-5-2.webp
diff --git a/src/images/how-to-use-5-3-dark.jpg b/src/images/how-to-use-5-3-dark.jpg
diff --git a/src/images/how-to-use-5-3-dark.webp b/src/images/how-to-use-5-3-dark.webp
diff --git a/src/images/how-to-use-5-3.jpg b/src/images/how-to-use-5-3.jpg
diff --git a/src/images/how-to-use-5-3.webp b/src/images/how-to-use-5-3.webp
diff --git a/src/images/how-to-use-6-1-dark.jpg b/src/images/how-to-use-6-1-dark.jpg
diff --git a/src/images/how-to-use-6-1-dark.webp b/src/images/how-to-use-6-1-dark.webp
diff --git a/src/images/how-to-use-6-1.jpg b/src/images/how-to-use-6-1.jpg
diff --git a/src/images/how-to-use-6-1.webp b/src/images/how-to-use-6-1.webp