v1.4.1-beta/website

website/index.html

@@ -31,7 +31,7 @@
       <h5 data-font="sans" class="logo-tag">
         WATCH YOUR FAVORITES,<br />WITH YOUR FAVORITE PEOPLE
       </h5>
-      <p data-font="sans" class="works-title">WORKS WITH</p>
+      <p data-font="sans" class="works-title">FREE. NO SIGNUP. NO BS. <br />WORKS WITH</p>
       <div class="supported">
         <div class="supported-logo" id="netflix"></div>
         <div class="supported-logo" id="hulu"></div>
@@ -41,8 +41,7 @@
         <div class="supported-logo" id="hbonow"></div>
         <div class="supported-logo" id="hbomax"></div>
       </div>
-      <p data-font="sans" class="works-title">FREE. NO SIGNUP. NO BS.</p>
+      <a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
-      <a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
     </div>
     <div class="features">
       <div class="feature-card">
@@ -82,8 +81,8 @@
         BUILT WITH ❤ FOR <a>GOOGLE CHROME</a> USING <a>FIREBASE</a>, <a>MATERIAL-UI</a>,
         <a>REACT JS</a>, <a>NODE JS</a>, & <a>GIPHY</a>.
       </p>
-      <a data-font="sans" href="./beta/" class="link-button">Support Watch Party</a>
+      <a data-font="sans-bold" href="./beta/" class="link-button">Support Watch Party</a>
-      <a data-font="sans" href="./beta/" class="link-button">Get Chrome Extension</a>
+      <a data-font="sans-bold" href="./beta/" class="link-button">Get Chrome Extension</a>
     </footer>
   </body>
 </html>

website/scripts/Stickied.js

@@ -1,16 +1,21 @@
 var LOGO_INIT = 0;
