feat: Update contact URL, homepage scroll (#47)

facioquo · Apr 26, 2024 · 66b2c4c · 66b2c4c
1 parent 787bc57
commit 66b2c4c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Some of our microsite projects are hosted as subdomains.
 Find us [on GitHub](https://github.com/facioquo).
 
 If you need anything or want to join our Slack channel,
-[contact us](https://docs.google.com/forms/d/1ojdLRTN5UzN6OErfz4wHLlvVb6jy91vCV8o6lqs8M0M)
+[contact us](https://forms.gle/AgZq5zR2qX1Eq3xn8)
 for more information.
 
 Please note, our tools and microsites are in separate code repos.

diff --git a/_includes/head-home-styles.html b/_includes/head-home-styles.html
@@ -1,6 +1,6 @@
 <style>
   .splash-page {
-    height: calc(100dvh - 7rem);
+    height: calc(100dvh - 10rem);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -46,6 +46,8 @@
 
   .learn-more {
     text-align: center;
+    height: 4rem;
+    display: block;
   }
 
   .learn-more-button {
@@ -57,8 +59,7 @@
     background-color: unset;
 
     margin: 0;
-    min-height: unset;
-    padding: 0.75rem 2rem;
+    padding: 0rem 2rem;
 
     font-family: inherit;
     font-size: 2em;
@@ -71,14 +72,20 @@
 
   .learn-more-button:hover {
     color: rgba(230, 199, 76, 0.85);
+    background-color: rgba(230, 199, 76, 0.03);
   }
 
   .learn-more-button:active {
     color: rgba(230, 199, 76, 0.5);
-    background-color: rgba(230, 199, 76, 0.01);
+    background-color: rgba(230, 199, 76, 0.05);
   }
 
   .learn-more-button:visited {
     color: rgba(230, 199, 76, 0.5);
   }
+
+  .about-us {
+    padding-top: 2rem;
+    display: none;
+  }
 </style>
diff --git a/_includes/utilities.script.html b/_includes/utilities.script.html
@@ -1,25 +1,42 @@
 <script defer>
+
+  // homepage: scroll to about on wheel down
   function scrollToAbout() {
+
+    // handle wheel (allow click)
+    if (event.type == "wheel") {
+
+      // discontinue on wheel up
+      if (event.deltaY < 0) return;
+
+      // disable normal wheel
+      else event.preventDefault();
+    }
+
     setTimeout(function () {
+
+      // hide obsolete arrow navigation
       var arrowElement = document.getElementById('shift-nav');
-      arrowElement.style.display = 'none';
+      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: 'start' });
     }, 200);
   }
 
-  function scrollToStart(id) {
-    setTimeout(function () {
-      var element = document.getElementById(id);
-      element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
-    }, 200);
-  }
+  // homepage: scroll to splash on wheel up
+  function scrollToSplash() {
+
+    // discontinue on wheel down
+    if (event.deltaY > 0) return;
+
+    event.preventDefault();
 
-  function scrollToEnd(id) {
     setTimeout(function () {
-      var element = document.getElementById(id);
-      element.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
+      var element = document.getElementById('splash');
+      element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
     }, 200);
   }
 </script>
diff --git a/pages/home.html b/pages/home.html
@@ -2,26 +2,26 @@
 title: Simple, helpful tools
 description: We make useful tools and microsites to help or entertain others.
 layout: base
-footer: true
+footer: false
 permalink: /
 ---
 
-<div class="splash-page">
+<div id="splash" class="splash-page" onwheel="scrollToAbout();">
   <div class="splash">
     <h1>FacioQuo</h1>
     <h2>Simple, helpful tools</h2>
   </div>
 </div>
 
-<div class="learn-more">
+<div class="learn-more" onwheel="scrollToAbout();">
   <button id="shift-nav" class="learn-more-button" onclick="scrollToAbout();" rel="noopener nofollow">&darr;</button>
 </div>
 
-<div id="about-us" style="padding-top:2rem;">
+<div id="about-us" class="about-us" onwheel="scrollToSplash();">
 
   <h2 class="section-title">about us</h2>
   <p>
-    FacioQuo is an organization of experienced software creators
+    <strong>FacioQuo</strong> is an organization of experienced software creators
     that builds online tools, microsites, and other utilities.
   </p>
   <p>
@@ -36,7 +36,7 @@ <h2 class="section-title">about us</h2>
     and is the owner of this organization.
   </p>
   <p style="margin-bottom:0;">
-    <a href="https://docs.google.com/forms/d/1ojdLRTN5UzN6OErfz4wHLlvVb6jy91vCV8o6lqs8M0M" target="_blank"
+    <a href="https://forms.gle/AgZq5zR2qX1Eq3xn8" target="_blank"
       rel="noopener noreferrer">Contact us</a> for more information</a>.
   </p>
 </div>