lbry.tv mobile drivers

view/template/nav/_header.php

@@ -17,6 +17,12 @@
           </drawer-title>
         </drawer-section>
 
+        <drawer-section class="header--mobile-only">
+          <drawer-title>
+            <a href="https://lbry.tv">Use on Web (lbry.tv)</a>
+          </drawer-title>
+        </drawer-section>
+
         <drawer-section>
           <drawer-title>
             Community ⌄
@@ -195,6 +201,7 @@
         />
       </search-container>
 
+      <a href="https://lbry.tv" class="button button--primary header__lbrytv header--mobile-only">lbry.tv</a>
       <a href="#" class="header__toggle" id="menuToggle">Menu</a>
 
       <?php js_start() ?>

web/scss/_layout.scss

@@ -186,11 +186,17 @@ input::placeholder {
 .hide {
   display: none;
 }
+
 .hide--mobile {
   @media (max-width: 800px) {
     display: none;
   }
 }
+.hide--desktop {
+  @media (min-width: 801px) {
+    display: none;
+  }
+}
 
 .align-text--center {
   text-align: center;

web/scss/components/_header.scss

@@ -75,8 +75,8 @@
 
 .header__toggle {
   line-height: 5rem;
-  padding-right: 2rem;
-  padding-left: 2rem;
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
   position: absolute;
   right: 0;
 
@@ -85,6 +85,18 @@
   }
 }
 
+.header--mobile-only {
+  @media (min-width: 951px) {
+    display: none;
+  }
+}
+
+.header__lbrytv {
+  position: absolute;
+  right: 6rem;
+  z-index: 11;
+}
+
 search-container {
   display: inline-flex;
   height: 5rem;