some design changes

muckelba · Nov 30, 2023 · 1ee508e · 1ee508e
1 parent 5ac0999
commit 1ee508e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 25 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -94,7 +94,7 @@ $divider-margin-size: 0px;
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: #ccc;
+      background-color: $grey-darker;
       border-radius: 34px;
       transition: 0.4s;
 

diff --git a/src/lib/components/Faq.svelte b/src/lib/components/Faq.svelte
@@ -6,15 +6,16 @@
   }
 </script>
 
-<div class="card">
+<div class="card {faqHidden ? 'container' : ''}">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-missing-attribute -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header" on:click={toggleFaq}>
-    <button class="button card-header-icon is-large" aria-label="collapse the FAQ">
-      <i class="fa fa-angle-{faqHidden ? 'down' : 'up'}" />
-    </button>
-    <p class="card-header-title title is-3">FAQ</p>
+    <p class="card-header-title title is-3 is-centered">
+      <i class="fa fa-angle-{faqHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      FAQ
+      <i class="fa fa-angle-{faqHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+    </p>
   </a>
   <div class="card-content faq-content {faqHidden ? 'is-hidden' : ''}">
     <h4 class="title is-4 is-underlined">Superglide Trainer questions:</h4>
@@ -27,7 +28,12 @@
             <strong>Website Issues:</strong>
           </p>
           <p class="subtitle is-6">
-            By using this web based Superglide trainer you trade accuracy for convenience, compared to the Powershell script.
+            By using this web based Superglide trainer you trade accuracy for convenience, compared to the <a
+              href="https://github.com/AngryGroceries/Apex_Superglide_Practice_Tool"
+              target="_blank"
+            >
+              Powershell script.
+            </a>
           </p>
           <p class="subtitle is-6">
             On the web we can only pull your inputs at a certain frequency. This introduces uncertainty. We are currently working on displaying this
@@ -42,8 +48,9 @@
             But this means this web based Superglide Trainer still fulfills its purpose.<br />
             It helps beginners and intermediates get used to the order of inputs, resolve hardware problems and track their rough progress.<br />
             But if your overall superglide consistency starts to regularly stay above 70% and you want to make sure that your progress towards 90 and 100%
-            is as accurate as possible, you could start using the Powershell script linked at the bottom. It's not limited by browser limitations and doesn't
-            suffer from the same uncertainty problem.
+            is as accurate as possible, you could start using the
+            <a href="https://github.com/AngryGroceries/Apex_Superglide_Practice_Tool" target="_blank"> Powershell script </a>. It's not limited by
+            browser limitations and doesn't suffer from the same uncertainty problem.
           </p>
           <p class="subtitle is-6 is-underlined">
             <strong>Keyboard issues:</strong>
@@ -159,8 +166,10 @@
           <p class="subtitle is-6">
             In general, yes. At 60 FPS you have to time the two inputs 16ms apart at 300 FPS it's just 3ms. So your input window definitely gets
             shorter at higher fps. We had a short moment where we suspected that Superglides might not need a 1 Frame gap. But after some extensive
-            testing we are now very certain that it's always 1 frame. However there are also scenarios where Supergliding becomes easier with higher
-            FPS.
+            testing we are now very certain that it's always 1 frame. However there are also scenarios where Supergliding <a
+              href="https://youtu.be/_cP1YO5Idts?si=vHcEcz77RYe5zeMN&t=969"
+              target="_blank">becomes easier with higher FPS</a
+            >.
           </p>
         </li>
       </ul>

diff --git a/src/lib/components/Tips.svelte b/src/lib/components/Tips.svelte
@@ -5,15 +5,16 @@
   }
 </script>
 
-<div class="card">
+<div class="card {tipsHidden ? 'container' : ''}">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-missing-attribute -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <a class="card-header" on:click={toggleHidden}>
-    <button class="button card-header-icon is-large" aria-label="collapse helpful tips">
-      <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'}" />
-    </button>
-    <p class="card-header-title title is-3">Helpful tips to get better</p>
+    <p class="card-header-title title is-3 is-centered">
+      <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+      Helpful tips to get better
+      <i class="fa fa-angle-{tipsHidden ? 'down' : 'up'} icon is-large has-text-primary" />
+    </p>
   </a>
   <div class="card-content {tipsHidden ? 'is-hidden' : ''}">
     <div class="content">

diff --git a/src/routes/superglidetrainer/+page.svelte b/src/routes/superglidetrainer/+page.svelte
@@ -574,16 +574,28 @@
 </script>
 
 <section class="section background-image" style={randomImage ? `background-image: url('${randomImage}');` : ""}>
+  <div class="columns is-vcentered">
+    <div class="column is-narrow">
+      <a class="button" href="/">
+        <span class="icon">
+          <i class="fa fa-arrow-left" />
+        </span>
+        <span>Home</span>
+      </a>
+    </div>
+    <div class="column">
+      <h1 class="title is-1 has-text-centered">
+        <span class="icon is-medium">
+          <img src="/logo.png" alt="superglidetrainer logo" style="transform: scaleX(-1);" />
+        </span>
+        {siteTitle}
+        <span class="icon is-medium">
+          <img src="/logo.png" alt="superglidetrainer logo" />
+        </span>
+      </h1>
+    </div>
+  </div>
   <div class="container">
-    <h1 class="title is-1 has-text-centered">
-      <span class="icon is-medium">
-        <img src="/logo.png" alt="superglidetrainer logo" style="transform: scaleX(-1);" />
-      </span>
-      {siteTitle}
-      <span class="icon is-medium">
-        <img src="/logo.png" alt="superglidetrainer logo" />
-      </span>
-    </h1>
     <div
       class="box has-text-centered gradient"
       style="border-bottom: 12px solid transparent; border-image: linear-gradient(90deg, rgba(0, 0, 0, 0), {$gradientArray