From 6d849dd80189e943daa44fb72027b47cc81da32d Mon Sep 17 00:00:00 2001
From: Kelly Thompson <kellykthompson@gmail.com>
Date: Sun, 22 Sep 2024 14:15:04 -0700
Subject: [PATCH] Fixed the SVG animation section for Lossless so it (#55)

works on mobile.
---
 css/jpeg-xl-test.webflow.css | 64 +++++++++++++++++++++++-------------
 index.html                   | 32 ++++++++++--------
 2 files changed, 60 insertions(+), 36 deletions(-)

diff --git a/css/jpeg-xl-test.webflow.css b/css/jpeg-xl-test.webflow.css
index d1a2b11..4830eb9 100644
--- a/css/jpeg-xl-test.webflow.css
+++ b/css/jpeg-xl-test.webflow.css
@@ -363,7 +363,7 @@ blockquote {
   text-align: center;
   letter-spacing: -.025em;
   max-width: none;
-  font-size: 28px;
+  font-size: 20px;
   line-height: 1.45em;
 }
 
@@ -1055,8 +1055,12 @@ blockquote {
 .wrapper-scale_box-animated {
   border: 1px none var(--white);
   border-radius: 0;
-  width: 80px;
-  height: 80px;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  display: flex;
 }
 
 .section-lossless-compression {
@@ -1836,19 +1840,15 @@ blockquote {
   display: flex;
 }
 
-.container-content-vflex.gap-1rem {
+.container-content-vflex.centered {
   grid-column-gap: 1rem;
   grid-row-gap: 1rem;
-}
-
-.container-content-vflex.gap-1rem.centered {
   align-items: center;
 }
 
-.container-content-vflex.centered {
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-  align-items: center;
+.container-content-vflex.centered.gap-none {
+  grid-column-gap: 0rem;
+  grid-row-gap: 0rem;
 }
 
 .container-content-vflex.width-page-max {
@@ -1874,11 +1874,6 @@ blockquote {
   grid-row-gap: 2rem;
 }
 
-.container-content-vflex.width-page-max.centered.gap-3rem {
-  grid-column-gap: 3rem;
-  grid-row-gap: 3rem;
-}
-
 .container-content-vflex.width-1440 {
   justify-content: flex-start;
   align-items: flex-start;
@@ -2655,6 +2650,9 @@ blockquote {
 
 .wrapper-text.centered {
   text-align: center;
+  flex-flow: column;
+  align-items: center;
+  display: flex;
 }
 
 .wrapper-text.centered.width-rem {
@@ -2805,6 +2803,11 @@ blockquote {
   height: 4rem;
 }
 
+.code-scale_box-animated {
+  width: auto;
+  height: auto;
+}
+
 .section-creative_workflow {
   flex-flow: column;
   justify-content: flex-start;
@@ -3929,8 +3932,12 @@ blockquote {
   }
 
   .wrapper-scale_box-animated {
-    width: 100px;
-    height: 100px;
+    flex-flow: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    display: flex;
   }
 
   .section-lossless-compression, .section-lossless-transcoding {
@@ -5964,8 +5971,14 @@ blockquote {
   }
 
   .wrapper-scale_box-animated {
-    width: 60px;
-    height: 60px;
+    aspect-ratio: auto;
+    object-fit: cover;
+    flex-flow: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    height: auto;
+    display: flex;
   }
 
   .section-lossless-compression {
@@ -6336,6 +6349,10 @@ blockquote {
     min-width: 568px;
     height: 7rem;
   }
+  
+  .code-scale_box-animated {
+    object-fit: cover;
+  }
 
   .section-creative_workflow {
     padding-top: 0;
@@ -6707,8 +6724,9 @@ blockquote {
   }
 
   .wrapper-scale_box-animated {
-    width: 60px;
-    height: 60px;
+    aspect-ratio: auto;
+    width: 100%;
+    height: auto;
   }
 
   .section-lossless-compression, .section-lossless-transcoding, .section-wide-gamut-hdr {
@@ -6956,7 +6974,7 @@ blockquote {
   }
 
   .wrapper-text.centered.width-rem {
-    max-width: 15em;
+    max-width: 24em;
   }
 
   .container-wave-animated {
diff --git a/index.html b/index.html
index e804ef8..655f243 100644
--- a/index.html
+++ b/index.html
@@ -2280,8 +2280,7 @@ <h3 class="label-menu-text">JPEG XL</h3>
         </div>
         <div class="div-container-code">
           <div class="w-embed">
-            <section class="section-visually-lossless" data-json="VisuallyLosslessImageList.json"
-              data-folder="VisuallyLosslessImages">
+            <section class="section-visually-lossless" data-json="VisuallyLosslessImageList.json" data-folder="VisuallyLosslessImages">
               <div class="container-grouped">
                 <div class="container-2col-span">
                   <div class="container-group-1col left">
@@ -2337,8 +2336,7 @@ <h3 class="text-xxl-regular centered teal">Pixel-Perfect Reproduction, Tiny Foot
         </div>
         <div data-figma-id="73:4015" class="size-60px"></div>
         <div class="continer-4col">
-          <div class="container-group centered">
-            <div class="container-text vertical centered">
+          <div class="container-content-vflex centered gap-none">
               <div class="wrapper-scale_box-animated">
                 <div class="code-scale_box-animated w-embed"><svg class="scale-animation-1" width="82" height="82"
                     viewbox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -2356,12 +2354,13 @@ <h3 class="text-xxl-regular centered teal">Pixel-Perfect Reproduction, Tiny Foot
                 <h3 class="label-menu-text">WEBP</h3>
               </div>
               <div data-figma-id="73:4012" class="size-small-1rem-16px"></div>
+              <div class="wrapper-text centered">
               <h2 class="display-l-bold">15%</h2>
-              <p class="text-xl-light-2 is-centered _2lines">Larger </p>
+              <p class="text-xl-light-2 is-centered _2lines">Larger</p>
             </div>
           </div>
-          <div class="container-group centered">
-            <div class="container-text vertical centered">
+          <div class="container-content-vflex centered gap-none">
+            <div class="container-content-vflex centered gap-none">
               <div class="wrapper-scale_box-animated">
                 <div class="code-scale_box-animated w-embed"><svg class="scale-animation-2" width="82" height="82"
                     viewbox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -2379,12 +2378,14 @@ <h2 class="display-l-bold">15%</h2>
                 <h3 class="label-menu-text">PNG</h3>
               </div>
               <div data-figma-id="73:4012" class="size-small-1rem-16px"></div>
+            </div>
+            <div class="wrapper-text centered">
               <h2 class="display-l-bold">46%</h2>
-              <p class="text-xl-light-2 is-centered _2lines">Larger </p>
+              <p class="text-xl-light-2 is-centered _2lines">Larger</p>
             </div>
           </div>
-          <div class="container-group centered">
-            <div class="container-text vertical centered">
+          <div class="container-content-vflex centered gap-none">
+            <div class="container-content-vflex centered gap-none">
               <div class="wrapper-scale_box-animated">
                 <div class="code-scale_box-animated w-embed"><svg class="scale-animation-3" width="82" height="82"
                     viewbox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -2402,12 +2403,15 @@ <h2 class="display-l-bold">46%</h2>
                 <h3 class="label-menu-text">AVIF</h3>
               </div>
               <div data-figma-id="73:4012" class="size-small-1rem-16px"></div>
+            </div>
+            <div class="wrapper-text centered">
               <h2 class="display-l-bold">63%</h2>
-              <p class="text-xl-light-2 is-centered _2lines">Larger </p>
+              <p class="text-xl-light-2 is-centered _2lines">Larger</p>
             </div>
           </div>
-          <div id="w-node-ac9aa4ce-76d6-929f-484f-c42e854db7fa-8c10331b" class="container-group centered">
-            <div class="container-text vertical centered">
+          <div id="w-node-ac9aa4ce-76d6-929f-484f-c42e854db7fa-8c10331b"
+            class="container-content-vflex centered gap-none">
+            <div class="container-content-vflex centered gap-none">
               <div class="wrapper-scale_box-animated">
                 <div class="code-scale_box-animated w-embed"><svg class="scale-animation-4" width="82" height="82"
                     viewbox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -2425,6 +2429,8 @@ <h2 class="display-l-bold">63%</h2>
                 <h3 class="label-menu-text">BMP</h3>
               </div>
               <div data-figma-id="73:4012" class="size-small-1rem-16px"></div>
+            </div>
+            <div class="wrapper-text centered">
               <h2 class="display-l-bold">75%</h2>
               <p class="text-xl-light-2 is-centered _2lines">Larger </p>
             </div>