From d12dd0d9998b36496c8ae866005881ecb3ba02a2 Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Mon, 6 May 2024 21:20:50 +1000
Subject: [PATCH] docs: fix logo flash

---
 docs/pages/index.vue   | 17 ++++++++++++-----
 docs/pages/scripts.vue |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 5f32a6da..f4afc1b8 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -97,7 +97,7 @@ const benchmarks = {
     label: 'Google Maps',
     nuxt: {
       fcp: 1500,
-      tbt: 50,
+      tbt: 70,
       lcp: 2700,
       si: 2500,
     },
@@ -156,6 +156,7 @@ function timesFaster(nuxt: number, iframe: number) {
   // should display as 2.5 for 2500%
   return (iframe / nuxt).toFixed(1)
 }
+
 </script>
 
 <template>
@@ -211,7 +212,7 @@ function timesFaster(nuxt: number, iframe: number) {
       </ul>
     </ULandingSection>
 
-    <div class="py-6 sm:py-12 gap-20 mb-12 flex flex-col xl:flex-row items-center max-w-5xl mx-auto">
+    <div class="py-6 sm:py-20 gap-20 mb-12 flex flex-col xl:flex-row items-center max-w-7xl mx-auto">
       <div class="max-w-lg">
         <h2 class="text-xl xl:text-4xl font-bold flex items-center gap-4 mb-4">
           <UIcon name="i-ph-speedometer-duotone" class="h-12 w-12 shrink-0 text-primary" />
@@ -224,7 +225,7 @@ function timesFaster(nuxt: number, iframe: number) {
           and developer experience.
         </p>
         <p class="text-gray-500 dark:text-gray-400">
-          <span class="opacity-50">*Benchmarks below are from pagespeed.web.dev running Mobile with variability, they are not accurate.</span>
+          <span class="opacity-50 text-sm">*Benchmarks are from pagespeed.web.dev Mobile report running with variability, they are not accurate.</span>
         </p>
         <UButtonGroup class="mt-10 flex flex-col md:flex-row">
           <UButton :variant="webVital === 'fcp' ? 'solid' : 'soft'" :active="webVital === 'fcp'" @click="webVital = 'fcp'">
@@ -253,7 +254,7 @@ function timesFaster(nuxt: number, iframe: number) {
               </div>
               <div class="flex items-center gap-3 max-w-full">
                 <UProgress :value="benchmark.nuxt[webVital]" :max="benchmark.iframe[webVital]" color="purple" class="flex flex-grow" />
-                <div class="w-14 flex-grow">
+                <div class="w-14 flex-grow text-right">
                   {{ humanizeMs(benchmark.nuxt[webVital]) }}
                 </div>
               </div>
@@ -264,7 +265,7 @@ function timesFaster(nuxt: number, iframe: number) {
               </div>
               <div class="flex items-center gap-3">
                 <UProgress :value="benchmark.iframe[webVital]" :max="benchmark.iframe[webVital]" color="purple" class="" />
-                <div class="w-14 flex-grow">
+                <div class="w-14 flex-grow text-right">
                   {{ humanizeMs(benchmark.iframe[webVital]) }}
                 </div>
               </div>
@@ -280,6 +281,12 @@ function timesFaster(nuxt: number, iframe: number) {
 .hero_code div div {
   @apply dark:bg-gray-900/60 backdrop-blur-3xl bg-white/60;
 }
+.logo svg {
+  max-height: 100%;
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
 .radial-fade {
   position: absolute;
   width: 100%;
diff --git a/docs/pages/scripts.vue b/docs/pages/scripts.vue
index 8bcace89..750ad600 100644
--- a/docs/pages/scripts.vue
+++ b/docs/pages/scripts.vue
@@ -107,7 +107,7 @@ const scriptsCategories = useScriptsRegistry().reduce((acc, script) => {
   </div>
 </template>
 
-<style>
+<style scoped>
 .logo svg {
   max-height: 100%;
   max-width: 100%;