v1.2.0-beta/website restructure

website/font.css

@@ -1,31 +1,37 @@
 @font-face {
   font-family: 'PixelSplitter';
-  src: url('pixelsplitter-bold-webfont.woff2') format('woff2'),
+  src: url('./fonts/pixelsplitter-bold-webfont.woff2') format('woff2'),
-    url('pixelsplitter-bold-webfont.woff') format('woff');
+    url('./fonts/pixelsplitter-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'GlacialBold';
-  src: url('glacialindifference-bold-webfont.woff2') format('woff2'),
+  src: url('./fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
-    url('glacialindifference-bold-webfont.woff') format('woff');
+    url('./fonts/glacialindifference-bold-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'GlacialItalic';
-  src: url('glacialindifference-italic-webfont.woff2') format('woff2'),
+  src: url('./fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
-    url('glacialindifference-italic-webfont.woff') format('woff');
+    url('./fonts/glacialindifference-italic-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'Glacial';
-  src: url('glacialindifference-regular-webfont.woff2') format('woff2'),
+  src: url('./fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
-    url('glacialindifference-regular-webfont.woff') format('woff');
+    url('./fonts/glacialindifference-regular-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
-* {
+[data-font='serif'] {
   font-family: 'PixelSplitter', sans-serif;
 }
+[data-font='sans'] {
+  font-family: 'Glacial', sans-serif;
+}
+[data-font='sans-bold'] {
+  font-family: 'GlacialBold', sans-serif;
+}

website/index.html

@@ -1,180 +1,30 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="57x57" href="./icons/apple-icon-57x57.png" />
-    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="./icons/apple-icon-60x60.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="./icons/apple-icon-72x72.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="./icons/apple-icon-76x76.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="./icons/apple-icon-114x114.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="./icons/apple-icon-120x120.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="./icons/apple-icon-144x144.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="./icons/apple-icon-152x152.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-icon-180x180.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="./icons/android-icon-192x192.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="./icons/favicon-96x96.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
-    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" href="./icons/favicon.ico" />
-    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
+    <link rel="manifest" href="./manifest.json" />
-    <link rel="stylesheet" type="text/css" href="font.css" />
+    <meta name="msapplication-TileImage" content="./icons/ms-icon-144x144.png" />
-    <link rel="stylesheet" type="text/css" href="style.css" />
+    <link rel="stylesheet" type="text/css" href="./font.css" />
+    <link rel="stylesheet" type="text/css" href="./styles/index.css" />
+    <link rel="import" type="text/html" href="./components/landing.html" />
+    <script src="./scripts/Stickied.js"></script>
     <title>Watch Party</title>
   </head>
   <body>
-    <script>
+    <section class="landing"></section>
-      window.onload = function () {
+    <a data-font="sans">TEST</a>
-        let originalTitlePosition = null;
-        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');
-          }
-        });
-      };
-    </script>
-    <section>
-      <div class="page">
-        <!-- <a class="cta-container" href="http://get.chromewatchparty.com">
-          <mark class="cta">
-            Get Chrome Extension. It's Free.
-          </mark>
-        </a> -->
-
-        <a class="cta-container request" href="./beta/#request">
-          <mark class="cta">
-            Request Beta Access
-          </mark>
-        </a>
-        <a href="#" class="title">
-          <span>
-            WATCH PARTY
-          </span>
-        </a>
-        <a class="cta-container support" href="https://www.paypal.me/Ayushya">
-          <mark class="cta">
-            Support Watch Party
-          </mark>
-        </a>
-      </div>
-    </section>
-    <section data-page="2">
-      <div class="page">
-        <img src="./intro.gif" alt="Watch Party Intro" />
-        <p>
-          Watch your favorites on Netflix, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
-          people
-        </p>
-        <mark>More Coming Soon.</mark>
-      </div>
-    </section>
-    <section data-page="3">
-      <div class="page">
-        <div class="row">
-          <div class="col image">
-            <img src="./hideable.gif" alt="No time sync" />
-          </div>
-          <div class="col text">
-            Hide the chat - focus on the show, <br />
-            while staying synced. <br />
-            Built to not be in your way but, <br />
-            also be there when you need it.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col text left">
-            No signup or login required.<br />
-            Just ready to go.
-          </div>
-          <div class="col image">
-            <img src="./noauth.gif" alt="No time sync" />
-          </div>
-          <div class="col text right">
-            No signup or login required. Just ready to go.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col image">
-            <img src="./beforeorafter.gif" alt="No time sync" />
-          </div>
-          <div class="col text">
-            Start the party before the show, <br />
-            or after the show. <br />
-            Just do what you want.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col text left">
-            What happens in Watch Party, <br />
-            stays in Watch Party -<br />
-            for 24 hours - then it's gone.
-          </div>
-          <div class="col image">
-            <img src="./timed.gif" alt="No time sync" />
-          </div>
-          <div class="col text right">
-            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
-          </div>
-        </div>
-        <div class="row">
-          <div class="col image">
-            <img src="./track.jpeg" alt="No time sync" />
-          </div>
-          <div class="col text">
-            Know when your friends pause and play
-          </div>
-        </div>
-
-        <div class="row">
-          <div class="col text left">
-            When words aren't enough, <br />
-            use a GIF from Giphy
-          </div>
-          <div class="col image">
-            <img src="./giphy.gif" alt="No time sync" />
-          </div>
-          <div class="col text right">
-            When words aren't enough use a GIF from Giphy
-          </div>
-        </div>
-      </div>
-    </section>
-    <footer>
-      <div>
-        <span class="full">© Ayushya Amitabh, 2020</span>
-        <span>
-          Built with ❤️ for
-          <a href="https://www.google.com/chrome/">Google Chrome</a>
-          using
-          <a href="https://firebase.google.com/">Firebase</a>,
-          <a href="https://material-ui.com/">Material-UI</a>,
-          <a href="https://reactjs.org/">React JS </a>,
-          <a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
-        </span>
-      </div>
-      <div>
-        <span class="full">
-          <a href="http://get.chromewatchparty.com">
-            <mark>Get Chrome Extension</mark>
-          </a>
-        </span>
-        <span>
-          Help keep Watch Party free -
-          <a href="https://www.paypal.me/Ayushya">
-            <mark>Support Watch Party</mark>
-          </a>
-        </span>
-      </div>
-    </footer>
   </body>
 </html>

website/indexold.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" />
+    <meta name="msapplication-TileImage" content="ms-icon-144x144.png" />
+    <link rel="stylesheet" type="text/css" href="font.css" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Watch Party</title>
+  </head>
+  <body>
+    <section>
+      <div class="page">
+        <!-- <a class="cta-container" href="http://get.chromewatchparty.com">
+          <mark class="cta">
+            Get Chrome Extension. It's Free.
+          </mark>
+        </a> -->
+
+        <a class="cta-container request" href="./beta/#request">
+          <mark class="cta">
+            Request Beta Access
+          </mark>
+        </a>
+        <a href="#" class="title">
+          <span>
+            WATCH PARTY
+          </span>
+        </a>
+        <a class="cta-container support" href="https://www.paypal.me/Ayushya">
+          <mark class="cta">
+            Support Watch Party
+          </mark>
+        </a>
+      </div>
+    </section>
+    <section data-page="2">
+      <div class="page">
+        <img src="./intro.gif" alt="Watch Party Intro" />
+        <p>
+          Watch your favorites on Netflix, Disney+, Amazon Prime, & Hulu (Beta) with your favorite
+          people
+        </p>
+        <mark>More Coming Soon.</mark>
+      </div>
+    </section>
+    <section data-page="3">
+      <div class="page">
+        <div class="row">
+          <div class="col image">
+            <img src="./hideable.gif" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Hide the chat - focus on the show, <br />
+            while staying synced. <br />
+            Built to not be in your way but, <br />
+            also be there when you need it.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            No signup or login required.<br />
+            Just ready to go.
+          </div>
+          <div class="col image">
+            <img src="./noauth.gif" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            No signup or login required. Just ready to go.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./beforeorafter.gif" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Start the party before the show, <br />
+            or after the show. <br />
+            Just do what you want.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col text left">
+            What happens in Watch Party, <br />
+            stays in Watch Party -<br />
+            for 24 hours - then it's gone.
+          </div>
+          <div class="col image">
+            <img src="./timed.gif" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
+          </div>
+        </div>
+        <div class="row">
+          <div class="col image">
+            <img src="./track.jpeg" alt="No time sync" />
+          </div>
+          <div class="col text">
+            Know when your friends pause and play
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col text left">
+            When words aren't enough, <br />
+            use a GIF from Giphy
+          </div>
+          <div class="col image">
+            <img src="./giphy.gif" alt="No time sync" />
+          </div>
+          <div class="col text right">
+            When words aren't enough use a GIF from Giphy
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer>
+      <div>
+        <span class="full">© Ayushya Amitabh, 2020</span>
+        <span>
+          Built with ❤️ for
+          <a href="https://www.google.com/chrome/">Google Chrome</a>
+          using
+          <a href="https://firebase.google.com/">Firebase</a>,
+          <a href="https://material-ui.com/">Material-UI</a>,
+          <a href="https://reactjs.org/">React JS </a>,
+          <a href="https://nodejs.org/en/">Node.js </a>& <a href="https://giphy.com/"> Giphy</a>.
+        </span>
+      </div>
+      <div>
+        <span class="full">
+          <a href="http://get.chromewatchparty.com">
+            <mark>Get Chrome Extension</mark>
+          </a>
+        </span>
+        <span>
+          Help keep Watch Party free -
+          <a href="https://www.paypal.me/Ayushya">
+            <mark>Support Watch Party</mark>
+          </a>
+        </span>
+      </div>
+    </footer>
+  </body>
+</html>

website/manifest.json

@@ -7,37 +7,37 @@
   "background_color": "black",
   "icons": [
     {
-      "src": "/android-icon-36x36.png",
+      "src": "/icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
     },
     {
-      "src": "/android-icon-48x48.png",
+      "src": "/icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
     },
     {
-      "src": "/android-icon-72x72.png",
+      "src": "/icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
     },
     {
-      "src": "/android-icon-96x96.png",
+      "src": "/icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
     },
     {
-      "src": "/android-icon-144x144.png",
+      "src": "/icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
     },
     {
-      "src": "/android-icon-192x192.png",
+      "src": "/icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"

website/scripts/Stickied.js

@@ -0,0 +1,20 @@
+window.onload = function () {
+  let originalTitlePosition = null;
+  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');
+    }
+  });
+};

website/styles/extrasmall.css

@@ -0,0 +1,6 @@
+body {
+  background-color: var(--primary);
+}
+* {
+  color: var(--secondary);
+}

website/styles/index.css

@@ -0,0 +1,8 @@
+@import './variables.css';
+@import './variables-dark.css' screen and (prefers-color-scheme: dark);
+
+@import './extrasmall.css';
+@import 'small.css' screen and (min-width: 576px);
+@import './medium.css' screen and (min-width: 768px);
+@import './large.css' screen and (min-width: 992px);
+@import './extralarge.css' screen and (min-width: 1200px);

website/styles/variables-dark.css

@@ -0,0 +1,8 @@
+:root {
+  --primary: #353e4a;
+  --primary-complement: #fbf8ef;
+  --secondary: #9acb34;
+  --secondary-complement: #7da329;
+  --tertiary: #04ddd9;
+  --tertiary-complement: #02a19f;
+}

website/styles/variables.css

@@ -0,0 +1,8 @@
+:root {
+  --primary: #fbf8ef;
+  --primary-complement: #353e4a;
+  --secondary: #7da329;
+  --secondary-complement: #9acb34;
+  --tertiary: #02a19f;
+  --tertiary-complement: #04ddd9;
+}