diff --git a/index.html b/index.html index 90b2a09..8efee1f 100644 --- a/index.html +++ b/index.html @@ -24,9 +24,9 @@ -
-
-
+
+
+
@@ -56,10 +56,10 @@ href="https://last.fm/user/radiquum" id="track-name" target="_blank" referrerpolicy="origin">"LOADING . . ."

- diff --git a/static/script.js b/static/script.js index 4eb86ee..f4dc9ec 100644 --- a/static/script.js +++ b/static/script.js @@ -7,8 +7,8 @@ const IMAGE_ANIMATION_DELAY = 1000; const IMAGE_TRANSITION_DELAY = 1000; // Header percentages -const HEADER_ACTIVATION_PERCENT = 30; -const HEADER_DEACTIVATION_PERCENT = 20; +const HEADER_ACTIVATION_PERCENT = 0.4; +const HEADER_DEACTIVATION_PERCENT = 0.8; // THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!! let DELETE_INTERVAL = null; @@ -95,36 +95,24 @@ async function updatePlayingTrack() { }); } -function getBlockScrollPosition(block_id) { - const blockHeight = document.getElementById(block_id).clientHeight; - const fullPageHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; - const restPageHeight = fullPageHeight - blockHeight; - const windowScroll = document.documentElement.scrollTop - restPageHeight; - const scrolled = (windowScroll / fullPageHeight) * 100; - if (0 < Math.floor(scrolled) ) { - return 0 - } else { - return Math.floor(scrolled) * -1; - } -} - const header = document.getElementById("header"); let last_Y_pos = 0; let header_opacity = 0; window.onscroll = () => { - let scrollPosition = getBlockScrollPosition('section_landing'); - if (scrollPosition > HEADER_ACTIVATION_PERCENT) { + let landingBlock = document.getElementById("section_landing").clientHeight; + + if (window.scrollY < (landingBlock * HEADER_ACTIVATION_PERCENT)) { header.style.display = "none"; } else { header.style.display = "block"; } - if (window.scrollY > last_Y_pos && scrollPosition < HEADER_ACTIVATION_PERCENT) { + if (window.scrollY > last_Y_pos && window.scrollY > (landingBlock * HEADER_ACTIVATION_PERCENT)) { header_opacity += 0.1; - } else if (window.scrollY < last_Y_pos && scrollPosition > HEADER_DEACTIVATION_PERCENT) + } else if (window.scrollY < last_Y_pos && window.scrollY < (landingBlock * HEADER_DEACTIVATION_PERCENT)) { header_opacity -= 0.1; - last_Y_pos = window.scrollY; + } if (header_opacity > 1) { header_opacity = 1; @@ -132,6 +120,8 @@ window.onscroll = () => { header_opacity = 0; } + last_Y_pos = window.scrollY; + header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`); }; diff --git a/static/tailwind.css b/static/tailwind.css index 905795f..1b97346 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -1239,6 +1239,14 @@ body { margin-top: -248px; } + .xl\:max-h-\[30vh\] { + max-height: 30vh; + } + + .xl\:max-h-\[40vh\] { + max-height: 40vh; + } + .xl\:gap-4 { gap: 1rem; } @@ -1289,6 +1297,14 @@ body { margin-top: -0px; } + .\32xl\:h-screen { + height: 100vh; + } + + .\32xl\:max-h-\[60vh\] { + max-height: 60vh; + } + .\32xl\:w-\[512px\] { width: 512px; } @@ -1297,6 +1313,14 @@ body { width: 64px; } + .\32xl\:w-\[300px\] { + width: 300px; + } + + .\32xl\:flex-row { + flex-direction: row; + } + .\32xl\:text-4xl { font-size: 2.25rem; line-height: 2.5rem;