From 05c23f2dabcfca6997826264e328889c96fc1035 Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Mon, 29 Jun 2020 01:02:08 -0400 Subject: [PATCH] v1.4.1-beta/website --- website/index.html | 9 ++-- website/scripts/Stickied.js | 13 ++++-- website/styles/extrasmall.css | 20 ++++----- website/styles/large.css | 73 +----------------------------- website/styles/medium.css | 83 ++++++++++++++++++++++++++++++++++- website/styles/variables.css | 2 +- 6 files changed, 106 insertions(+), 94 deletions(-) diff --git a/website/index.html b/website/index.html index c06afae..af8d6f0 100644 --- a/website/index.html +++ b/website/index.html @@ -31,7 +31,7 @@
WATCH YOUR FAVORITES,
WITH YOUR FAVORITE PEOPLE
-

WORKS WITH

+

FREE. NO SIGNUP. NO BS.
WORKS WITH

@@ -41,8 +41,7 @@
-

FREE. NO SIGNUP. NO BS.

- Get Chrome Extension + Get Chrome Extension
@@ -82,8 +81,8 @@ BUILT WITH ❤ FOR GOOGLE CHROME USING FIREBASE, MATERIAL-UI, REACT JS, NODE JS, & GIPHY.

- Support Watch Party - Get Chrome Extension + Support Watch Party + Get Chrome Extension diff --git a/website/scripts/Stickied.js b/website/scripts/Stickied.js index 48dd62f..59e2b92 100644 --- a/website/scripts/Stickied.js +++ b/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'); - if (window.scrollY >= LOGO_INIT) { + const get = document.querySelector('.landing .link-button'); + 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); }; diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css index c534528..af68929 100644 --- a/website/styles/extrasmall.css +++ b/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 { diff --git a/website/styles/large.css b/website/styles/large.css index ee62e96..81b348a 100644 --- a/website/styles/large.css +++ b/website/styles/large.css @@ -1,73 +1,4 @@ -.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; -} - +.features, .supported { - max-width: 65%; -} - -.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; + max-width: none; } diff --git a/website/styles/medium.css b/website/styles/medium.css index dc04b3b..ad537e4 100644 --- a/website/styles/medium.css +++ b/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; } diff --git a/website/styles/variables.css b/website/styles/variables.css index b7c5ee8..1bb2976 100644 --- a/website/styles/variables.css +++ b/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;