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