fix: Screen jitter due to SVG background resizing (#51)

Signed-off-by: Dave Skender <8432125+DaveSkender@users.noreply.github.com>
facioquo · May 8, 2024 · 6cbfd22 · 6cbfd22
1 parent bb161c5
commit 6cbfd22
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 44 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -20,7 +20,7 @@ GEM
       rake (>= 13)
     htmlcompressor (0.4.0)
     http_parser.rb (0.8.0)
-    i18n (1.14.4)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     jekyll (4.3.3)
       addressable (~> 2.4)
@@ -78,9 +78,9 @@ GEM
     rexml (3.2.6)
     rouge (4.2.1)
     safe_yaml (1.0.5)
-    sass-embedded (1.76.0-x64-mingw-ucrt)
+    sass-embedded (1.77.0-x64-mingw-ucrt)
       google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.76.0-x86_64-linux-gnu)
+    sass-embedded (1.77.0-x86_64-linux-gnu)
       google-protobuf (>= 3.25, < 5.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)

diff --git a/_includes/head-base-styles.html b/_includes/head-base-styles.html
@@ -17,6 +17,7 @@
   body {
     color: #adadad;
     background-color: #1b1b1b;
+    background-blend-mode: normal;
 
     display: flex;
     flex-direction: column;
@@ -28,19 +29,43 @@
     min-height: calc(100dvh - 4rem);
   }
 
-  .background-stripes {
-    z-index: -1;
-    position: fixed;
-    top: 0;
-    left: 0;
+  /* stripes | portrait, tall */
+  @media (orientation: portrait) {
+    body {
+      background-image:
+        repeating-linear-gradient(-230deg,
+          hsl( 24, 42%, 12%)  00.000dvw  45.575dvw,
+          hsl(218, 26%, 12%)  45.575dvw 102.054dvw,
+          hsl( 45, 50%, 12%) 102.054dvw 126.099dvw,
+          hsl(  0,  0%, 12%) 126.099dvw 139.520dvw,
+          hsl( 96, 21%, 12%) 139.520dvw 201.312dvw);
+    }
+  }
 
-    aspect-ratio: 1;
-    min-height: 100dvh;
-    min-width: 100dvw;
+  /* stripes | portrait, squarish */
+  @media (orientation: portrait) and (min-aspect-ratio: 0.8) {
+    body {
+      background-image:
+        repeating-linear-gradient(-230deg,
+          hsl( 24, 42%, 12%)  00.000dvw  37.979dvw,
+          hsl(218, 26%, 12%)  37.979dvw  85.045dvw,
+          hsl( 45, 50%, 12%)  85.045dvw 105.083dvw,
+          hsl(  0,  0%, 12%) 105.083dvw 116.267dvw,
+          hsl( 96, 21%, 12%) 116.267dvw 167.760dvw);
+    }
+  }
 
-    background-image: url('assets/background.svg');
-    background-repeat: no-repeat;
-    background-size: cover;
+  /* stripes | landscape */
+  @media (orientation: landscape) {
+    body {
+      background-image:
+        repeating-linear-gradient(-230deg,
+          hsl( 24, 42%, 12%) 00.000dvw  30.383dvw,
+          hsl(218, 26%, 12%) 30.383dvw  68.036dvw,
+          hsl( 45, 50%, 12%) 68.036dvw  84.066dvw,
+          hsl(  0,  0%, 12%) 84.066dvw  93.013dvw,
+          hsl( 96, 21%, 12%) 93.013dvw 134.208dvw);
+    }
   }
 
   main,
@@ -176,7 +201,6 @@
 
     h2 {
       font-size: 1.8rem;
-      font-weight: 500;
     }
   }
 
@@ -197,8 +221,10 @@
   /* BUTTONS */
   button {
     min-height: 3.2em;
+  }
 
-    @media screen and (max-width: 480px) {
+  @media screen and (max-width: 480px) {
+    button {
       width: 100%;
     }
   }

diff --git a/_includes/head-home-script.html b/_includes/head-home-script.html
@@ -2,43 +2,54 @@
 
   document.addEventListener("DOMContentLoaded", startup);
 
-  var touchStart;
-
   function startup() {
 
     document.addEventListener(
-      "touchstart", handleTouchStart, { passive: false, once: true });
+      "touchmove", removeSplashNav, { passive: true, once: true });
 
-    document.addEventListener("wheel", scrollToAbout, { passive: false, once: true });
-    document.addEventListener("touchend", scrollToAbout, { passive: false, once: true });
+    document.addEventListener(
+      "wheel", removeSplashNav, { passive: true, once: true });
   }
 
