add video button

src/app.scss

@@ -25,6 +25,21 @@ button.setting-button {
  display: block;
 }
 
+.tutorial-button {
+ background-image: url("/sgvideothumbnail.jpg");
+ background-size: auto 250%;
+ background-position: center;
+ position: relative;
+}
+
+.tutorial-button:hover {
+ filter: brightness(1.3);
+}
+
+.tutorial-button:hover .foo {
+ filter: brightness(0.8);
+}
+
 /* Import only what you need from Bulma */
 @import "bulma/sass/utilities/_all";
 @import "bulma/sass/base/_all";
@@ -62,7 +77,7 @@ $divider-margin-size: 0px;
  position: relative;
  display: inline-block;
  width: 60px;
- height: 34px;
+ height: 30px;
  margin-right: 10px;
  margin-left: 10px;
 
@@ -88,8 +103,8 @@ $divider-margin-size: 0px;
  &:before {
  position: absolute;
  content: "";
- height: 26px;
- width: 26px;
+ height: 22px;
+ width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;

src/routes/superglidetrainer/+page.svelte

@@ -588,11 +588,11 @@
  A Superglide needs a jump input first and then a crouch input 1 frame later. You need to do the whole Superglide in the last 0.15 second of a
  mantle.
  </p>
- <br />
  <p>
  That makes the correct timing of Jump -> Crouch way harder than timing the whole Superglide in the mantle. This trainer will help you learn
  that much harder Jump -> Crouch timing.
  </p>
+ <br />
  <p>
  <a href="https://youtu.be/_cP1YO5Idts?si=w8I9vglYEgI_FvtK" target="_blank">Here</a> is our official companion video to this Trainer. Giving you
  every single tip and trick you could need.
@@ -664,13 +664,22 @@
  </button>
  </div>
  <div class="box">
- <div class="switch-container is-size-4">
- <span class:has-text-grey-light={$isController} class="label-left">MnK</span>
- <label class="switch">
- <input type="checkbox" on:click={toggleController} />
- <span class="slider round" />
- </label>
- <span class:has-text-grey-light={!$isController} class="label-right">Controller</span>
+ <div class="field">
+ <div class="field-body">
+ <div class="switch-container is-size-4 field has-addons">
+ <span class:has-text-grey-light={$isController} class="label-left">MnK</span>
+ <label class="switch">
+ <input type="checkbox" on:click={toggleController} />
+ <span class="slider round" />
+ </label>
+ <span class:has-text-grey-light={!$isController} class="label-right">Controller</span>
+ </div>
+ <a class="button is-primary tutorial-button" href="https://www.youtube.com/watch?v=_cP1YO5Idts" target="_blank">
+ <div class="transparent">
+ <span class="foo">Superglide Tutorial Video</span>
+ </div>
+ </a>
+ </div>
  </div>
  {#if $isController}
  <br />