about summary refs log tree commit diff
diff options
context:
space:
mode:
authorWilliam Carroll <wpcarro@gmail.com>2021-12-26T19·26-0400
committerclbot <clbot@tvl.fyi>2021-12-26T19·31+0000
commit7119918120025cea1173cccfe628a63f28913361 (patch)
tree63e68ae594951ec5b48c71845d34e02d99845ae0
parentb97a8790ee4a8f9bd7fce0557fe65517a62f2ef7 (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.html12
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>