From 0a983bf60b8c8ab6de4e21c1f8ddd1ffbc612391 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <jeremy@lbry.io>
Date: Tue, 15 Dec 2020 14:27:46 -0500
Subject: [PATCH] halfway

---
 view/template/download/_downloadRow.php | 20 ++++++++--
 view/template/nav/_header.php           |  2 +-
 view/template/page/home.php             | 24 +++++-------
 web/components/sass/badge/_index.scss   | 13 -------
 web/components/sass/button/_index.scss  |  9 +----
 web/scss/_layout.scss                   |  6 +--
 web/scss/pages/_home.scss               | 49 ++++++++++++++++++-------
 7 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/view/template/download/_downloadRow.php b/view/template/download/_downloadRow.php
index 7ff5e60a..6ed8a541 100644
--- a/view/template/download/_downloadRow.php
+++ b/view/template/download/_downloadRow.php
@@ -1,5 +1,17 @@
-<div style="min-height: 40px; line-height: 40px;">
-  <?php echo View::render('download/_downloadButton', ['buttonStyle' => 'primary'])?>
-  <a href="https://lbry.tv" class="button button--inverse">Open in Browser</a>
-  <a href="/get?showall=1" class="button--link hide--mobile">show all platforms</a>
+<div style=" display: flex; margin-top: 2rem;">
+  <div style="flex: 1; text-align: center;">
+    <div style="line-height: 32px;">
+        <?php echo View::render('download/_downloadButton', ['buttonStyle' => 'primary'])?>
+    </div>
+    <small style="margin-top: 2px; display: inline-block"><a href="/get?showall=1" class="button--link hide--mobile">other platforms</a></small>
+  </div>
+
+          <div  style="flex: 1; text-align: center">
+              <a href="https://odysee.com">
+                  <img style="height: 40px;" src="https://odysee.com/public/img/odysee.png" />
+              </a>
+              <br/>
+              <small class="meta" style=" display: inline-block; max-width: 160px">use LBRY in your browser, with odysee.com</small>
+
+          </div>
 </div>
\ No newline at end of file
diff --git a/view/template/nav/_header.php b/view/template/nav/_header.php
index 26b90fdd..b045dba4 100644
--- a/view/template/nav/_header.php
+++ b/view/template/nav/_header.php
@@ -251,7 +251,7 @@
       <?php js_end() ?>
 
       <span class="header__download">
-        <a href="https://open.lbry.com" class="button button--primary">Open LBRY</a>
+        <a href="https://open.lbry.com" class="button button--primary">Try Odysee</a>
       </span>
     </div>
   </header>
diff --git a/view/template/page/home.php b/view/template/page/home.php
index 8039b51c..0f8bd891 100644
--- a/view/template/page/home.php
+++ b/view/template/page/home.php
@@ -6,10 +6,11 @@
     <div class="inner-wrap">
       <aside class="home__cta">
         <div class="home__cta-copy">
-          <h1>It's time to take back control from YouTube and Amazon.</h1>
-          <p><small class="meta">Top creators, self-respecting users, the privacy conscious, computer geeks, freedom lovers, loveable kooks, and readers of small gray text everywhere choose LBRY, because it's open, fair, and free.</small></p>
+          <h1>LBRY does to publishing,<br/>
+              what Bitcoin did to money.</h1>
+          <p><span class="meta">Join top creators and more than 10,000,000 people on LBRY, an open, free, and fair network for digital content.</span></p>
+          <?php echo View::render('download/_downloadRow') ?>
         </div>
-        <?php echo View::render('download/_downloadRow') ?>
       </aside>
 
       <figure class="home__preview">
@@ -29,21 +30,16 @@
   </section>
 
   <section class="home__callout">
-    <p>LBRY is a secure, open, and community-run digital marketplace.</p>
-    <p>Enjoy the latest content from your favorite creators - as a user, not a product.</p>
-  </section>
-
-  <section class="home__hype">
-    <div class="inner-wrap">
-      <p>See previews of the LBRY app and the great content available now on LBRY.</p>
-      <br>
-      <iframe width="560" height="315" src="https://lbry.tv/$/embed/meetlbrytv/c6c0a5caa6cc391696e1270e33cd9d24ee7c2d52" allowfullscreen></iframe>
-    </div>
+    <h2>Enjoy the latest content from your favorite creators - as a user, not a product.</h2>
+      <p>This video shows footage from <a href="https://odysee.com">odysee.com</a>, the most popular LBRY app. This same content can be accessed by <a href="/get">LBRY Desktop</a> and other clients as part of the web 3.0 LBRY network.</p>
+      <div class="inner-wrap" style="margin-top: 1rem">
+      <iframe id="lbry-iframe" width="560" height="315" src="https://odysee.com/$/embed/odysee/7a416c44a6888d94fe045241bbac055c726332aa?r=9wKhJPioiNxTBjT6Zoqaf7LNDJcauUjg" allowfullscreen></iframe>
+      </div>
   </section>
 
     <section class="home__cta">
         <div class="inner-wrap">
