v1.1.0-beta/add request beta sticky

website/index.html

@@ -27,14 +27,18 @@
         window.addEventListener('scroll', function (ev) {
           const title = document.getElementsByClassName('title')[0];
           const support = document.getElementsByClassName('support')[0];
+          const request = document.getElementsByClassName('request')[0];
 
           if (originalTitlePosition === null) originalTitlePosition = title.offsetTop;
           if (window.scrollY > originalTitlePosition) {
             support.classList.add('stickied');
             title.classList.add('stickied');
+            request.classList.add('stickied');
+            request.style.right = support.clientWidth + 64 + 'px';
           } else {
             support.classList.remove('stickied');
             title.classList.remove('stickied');
+            request.classList.remove('stickied');
           }
         });
       };
@@ -51,7 +55,7 @@
             WATCH PARTY
           </span>
         </a>
-        <a class="cta-container" href="./beta.html#request">
+        <a class="cta-container request" href="./beta.html#request">
           <mark class="cta">
             Request Beta Access
           </mark>

website/style.css

@@ -160,7 +160,8 @@ footer mark {
 footer > div > span.full {
   line-height: 2.5rem;
 }
-.support {
+.support,
+.request {
   transition: all ease-in-out 0.3s;
 }
 
@@ -168,6 +169,9 @@ footer > div > span.full {
   .cta {
     font-size: 1rem;
   }
+  .stickied {
+    z-index: 9999;
+  }
   .support {
     display: none;
     margin-top: 0;
@@ -181,6 +185,15 @@ footer > div > span.full {
     right: 2rem;
     display: block;
   }
+  .request.stickied .cta {
+    letter-spacing: 0rem;
+  }
+  .request.stickied {
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+    display: block;
+  }
   .title {
     font-size: 5rem;
   }