Merge pull request #13 from Fabulously-Optimized/graph-video

Graph-video fixes

Author: Madis0

app.scss

@@ -79,7 +79,7 @@
   font-family: "Inter", sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.1rem;
-  margin-right: 0.5rem;
+  /*margin-right: 0.5rem;*/
 }
 
 // Make gradient text smaller on mobile.
@@ -116,9 +116,9 @@
   }
 
   iframe {
-    // Ratio: (560px by 315px) / 2
-    width: 560px;
-    height: 315px;
+    // Ratio: (1120px by 630px) / 2
+    width: 70em;
+    height: 39.375em;
     max-width: 100%;
     border-radius: var(--gap-xl);
   }

lang/en.json

@@ -16,7 +16,9 @@
   "content.home.columned-hero.supercharge": "Supercharge",
   "content.home.columned-hero.title": "your Minecraft gameplay.",
   "content.home.columned-hero.subtitle": "A simple Minecraft modpack focusing on performance and graphics enhancements.",
-  "content.home.graph.subtitle": "Fabulously Optimized is <span class=\"smaller__gradient\">4x Quicker</span> than OptiFine.<br />",
+  "content.home.graph.subtitle": "Fabulously Optimized is <span class=\"smaller__gradient\">5x Quicker</span> than vanilla Minecraft.<br />",
+  "content.home.graph.fps": "FPS",
+  "content.home.graph.small": "Tested on AMD Ryzen 5 2600 (12) &commat; 3.400GH and NVIDIA GeForce GTX 1060 3GB running vanilla Minecraft 1.20.1 and Fabric Loader with Fabulously Optimized 5.4.1 (Singleplayer).",
   "content.home.graph.vanilla": "Vanilla Minecraft",
   "content.home.download.subtitle": "We encourage using CurseForge App, Modrinth App, Prism Launcher, MultiMC, or official Minecraft Launcher.",
   "content.home.download.title": "Download Now",

pages/index.vue

@@ -123,45 +123,34 @@ const features: any = ref([
       <!-- <img class="dramatic-screenshot" src="/dramatic-screenshot.webp" /> -->
       <div class="graph">
         <div class="item">
-          <p class="pretitle">FO</p>
+          <p class="pretitle">Fabulously Optimized</p>
           <div class="bar" style="background-color: #f5a50f !important">
-            <p>259fps</p>
-          </div>
-        </div>
-        <div class="item">
-          <p class="pretitle">OptiFine</p>
-          <div class="bar">
-            <p>56fps</p>
+            <p>259{{ $t("content.home.graph.fps") }}</p>
           </div>
         </div>
         <div class="item">
           <p class="pretitle">{{ $t("content.home.graph.vanilla") }}</p>
           <div class="bar">
-            <p>49fps</p>
+            <p>49{{ $t("content.home.graph.fps") }}</p>
           </div>
         </div>
       </div>
       <br />
       <div>
-        <!-- Fabulously Optimized {{ $t("content.home.graph.title.is") }}
-          <span class="smaller__gradient">4x {{ $t("content.home.graph.title.quicker") }}</span>{{
-            $t("content.home.graph.title.than") }} OptiFine.<br /> -->
         <h3 v-html="$t('content.home.graph.subtitle')"></h3>
       </div>
-      <small>AMD Ryzen 5 2600 (12) @ 3.400GH and NVIDIA GeForce GTX 1060 3GB running
-        Minecraft 1.20.1, OptiFine for 1.20.1, Fabric Loader with Fabulously
-        Optimized 5.4.1 RD:8, Singleplayer, PLd</small>
+      <small v-html="$t('content.home.graph.small')"></small>
     </div>
   </div>
   <div class="centered-hero">
     <h1>{{ $t("content.home.features.title") }}</h1>
-    <iframe width="560" height="315" :src="`https://www.youtube.com/embed/${$t(
+    <iframe width="1120" height="630" :src="`https://www.youtube.com/embed/${$t(
       'content.home.features.videoID'
     )}`" title="YouTube video player" frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
       allowfullscreen></iframe>
     <div class="features">
-      <div v-for=" feature  in features" class="feature-block">
+      <div v-for=" feature in features" class="feature-block">
         <div>
           <h1>
             <component class="feature-icon" :is="feature.icon"></component><span>{{ $t(`feature.${feature.id}.title`)