v1.5.0/release (website)

website/index.html

@@ -50,13 +50,14 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
       </h5>
       <p data-font="sans-bold" class="title subtitle">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>
-        <div class="supported-logo" id="disney"></div>
-        <div class="supported-logo" id="prime"></div>
-        <div class="supported-logo" id="youtube"></div>
-        <div class="supported-logo" id="hbonow"></div>
-        <div class="supported-logo" id="hbomax"></div>
+        <div data-full-support class="supported-logo" id="netflix"></div>
+        <div data-full-support class="supported-logo" id="hulu"></div>
+        <div data-full-support class="supported-logo" id="disney"></div>
+        <div data-full-support class="supported-logo" id="prime"></div>
+        <div data-full-support class="supported-logo" id="youtube"></div>
+        <div data-beta-support class="supported-logo" id="hbonow"></div>
+        <div data-beta-support class="supported-logo" id="hbomax"></div>
+        <div data-upcoming-support="Coming in v1.5.0" class="supported-logo" id="peacock"></div>
       </div>
       <a data-font="sans-bold" href="https://request.chromewatchparty.com" class="link-button"
         >Get Chrome Extension</a

website/styles/extrasmall.css

@@ -218,14 +218,46 @@ footer .link-button {
 }
 
 .welcome .landing#tips .tip h6 {
-  color: var(--primary-light);
+  color: var(--primary-text);
   font-size: 3rem;
   letter-spacing: 0.5rem;
 }
 
 .welcome .landing#tips .tip p {
-  color: var(--primary-medium);
+  color: var(--primary-text);
   font-size: 3rem;
   margin: 1.5rem 0;
   letter-spacing: 0.25rem;
 }
+
+.landing .supported .supported-logo {
+  position: relative;
+  border-bottom: 2px solid var(--cta);
+}
+.landing .supported .supported-logo[data-full-support]::before,
+.landing .supported .supported-logo[data-beta-support]::before,
+.landing .supported .supported-logo[data-upcoming-support]::before {
+  content: 'FULLY SUPPORTED';
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: 2rem;
+  left: 0;
+  opacity: 1;
+  transition: all ease-out 0.3s;
+  font-size: 0.8rem;
+  text-align: center;
+  color: var(--primary);
+  font-family: 'GlacialBold';
+  background-color: var(--cta);
+  padding: 1rem 0;
+}
+
+.landing .supported .supported-logo[data-beta-support]::before {
+  content: 'BETA SUPPORT';
+}
+
+.landing .supported .supported-logo[data-upcoming-support]::before {
+  content: attr(data-upcoming-support);
+  text-transform: uppercase;
+}

website/styles/medium.css

@@ -74,6 +74,28 @@ body {
 .landing .link-button.stickied::before {
   border-radius: 0;
 }
+.landing .supported .supported-logo {
+  position: relative;
+  border-bottom: 2px solid var(--cta);
+}
+.landing .supported .supported-logo[data-full-support]::before,
+.landing .supported .supported-logo[data-beta-support]::before,
+.landing .supported .supported-logo[data-upcoming-support]::before {
+  bottom: 0;
+  height: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 2rem;
+}
+.landing .supported .supported-logo[data-full-support]:hover::before,
+.landing .supported .supported-logo[data-beta-support]:hover::before,
+.landing .supported .supported-logo[data-upcoming-support]:hover::before {
+  opacity: 1;
+  bottom: 0;
+  height: 2rem;
+  letter-spacing: 1.05px;
+  z-index: -1;
+}
 .feature-card {
   background-color: var(--primary-medium);
   z-index: 1;
@@ -185,6 +207,7 @@ footer .link-button {
 
 .welcome .landing#tips .tip {
   padding-right: 0;
+  transition: all ease-out 0.3s;
 }
 
 .welcome .landing#tips .link-button {
@@ -212,6 +235,11 @@ footer .link-button {
   padding: 1rem 0;
 }
 
+.welcome .landing .supported-logo[data-support]::before {
+  content: attr(data-support);
+  text-transform: uppercase;
+}
+
 .welcome .landing .supported-logo:hover::before {
   opacity: 1;
   bottom: 0;
@@ -223,3 +251,31 @@ footer .link-button {
 .welcome .landing {
   flex: 1;
 }
+
+.welcome .landing#tips .tip h6 {
+  color: var(--primary-light);
+  transition: all ease-out 0.3s;
+}
+
+.welcome .landing#tips .tip p {
+  color: var(--primary-medium);
+  transition: all ease-out 0.3s;
+}
+
+.welcome .landing#tips .tip:hover h6,
+.welcome .landing#tips .tip:hover p {
+  color: var(--primary-text);
+}
+
+.welcome .landing#tips .tip:hover {
+  background-color: var(--primary-medium);
+  margin-left: -2.5rem;
+  border-top-left-radius: 2rem;
+  border-bottom-left-radius: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding-left: 2.5rem;
+}
+.welcome .landing#tips .tip:last-of-type {
+  margin-bottom: 3rem;
+}

website/styles/variables-dark.css

@@ -27,3 +27,6 @@ Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
 .supported-logo#hbomax {
   background-image: url('../media/logos/HBOMaxWhite.png');
 }
+.supported-logo#peacock {
+  background-image: url('../media/logos/Peacock.png');
+}

website/styles/variables.css

@@ -34,6 +34,9 @@ Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020
 .supported-logo#hbomax {
   background-image: url('../media/logos/HBOMax.png');
 }
+.supported-logo#peacock {
+  background-image: url('../media/logos/PeacockColor.png');
+}
 
 .feature-icon#phone {
   background-image: url('../media/features/Phone.gif');

website/welcome/index.html

@@ -61,6 +61,8 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
         <a href="https://www.youtube.com"><div class="supported-logo" id="youtube"></div></a>
         <a href="https://play.hbonow.com"><div class="supported-logo" id="hbonow"></div></a>
         <a href="https://play.hbomax.com"><div class="supported-logo" id="hbomax"></div></a>
+        <a href="https://www.peacocktv.com"><div data-support="Coming in v1.5.0" class="supported-logo" id="peacock"></div></div></a>
+        
       </div>
     </div>
     <div id="tips" class="landing">