-            <aside class="home__cta"><h2>Now Available for Desktop, Mobile, and Web Browsers.</h2></aside>
+            <aside class="home__cta"><h2>Use Desktop and Mobile apps for control. Use web for ease.</h2></aside>
           <?php echo View::render('download/_downloadRow') ?>
         </div>
     </section>
diff --git a/web/components/sass/badge/_index.scss b/web/components/sass/badge/_index.scss
index 3fe719b2..1bf49f5c 100644
--- a/web/components/sass/badge/_index.scss
+++ b/web/components/sass/badge/_index.scss
@@ -22,11 +22,6 @@
 
 .badge--free {
   background-color: var(--lbry-blue-2);
-
-  [data-mode="dark"] & {
-    background-color: var(--lbry-blue-3);
-    color: var(--lbry-black);
-  }
 }
 
 .badge--large {
@@ -34,14 +29,6 @@
   line-height: 1;
 }
 
-.badge--nsfw {
-  background-color: var(--lbry-grape-2);
-
-  [data-mode="dark"] & {
-    background-color: var(--lbry-grape-3);
-    color: var(--lbry-black);
-  }
-}
 
 .badge--primary {
   background-color: var(--lbry-teal-5);
diff --git a/web/components/sass/button/_index.scss b/web/components/sass/button/_index.scss
index 7ea12b07..afcf60d3 100644
--- a/web/components/sass/button/_index.scss
+++ b/web/components/sass/button/_index.scss
@@ -2,6 +2,7 @@
   fill: currentColor;
   position: relative;
   white-space: nowrap;
+  display: inline-block;
 }
 
 .button--alt {
@@ -62,16 +63,8 @@
   color: inherit;
   transition: background-color 0.2s;
 
-  [data-mode="dark"] & {
-    border-color: rgba($lbry-white, 0.1);
-  }
-
   &:hover {
     background-color: var(--lbry-gray-1);
-
-    [data-mode="dark"] & {
-      background-color: rgba($lbry-white, 0.1);
-    }
   }
 }
 
diff --git a/web/scss/_layout.scss b/web/scss/_layout.scss
index 0f893e1e..6f409a97 100644
--- a/web/scss/_layout.scss
+++ b/web/scss/_layout.scss
@@ -127,10 +127,10 @@ section {
 
 small {
   font-size: 0.8rem;
+}
 
-  &.meta {
-    color: var(--lbry-gray-5);
-  }
+.meta {
+  color: var(--lbry-gray-5);
 }
 
 strong {
diff --git a/web/scss/pages/_home.scss b/web/scss/pages/_home.scss
index 642f020c..62c36570 100644
--- a/web/scss/pages/_home.scss
+++ b/web/scss/pages/_home.scss
@@ -11,38 +11,62 @@
   background-image: linear-gradient(to right, $lbry-teal-2, $lbry-cyan-3 100%);
   background-size: cover;
   color: var(--lbry-white);
-  font-weight: 300;
   padding: 2rem;
   text-align: center;
 
-  p {
-    line-height: 1.55;
+  font-size: 1.2rem;
+
+  h2 {
+    margin-bottom: 1rem;
   }
 
-  @media (min-width: 1251px) {
-    font-size: 2rem;
+  h2, p {
+    max-width: 1000px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  @media (min-width: 1001px) and (max-width: 1250px) {
-    font-size: 1.5rem;
+  iframe {
+    max-width: 560px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  @media (max-width: 1000px) {
-    font-size: 1.25rem;
+  a {
+    text-decoration: underline;
+  }
+}
+
+.button--odysee {
+  padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
+  background-color: rgb(229, 0, 84);
+  color: white;
+  border: 1px solid var(--lbry-gray-1);
+  border-radius: 1rem;
+  color: inherit;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--lbry-gray-1);
   }
 }
 
 .home__cta {
-  margin-bottom: 1rem;
   text-align: center;
   align-self: center;
 
+
+
   h1 {
     font-size: 2.5rem;
     font-weight: 200;
     margin-bottom: 1rem;
   }
 
+  p {
+    margin-bottom: 1rem;
+  }
+
   div {
     font-size: 1rem;
 
@@ -53,10 +77,7 @@
 }
 
 .home__cta-copy {
-  max-width: 700px;
-  p {
-    margin-bottom: 1rem;
-  }
+  max-width: 500px;
 }
 
 .home__hero {