From 90ec63a9f84ad85aa9b332acf9399231ab5a7fbe Mon Sep 17 00:00:00 2001
From: Ayushya Amitabh <ayushyamitabh@gmail.com>
Date: Thu, 6 Aug 2020 11:56:05 -0400
Subject: [PATCH] v1.6.0/website styling fixes -add qa -add getting started
 title

---
 website/styles/extrasmall.css | 17 +++++++++++------
 website/styles/large.css      |  2 +-
 website/welcome/index.html    | 26 ++++++++++++++++++++++----
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/website/styles/extrasmall.css b/website/styles/extrasmall.css
index d51df0c..3e29987 100644
--- a/website/styles/extrasmall.css
+++ b/website/styles/extrasmall.css
@@ -274,6 +274,10 @@ footer .link-button {
   padding-left: 70px;
 }
 
+.pop-features .title {
+  margin-bottom: 70px;
+}
+
 .pop-feature {
   width: 100%;
   height: fit-content;
@@ -425,11 +429,11 @@ h6#title-card-tagline {
   }
   35% {
     right: 200px;
-    bottom: 250px;
+    bottom: 350px;
   }
   60% {
     right: 200px;
-    bottom: 250px;
+    bottom: 350px;
   }
   75% {
     right: -40px;
@@ -473,8 +477,9 @@ div#fab {
   position: absolute;
   right: 250px;
   bottom: 250px;
-  animation: circleMove 2s linear 3s infinite alternate-reverse !important;
+  animation: circleMove 2s linear 0s infinite alternate !important;
   z-index: 99;
+  filter: drop-shadow(0px 0px 20px var(--primary));
 }
 
 div#title-card {
@@ -483,14 +488,14 @@ div#title-card {
 
 div#sidebar {
   width: 300px;
-  height: 100%;
+  height: 120%;
   right: 0;
   position: absolute;
   background: var(--cta);
-  top: 0;
+  top: -10%;
   border-top-right-radius: 26px;
   border-bottom-right-radius: 26px;
-  animation: rectSize 2s linear 3s infinite alternate-reverse !important;
+  animation: rectSize 2s linear 0s infinite alternate !important;
 }
 
 /*
diff --git a/website/styles/large.css b/website/styles/large.css
index 1c675b4..9ef7628 100644
--- a/website/styles/large.css
+++ b/website/styles/large.css
@@ -24,7 +24,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 }
 
 .pop-feature:not(:first-of-type) {
-  margin: -30px 0;
+  margin: -10px 0;
 }
 
 .pop-feature > * {
diff --git a/website/welcome/index.html b/website/welcome/index.html
index d1ba307..551e3a4 100644
--- a/website/welcome/index.html
+++ b/website/welcome/index.html
@@ -59,8 +59,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
       </div>
     </div>
-    <div class="pop-features">
-      
+    <div id="getting-started" class="pop-features">
+      <p data-font="sans-bold" class="title">
+        GETTING STARTED
+      </p>
       <div class="pop-feature alternate">
         <div id="title-card-container">
           <div id="title-card">
@@ -71,7 +73,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
-            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. Watch Party lives in the bottom right corner of your screen. You can use the fullscreen button in the sidebar to go fullscreen with Watch Party.</p>  
+            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>  
           </div>
         </div>
       </div>
@@ -191,6 +193,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <p data-font="sans-bold" class="title">
        TIPS & FAQ
       </p>
+      <div class="tip">
+        <h6 data-font="sans">
+          DO I STILL NEED ACCOUNTS FOR THE STREAMING PLATFORMS
+        </h6>
+        <p data-font="sans-bold">
+          Yes, Watch Party is not a hack. The sole purpose of Watch Party is to help synchronize the playing/pausing on streamed content.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          HOW CAN I HELP KEEP WATCH PARTY ALIVE
+        </h6>
+        <p data-font="sans-bold">
+          Watch Party is built to be completely free, all the costs are paid by the developer alone. While no payment is needed, any small donation helps make sure I can keep the servers up and running. You can request more details by reaching out to admin@chromewatchparty.com.
+        </p>
+      </div>
       <div class="tip">
         <h6 data-font="sans">
           CAN I USE WATCH PARTY IN FULLSCREEN
@@ -236,7 +254,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           CAN I DISABLE WATCH PARTY TEMPORARILY
         </h6>
         <p data-font="sans-bold">
-          Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions).</a>
+          Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions).
         </p>
       </div>
       <a data-font="sans-bold" href="mailto:admin@chromewatchparty.com?subject=New FAQ Question" class="link-button">