From 6cbfd227ea2a752cf11d056fa87e5c61d88ac523 Mon Sep 17 00:00:00 2001
From: Dave Skender <8432125+DaveSkender@users.noreply.github.com>
Date: Wed, 8 May 2024 18:18:52 -0400
Subject: [PATCH] fix: Screen jitter due to SVG background resizing (#51)
Signed-off-by: Dave Skender <8432125+DaveSkender@users.noreply.github.com>
---
Gemfile.lock | 6 ++--
_includes/head-base-styles.html | 52 ++++++++++++++++++++++++---------
_includes/head-home-script.html | 51 +++++++++++++++++++-------------
_includes/head-home-styles.html | 21 +++++++++++--
_includes/head.html | 6 ++--
_layouts/base.html | 1 -
assets/background.svg | 1 -
pages/home.html | 3 +-
8 files changed, 97 insertions(+), 44 deletions(-)
delete mode 100644 assets/background.svg
diff --git a/Gemfile.lock b/Gemfile.lock
index 0772b66..d32f950 100644
--- 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
index 300520f..baadf86 100644
--- 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
index c3275f1..b2c22b4 100644
--- 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
index 0055033..ec0cc44 100644
--- 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
index e147d2f..99adadb 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -4,9 +4,10 @@
{%- endif -%}
+
+
-
{%- seo -%}
@@ -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"
}
diff --git a/_layouts/base.html b/_layouts/base.html
index 5496672..e031e47 100644
--- a/_layouts/base.html
+++ b/_layouts/base.html
@@ -3,7 +3,6 @@
{%- include head.html -%}
-
{{ content }}
diff --git a/assets/background.svg b/assets/background.svg
deleted file mode 100644
index 595c76f..0000000
--- a/assets/background.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/pages/home.html b/pages/home.html
index ffb8d2e..d3a6d53 100644
--- a/pages/home.html
+++ b/pages/home.html
@@ -14,7 +14,8 @@ Simple, helpful tools
-
+