feat: Use vertical scrollbar (#50)

Gemfile.lock

@@ -78,9 +78,9 @@ GEM
     rexml (3.2.6)
     rouge (4.2.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.75.0-x64-mingw-ucrt)
+    sass-embedded (1.76.0-x64-mingw-ucrt)
       google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.75.0-x86_64-linux-gnu)
+    sass-embedded (1.76.0-x86_64-linux-gnu)
       google-protobuf (>= 3.25, < 5.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)

_includes/head-base-styles.html

@@ -21,6 +21,7 @@
     display: flex;
     flex-direction: column;
     overflow-wrap: break-word;
+    overflow-y: scroll;
 
     margin: 0;
     padding: 2rem 1rem;

_includes/head-home-script.html

@@ -0,0 +1,44 @@
+<script defer>
+
+  document.addEventListener("DOMContentLoaded", startup);
+
+  var touchStart;
+
+  function startup() {
+
+    const splash = document.getElementById("splash");
+
+    addEventListener("touchstart", (event) => {
+      touchStart = event.touches[0].clientY;
+    }, { passive: false, once: true });
+
+    splash.addEventListener("wheel", scrollToAbout, { passive: false, once: true });
+    splash.addEventListener("touchend", scrollToAbout, { passive: false, once: true });
+  }
+
+  // homepage: scroll to about on wheel/swipe down
+  function scrollToAbout() {
+
+    // discontinue on wheel up
+    if (event.type == "wheel" && event.deltaY < 0) return;
+
+    // discontinue on touch up
+    if (event.type == "touchend") {
+      var touchEnd = event.changedTouches[0].clientY;
+      if (touchEnd > touchStart) return;
+    }
+
+    // scroll to about section
+    setTimeout(function () {
+
+      // hide obsolete arrow navigation
+      var arrowElement = document.getElementById('shift-nav');
+      arrowElement.style.visibility = 'hidden';
+
+      // scroll to about information
+      var aboutElement = document.getElementById('about-us');
+      aboutElement.style.display = "block";
+      aboutElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+    }, 200);
+  }
+</script>

_includes/head.html

@@ -33,7 +33,7 @@
     "logo": "https://facioquo.com/assets/logo.svg"
   }
   </script>
-  {%- include utilities.script.html -%}
+  {%- include head-home-script.html -%}
 
   {%- else -%}
   <link defer rel="stylesheet" href="{{ '/assets/css/style.css?v=YYYY.MM.DD' | relative_url }}">

pages/home.html

@@ -6,18 +6,18 @@
 permalink: /
 ---
 
-<div id="splash" class="splash-page" onwheel="scrollToAbout();">
+<div id="splash" class="splash-page">
   <div class="splash">
     <h1>FacioQuo</h1>
     <h2>Simple, helpful tools</h2>
   </div>
 </div>
 
-<div class="learn-more" onwheel="scrollToAbout();">
+<div class="learn-more">
   <button id="shift-nav" class="learn-more-button" onclick="scrollToAbout();" rel="noopener nofollow">&darr;</button>
 </div>
 
-<div id="about-us" class="about-us" onwheel="scrollToSplash();">
+<div id="about-us" class="about-us">
 
   <h2 class="section-title">about us</h2>
   <p>