From b09a84afbef6ceda8ff3955c5af17c06aed775c1 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 14 Sep 2024 13:54:03 +0500 Subject: [PATCH] feat: add landing --- index.html | 19 +++++-- static/script.js | 39 ++++++++++++++ static/tailwind.css | 122 ++++++++++++++++++++++---------------------- 3 files changed, 115 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 24c5b7d..203ba5f 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -7,7 +7,17 @@ -
+
+
+ +
+ +

KENTAI RADIQUUM

+
+ +
+
+
@@ -36,10 +46,13 @@
- READ MORE + READ MORE LINKS
+
+
+
diff --git a/static/script.js b/static/script.js index c332d3a..0ac90e1 100644 --- a/static/script.js +++ b/static/script.js @@ -17,7 +17,46 @@ function updatePlayingTrack() { }); } +function getScrollPosition () { + const height = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + const windowScroll = document.documentElement.scrollTop; + const scrolled = (windowScroll / height) * 100; + return Math.floor(scrolled) +} + window.onload = () => { updatePlayingTrack(); setInterval(updatePlayingTrack, 360000); } +const header = document.getElementById("header") +let last_Y_pos = 0 +let header_opacity = 0 + +window.onscroll = () => { + let scrollPosition = getScrollPosition() + console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity) + + if (scrollPosition < 20) { + header.style.display = "none" + } else { + header.style.display = "block" + } + + + if ((window.scrollY > last_Y_pos) && (scrollPosition > 40)) { + header_opacity += 0.1 + } else if ((window.scrollY < last_Y_pos) && (scrollPosition < 40)) ( + header_opacity -= 0.1 + ) + last_Y_pos = window.scrollY + + if (header_opacity > 1) { + header_opacity = 1 + } else if (header_opacity < 0) { + header_opacity = 0 + } + + header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`) +} \ No newline at end of file diff --git a/static/tailwind.css b/static/tailwind.css index 6ef5d29..28ba099 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -588,6 +588,10 @@ video { } } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -596,6 +600,10 @@ video { position: relative; } +.sticky { + position: sticky; +} + .right-0 { right: 0px; } @@ -604,10 +612,18 @@ video { top: 0px; } +.left-0 { + left: 0px; +} + .-z-10 { z-index: -10; } +.z-10 { + z-index: 10; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -630,10 +646,6 @@ video { margin-left: 2rem; } -.mt-8 { - margin-top: 2rem; -} - .flex { display: flex; } @@ -654,8 +666,8 @@ video { height: 100vh; } -.max-h-\[40\%\] { - max-height: 40%; +.max-h-\[40vh\] { + max-height: 40vh; } .max-h-\[4px\] { @@ -666,18 +678,14 @@ video { max-height: 60vh; } -.max-h-\[40vh\] { - max-height: 40vh; -} - -.min-h-screen { - min-height: 100vh; -} - .w-\[256px\] { width: 256px; } +.w-\[300px\] { + width: 300px; +} + .w-\[30px\] { width: 30px; } @@ -690,22 +698,14 @@ video { width: 100%; } -.w-\[300px\] { - width: 300px; -} - -.w-\[280px\] { - width: 280px; +.w-\[64px\] { + width: 64px; } .max-w-\[45\%\] { max-width: 45%; } -.max-w-\[55\%\] { - max-width: 55%; -} - .max-w-\[45\.25\%\] { max-width: 45.25%; } @@ -714,14 +714,6 @@ video { max-width: 54.75%; } -.flex-1 { - flex: 1 1 0%; -} - -.flex-col { - flex-direction: column; -} - .items-end { align-items: flex-end; } @@ -758,6 +750,10 @@ video { overflow-x: hidden; } +.scroll-smooth { + scroll-behavior: smooth; +} + .bg-bg-black { --tw-bg-opacity: 1; background-color: rgb(30 30 30 / var(--tw-bg-opacity)); @@ -815,14 +811,6 @@ video { padding-right: 0.5rem; } -.pt-8 { - padding-top: 2rem; -} - -.text-center { - text-align: center; -} - .text-2xl { font-size: 1.5rem; line-height: 2rem; @@ -838,6 +826,11 @@ video { line-height: 2.5rem; } +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + .font-medium { font-weight: 500; } @@ -856,20 +849,12 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.shadow-black { - --tw-shadow-color: #000; - --tw-shadow: var(--tw-shadow-colored); +.opacity-0 { + opacity: 0; } -.shadow-bg-blue { - --tw-shadow-color: #298FF5; - --tw-shadow: var(--tw-shadow-colored); -} - -.transition-opacity { - transition-property: opacity; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; +.opacity-\[var\(--header-opacity\2c 0\)\] { + opacity: var(--header-opacity,0); } .transition-colors { @@ -910,10 +895,6 @@ body { font-family: 'Fira Mono', monospace; } -.hover\:bg-opacity-90:hover { - --tw-bg-opacity: 0.9; -} - .hover\:bg-opacity-85:hover { --tw-bg-opacity: 0.85; } @@ -922,17 +903,15 @@ body { text-decoration-line: underline; } -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - @media (min-width: 1024px) { .lg\:w-\[372px\] { width: 372px; } + .lg\:w-\[64px\] { + width: 64px; + } + .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; @@ -942,6 +921,11 @@ body { font-size: 2.25rem; line-height: 2.5rem; } + + .lg\:text-2xl { + font-size: 1.5rem; + line-height: 2rem; + } } @media (min-width: 1280px) { @@ -954,6 +938,11 @@ body { font-size: 3.75rem; line-height: 1; } + + .xl\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } } @media (min-width: 1536px) { @@ -961,6 +950,10 @@ body { width: 512px; } + .\32xl\:w-\[64px\] { + width: 64px; + } + .\32xl\:text-5xl { font-size: 3rem; line-height: 1; @@ -970,4 +963,9 @@ body { font-size: 6rem; line-height: 1; } + + .\32xl\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } } \ No newline at end of file