-  function handleTouchStart() {
-    touchStart = event.touches[0].clientY;
-  }
+  // homepage: remove navigation, fixed splash size
+  function removeSplashNav() {
+
+    // hide obsolete arrow navigation
+    var arrowElement = document.getElementById('splash-nav');
+    arrowElement.style.visibility = 'hidden';
 
-  // homepage: scroll to about on wheel/swipe down
-  function scrollToAbout() {
+    // fixed splash size to avoid resizing with iOS menu
+    var splashElement = document.getElementById('splash');
+    splashElement.style.height = splashElement.offsetHeight + 'px';
 
-    // discontinue on wheel up
-    if (event.type == "wheel" && event.deltaY < 0) return;
+    // show the rest of the page
+    var aboutElement = document.getElementById('about-us');
+    aboutElement.style.display = "block";
 
-    // discontinue on touch up
-    if (event.type == "touchend") {
-      var touchEnd = event.changedTouches[0].clientY;
-      if (touchEnd > touchStart) return;
+    // do the scroll if directed
+    if (event?.type == "wheel") {
+      window.scrollBy(0, event.deltaY);
+    };
+
+    if (event?.type == "touchmove") {
+      window.scrollBy(0, event.changedTouches[0].deltaY);
     }
 
+    // remove obsolete event listeners
+    document.removeEventListener("touchstart", TouchEvent);
+    document.removeEventListener("wheel", WheelEvent);
+  }
+
+  // homepage: scroll to about
+  function handleSplashNavClick() {
+
     // scroll to about section
     setTimeout(function () {
 
-      // hide obsolete arrow navigation
-      var arrowElement = document.getElementById('shift-nav');
-      arrowElement.style.visibility = 'hidden';
+      removeSplashNav();
 
       // scroll to about information
       var aboutElement = document.getElementById('about-us');
-      aboutElement.style.display = "block";
       aboutElement.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     }, 200);
   }

diff --git a/_includes/head-home-styles.html b/_includes/head-home-styles.html
@@ -14,9 +14,9 @@
 
   .splash h1,
   .splash h2,
-  .splash h3,
-  .splash p {
-    color: #bbbbbb;
+  .splash h3 {
+    text-wrap: nowrap;
+    overflow: hidden;
   }
 
   .splash h1 {
@@ -37,6 +37,21 @@
       font-size: 2.9em;
       font-weight: 500;
     }
+
+    .splash h2 {
+      font-size: 1.3em;
+    }
+  }
+
+  @media screen and (max-width: 380px) {
+
+    .splash h1 {
+      font-size: 2.8em;
+    }
+
+    .splash h2 {
+      font-size: 1.2em;
+    }
   }
 
   .splash p {

diff --git a/_includes/head.html b/_includes/head.html
@@ -4,9 +4,10 @@
   <meta name="robots" content="noindex, nofollow">
   {%- endif -%}
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="msapplication-config" content="assets/icons/browserconfig.xml">
   <meta name="msapplication-TileColor" content="#1b1b1b">
   <meta name="theme-color" content="#1b1b1b">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   {%- seo -%}
 
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -28,8 +29,9 @@
   {
     "@context": "https://schema.org",
     "@type": "Organization",
+    "image": "https://facioquo.com/assets/social-banner.png",
     "name": "FacioQuo",
-    "url": "https://facioquo.com/",
+    "url": "https://facioquo.com",
     "logo": "https://facioquo.com/assets/logo.svg"
   }
   </script>

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -3,7 +3,6 @@
 {%- include head.html -%}
 
 <body>
-  <div class="background-stripes"></div>
   <main aria-label="Content" id="main-content">
     {{ content }}
   </main>

diff --git a/assets/background.svg b/assets/background.svg
diff --git a/pages/home.html b/pages/home.html
@@ -14,7 +14,8 @@ <h2>Simple, helpful tools</h2>
 </div>
 
 <div class="learn-more">
-  <button id="shift-nav" class="learn-more-button" onclick="scrollToAbout();" rel="noopener nofollow">&darr;</button>
+  <button id="splash-nav" class="learn-more-button" rel="noopener nofollow"
+    onclick="handleSplashNavClick();">&darr;</button>
 </div>
 
 <div id="about-us" class="about-us">