diff options
| author | William Carroll <wpcarro@gmail.com> | 2021-12-26T19·26-0400 |
|---|---|---|
| committer | clbot <clbot@tvl.fyi> | 2021-12-26T19·31+0000 |
| commit | 7119918120025cea1173cccfe628a63f28913361 (patch) | |
| tree | 63e68ae594951ec5b48c71845d34e02d99845ae0 | |
| parent | b97a8790ee4a8f9bd7fce0557fe65517a62f2ef7 (diff) | |
feat(wpcarro/website): Support drop-shadow on-scroll 📱 r/3442
Thank you, Tailwind CSS, for making this easy. Change-Id: I95f99bf480d78137797aef1e4d609acc509906a6 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4677 Tested-by: BuildkiteCI Reviewed-by: wpcarro <wpcarro@gmail.com> Autosubmit: wpcarro <wpcarro@gmail.com>
| -rw-r--r-- | users/wpcarro/website/index.html | 12 |
1 files changed, 11 insertions, 1 deletions
diff --git a/users/wpcarro/website/index.html b/users/wpcarro/website/index.html index 7f0f3d9f06d9..680f25376bb4 100644 --- a/users/wpcarro/website/index.html +++ b/users/wpcarro/website/index.html @@ -19,7 +19,7 @@ </script> </head> <body class="font-mono bg-gray-100"> - <header class="sticky bg-gray-100 top-0 py-6"> + <header class="sticky z-10 transition duration-300 bg-gray-100 top-0 py-6"> <div class="flex max-w-sm md:max-w-3xl mx-auto"> <div class="flex-1 text-center md:text-left text-xl md:text-base"> <a href="https://cs.tvl.fyi/depot/-/blob/users/wpcarro/website/index.html"> @@ -99,5 +99,15 @@ </footer> </div> + <script> + const $header = document.querySelector("header"); + const dropShadow = "drop-shadow-md"; + const update = () => window.scrollY !== 0 ? + $header.classList.add(dropShadow) : + $header.classList.remove(dropShadow); + + update(); + document.addEventListener("scroll", update); + </script> </body> </html> |