+var GET_INIT = 0;
 function handleSticky() {
   const logo = document.querySelector('.logo');
-  const logoCircle = document.querySelector('.logo-circle');
+  const get = document.querySelector('.landing .link-button');
-  if (window.scrollY >= LOGO_INIT) {
+  if (window.scrollY >= LOGO_INIT + logo.offsetHeight) {
     logo.classList.add('stickied');
-    logoCircle.classList.add('stickied');
   } else {
     logo.classList.remove('stickied');
-    logoCircle.classList.remove('stickied');
+  }
+  if (window.scrollY >= GET_INIT + get.offsetHeight) {
+    get.classList.add('stickied');
+  } else {
+    get.classList.remove('stickied');
   }
 }
 window.onload = function () {
   LOGO_INIT = document.querySelector('.logo').offsetTop;
+  GET_INIT = document.querySelector('.landing .link-button').offsetTop;
   window.addEventListener('scroll', this.handleSticky);
 };

website/styles/extrasmall.css

@@ -22,6 +22,7 @@
 * {
   margin: 0em;
   padding: 0em;
+  user-select: none;
 }
 
 html {
@@ -34,7 +35,7 @@ body {
 }
 
 .landing {
-  padding-top: 17.5rem;
+  padding-top: 12.5rem;
   padding-left: 10rem;
 }
 
@@ -70,7 +71,7 @@ body {
 }
 
 .works-title {
-  font-size: 2.4rem;
+  font-size: 3rem;
   color: var(--primary-text);
   letter-spacing: 0.75rem;
   margin: 3rem 0;
@@ -94,11 +95,11 @@ body {
 .link-button {
   display: table;
   text-decoration: none;
-  padding: 1rem 7.5rem;
+  padding: 3rem 7.5rem;
   color: var(--primary);
   background-color: var(--cta);
   font-size: 4rem;
-  border-radius: 4rem;
+  border-radius: 7.5rem;
 }
 
 .features {
@@ -108,22 +109,22 @@ body {
 
 .feature-card {
   background-color: var(--primary-light);
-  padding: 6rem 10rem;
+  padding: 6rem 7.5rem;
   margin: 10rem 0;
 }
 
 .feature-icon {
   padding: 5rem;
-  background-position: center !important;
+  background-position: left !important;
   background-size: contain !important;
   background-repeat: no-repeat !important;
-  margin: 2.5rem;
+  margin: 2.5rem 0;
 }
 
 .feature-text {
   color: var(--primary-text);
   font-size: 2.8rem;
-  text-align: center;
+  text-align: left;
 }
 
 footer {
@@ -133,7 +134,6 @@ footer {
 
 footer .works-title {
   width: 100%;
-  color: white;
 }
 
 .built-with {
@@ -142,8 +142,6 @@ footer .works-title {
 
 .built-with a {
   color: var(--cta);
-  text-decoration: underline;
-  text-underline-offset: 0.3rem;
 }
 
 footer .link-button {

website/styles/large.css

@@ -1,73 +1,4 @@
-.logo {
+.features,
-  font-size: 10rem;
-  transition: all ease-in-out 0.3s;
-}
-.logo.stickied {
-  font-size: 2rem;
-  letter-spacing: 0.8rem;
-  position: fixed;
-  background-color: var(--primary);
-  width: 100%;
-  left: 0;
-  top: 0;
-  padding: 3rem 10rem;
-}
-
 .supported {
-  max-width: 65%;
+  max-width: none;
-}
-
-.features {
-  max-width: 65%;
-}
-.feature-card {
-  background-color: var(--primary-medium);
-  z-index: 1;
-  width: 30rem;
-  height: 30rem;
-  margin: -1px;
-  display: inline-block;
-  padding: 3rem;
-  transition: all ease-in-out 0.3s;
-}
-.feature-icon {
-  z-index: 1;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  background-size: 30% !important;
-  transition: all ease-in-out 0.3s;
-}
-.feature-card .feature-text {
-  z-index: 1;
-  display: none;
-}
-.feature-card:hover {
-  background-color: var(--primary-light);
-  box-shadow: -5px 5px 100px #000000;
-  z-index: 100;
-  transform: scale(1.1);
-}
-.feature-card:hover .feature-icon {
-  height: 50%;
-}
-.feature-card:hover .feature-text {
-  display: table;
-}
-footer {
-  padding-right: 55%;
-}
-footer .works-title {
-  font-size: 2rem;
-}
-footer .built-with {
-  display: block;
-}
-footer .link-button {
-  max-width: fit-content;
-  display: inline-table;
-  margin-right: 3rem;
-  padding: 0.8rem 3.375rem;
-  font-size: 2.5rem;
 }

website/styles/medium.css

@@ -5,7 +5,86 @@ html {
 body {
   font-size: 7.5px !important;
 }
-
+.features,
 .supported {
-  max-width: 85%;
+  max-width: 75%;
+}
+.logo {
+  font-size: 10rem;
+  transition: all ease-in-out 0.3s;
+}
+.logo.stickied {
+  font-size: 2rem;
+  letter-spacing: 0.8rem;
+  position: fixed;
+  background-color: var(--primary);
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: 3rem 10rem;
+  z-index: 999 !important;
+}
+.landing .link-button {
+  transition: all ease-in-out 0.3s;
+}
+.landing .link-button.stickied {
+  position: fixed;
+  right: 0rem;
+  top: 0;
+  border-radius: 0;
+  font-size: 2rem;
+  z-index: 1999 !important;
+}
+.feature-card {
+  background-color: var(--primary-medium);
+  z-index: 1;
+  width: 30rem;
+  height: 30rem;
+  margin: -1px;
+  display: inline-block;
+  padding: 3rem;
+  transition: all ease-in-out 0.3s;
+}
+.feature-icon {
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  background-size: 30% !important;
+  background-position: center !important;
+  transition: all ease-in-out 0.3s;
+}
+.feature-card .feature-text {
+  z-index: 1;
+  display: none;
+  text-align: center;
+}
+.feature-card:hover {
+  background-color: var(--primary-light);
+  box-shadow: -5px 5px 100px #000000;
+  z-index: 100;
+  transform: scale(1.1);
+}
+.feature-card:hover .feature-icon {
+  height: 50%;
+}
+.feature-card:hover .feature-text {
+  display: table;
+}
+footer {
+  padding-right: 45%;
+}
+footer .works-title {
+  font-size: 2rem;
+}
+footer .built-with {
+  display: block;
+}
+footer .link-button {
+  max-width: fit-content;
+  display: inline-table;
+  margin-right: 3rem;
+  padding: 0.8rem 3.375rem;
+  font-size: 2.5rem;
 }

website/styles/variables.css

@@ -1,6 +1,6 @@
 :root {
   --primary: white;
-  --primary-medium: #6f8d00;
+  --primary-medium: #c5c5c5;
   --primary-light: #c0f300;
   --cta: black;
   --primary-text: black;