zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-05 05:37:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): correct homepage download comparison (#823)

Browse Source
This commit is contained in:
rahim
2026-03-10 02:45:45 -07:00
committed by GitHub
parent a8e58c7e32
commit 5509ca2e90
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/home/Built/DataViz.astro
+9 -5
View File
@@ -20,7 +20,11 @@ const seconds = [0, 5, 10, 15, 20];
>
VJS 8
</p>
<div class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"></div>
<div
class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"
style="--data-bar-width: 100%; --data-bar-duration: 3.96s;"
>
</div>
<div class="flex items-center gap-2.5">
<p
class="hidden min-w-30 items-center justify-center rounded-full border border-manila-light bg-faded-black py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:flex"
@@ -32,7 +36,7 @@ const seconds = [0, 5, 10, 15, 20];
>
<span class="font-bold">3.96s</span>
<span>/</span>
<span class="whitespace-nowrap">722 KB</span>
<span class="whitespace-nowrap">200kB</span>
</p>
</div>
<p
@@ -42,7 +46,7 @@ const seconds = [0, 5, 10, 15, 20];
</p>
<div
class="mt-4 mb-2 data-bar data-bar-orange md:mt-5 md:mb-2.5"
style="max-width: 32.25%"
style="--data-bar-width: 18.75%; --data-bar-duration: 0.75s;"
>
</div>
@@ -55,9 +59,9 @@ const seconds = [0, 5, 10, 15, 20];
<p
class="2xl flex gap-1 text-center font-display text-h5 text-orange uppercase lg:gap-2.5"
>
<span class="font-bold">1.29s</span>
<span class="font-bold">0.75s</span>
<span>/</span>
<span class="whitespace-nowrap">198 KB</span>
<span class="whitespace-nowrap">38kB</span>
</p>
</div>
site/src/styles/globals.css
+3 -2
View File
@@ -215,10 +215,11 @@
@utility data-bar {
height: 2.5rem;
width: var(--data-bar-width, 100%);
background-image: url("/data-bar-white.svg");
background-repeat: repeat-x;
background-size: auto 100%;
animation: grow-bar 1.5s ease-out forwards;
animation: grow-bar var(--data-bar-duration, 1.5s) ease-out forwards;
animation-play-state: paused;
[data-animate] & {
@@ -322,7 +323,7 @@
width: 0%;
}
to {
width: 100%;
width: var(--data-bar-width, 100%);
}
}