+
@@ -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;