Skip to content

Commit

Permalink
Fixed the SVG animation section for Lossless so it (#55)
Browse files Browse the repository at this point in the history 
works on mobile.
  • Loading branch information
@kkthompson
kkthompson authored Sep 22, 2024
1 parent 61f096c commit 6d849dd
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 36 deletions.
64 changes: 41 additions & 23 deletions css/jpeg-xl-test.webflow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ blockquote {
text-align: center;
letter-spacing: -.025em;
max-width: none;
font-size: 28px;
font-size: 20px;
line-height: 1.45em;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -2655,6 +2650,9 @@ blockquote {

.wrapper-text.centered {
text-align: center;
flex-flow: column;
align-items: center;
display: flex;
}

.wrapper-text.centered.width-rem {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -6336,6 +6349,10 @@ blockquote {
min-width: 568px;
height: 7rem;
}

.code-scale_box-animated {
object-fit: cover;
}

.section-creative_workflow {
padding-top: 0;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -6956,7 +6974,7 @@ blockquote {
}

.wrapper-text.centered.width-rem {
max-width: 15em;
max-width: 24em;
}

.container-wave-animated {
Expand Down
32 changes: 19 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 6d849dd

Please sign in to comment.