diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css index e3b4dc0..6331bba 100644 --- a/htdocs/assets/extra-style.css +++ b/htdocs/assets/extra-style.css @@ -78,3 +78,12 @@ background: #38BDF8; fill: red; } */ +.floatingbar-slide-down { + transform: translateY(20vh); + transition: transform 0.5s ease-in-out; +} + +.floatingbar-slide-up { + transform: translateY(-10%); + transition: transform 0.5s ease-in-out; +} \ No newline at end of file diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css index 9c254ae..4cff2e6 100644 --- a/htdocs/assets/style.css +++ b/htdocs/assets/style.css @@ -538,6 +538,11 @@ video { position: relative; } +.inset-x-0 { + left: 0px; + right: 0px; +} + .bottom-0 { bottom: 0px; } @@ -550,6 +555,10 @@ video { bottom: 5.5rem; } +.bottom-\[7vh\] { + bottom: 7vh; +} + .left-0 { left: 0px; } @@ -566,6 +575,10 @@ video { left: 3.2rem; } +.left-\[50vw\] { + left: 50vw; +} + .right-0 { right: 0px; } @@ -614,6 +627,10 @@ video { z-index: 100; } +.z-\[50\] { + z-index: 50; +} + .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; @@ -1133,6 +1150,10 @@ video { padding: 0.75rem; } +.p-\[0\.30rem\] { + padding: 0.30rem; +} + .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -1168,6 +1189,11 @@ video { padding-right: 1.75rem; } +.px-\[0\.80rem\] { + padding-left: 0.80rem; + padding-right: 0.80rem; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -1348,11 +1374,28 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-\[0px_0px_30px\] { + --tw-shadow: 0px 0px 30px; + --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.shadow-\[0px_0px_20px\] { + --tw-shadow: 0px 0px 20px; + --tw-shadow-colored: 0px 0px 20px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .shadow-accent_primary { --tw-shadow-color: #38BDF8; --tw-shadow: var(--tw-shadow-colored); } +.shadow-accent_primary_extratransparent { + --tw-shadow-color: rgba(56, 189, 248, 0.15); + --tw-shadow: var(--tw-shadow-colored); +} + .shadow-accent_primary_transparent { --tw-shadow-color: rgba(56, 189, 248, 0.30); --tw-shadow: var(--tw-shadow-colored); @@ -1448,6 +1491,12 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.hover\:shadow-\[0px_0px_30px\]:hover { + --tw-shadow: 0px 0px 30px; + --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .hover\:shadow-accent_primary_transparent:hover { --tw-shadow-color: rgba(56, 189, 248, 0.30); --tw-shadow: var(--tw-shadow-colored); @@ -1458,6 +1507,11 @@ video { --tw-shadow: var(--tw-shadow-colored); } +.hover\:shadow-accent_primary_extratransparent:hover { + --tw-shadow-color: rgba(56, 189, 248, 0.15); + --tw-shadow: var(--tw-shadow-colored); +} + .group:hover .group-hover\:flex { display: flex; } diff --git a/htdocs/index.php b/htdocs/index.php index 1ae4bb2..20b8766 100644 --- a/htdocs/index.php +++ b/htdocs/index.php @@ -14,6 +14,13 @@ require './core/query_functions.php';
+
+ + +
@@ -244,6 +251,24 @@ require './core/query_functions.php'; for(const card of document.querySelectorAll(".aboutcontainer")){ card.onmousemove = e => handleOnMouseMove(e); } + + let lastScrollTop = 0; + + window.addEventListener("scroll", function () { + const st = window.pageYOffset || document.documentElement.scrollTop; + + if (st > lastScrollTop) { + // Scrolling down + document.getElementById("floating-bar").classList.add("floatingbar-slide-down"); + document.getElementById("floating-bar").classList.remove("floatingbar-slide-up"); + } else { + // Scrolling up + document.getElementById("floating-bar").classList.remove("floatingbar-slide-down"); + document.getElementById("floating-bar").classList.add("floatingbar-slide-up"); + } + + lastScrollTop = st <= 0 ? 0 : st; + }); \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index e2068c0..c48880c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,7 +16,8 @@ module.exports = { accent_three: '#D9D9D9', accent_four: '#ACCBDE', accent_primary_transparent: 'rgba(56, 189, 248, 0.30)', - accent_secondary_transparent: 'rgba(255, 255, 255, 0.30)' + accent_secondary_transparent: 'rgba(255, 255, 255, 0.30)', + accent_primary_extratransparent: 'rgba(56, 189, 248, 0.15)', }, extend: {}, },