design work

view/template/acquisition/youtube.php

@@ -34,7 +34,6 @@ Response::setMetaDescription("Put your content on the blockchain, experience tru
   </div>
   <div class="title">
     <div class="overflow"><h1>Content Freedom.</h1></div>
-    <br/>
     <p>Put your content on the blockchain and earn rewards.</p>
     <div class="button">Claim Your LBRY Channel</div>
   </div>

view/template/acquisition/youtube_status.php

@@ -11,34 +11,40 @@
     <section class="section channel pad-top">
         <div class="inner">
             <div class="content">
+                <?php if (true): ?>
+                    <div id="email-google-plus-error" class="error">Your email address is set as xxx@plusgoogle.com.<br>If this is not your email address, please <span>change it below</span>.</div>
+                <?php endif ?>
                 <div class="zigzag"></div>
                 <h1><?php echo $isSyncAgreed && $isRewardClaimed ? "You're all set!" : "Almost done!" ?></h1>
-              <h3>The Steps</h3>
+                <div class="confirmation-steps">
                     <ul>
                         <li>
-                    <h4>✓ Confirm your channel</h4>
+                            <span>✓</span>
+                            <p>Confirm your channel</p>
                         </li>
-                  <li>
+                        <li class="disabled">
-                    <h4><?php echo $isSyncAgreed ? "✓" : "☐" ?> Agree to sync</h4>
+                            <span><?php echo $isSyncAgreed ? "✓" : "☐" ?></span>
+                            <p>Agree to sync</p>
                         </li>
-                  <li>
+                        <li class="disabled">
-                    <h4><?php echo $isRewardClaimed ? "✓" : "☐" ?>  Claim your credits</h4>
+                            <span><?php echo $isRewardClaimed ? "✓" : "☐" ?></span>
-                    To get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow these instructions</a>.
+                            <p>Claim your credits</p>
+                            <p>To get your credits, <a href="/get">download the app</a> and <a href="/faq/youtube">follow these instructions.</a></p>
                         </li>
                     </ul>
+                </div>
                 
-              <?php if (true): ?>
+                <div class="blocks">
-                  <div id="email-google-plus-error" class="error">Your email address is set as xxx@plusgoogle.com. If this is not your email address, please change it below.</div>
-              <?php endif ?>
-                <div>
                     <div class="block">
                         <p>Your Sync Status<br>
-                      <span><?php switch ($statusData['status']) {
+                            <span>
+                            <?php switch ($statusData['status']) {
                                 case "pending": echo __("Agree to Terms Below"); break;
                                 case "queued": echo __("Queued"); break;
                                 case "syncing": echo __("Sync in Progress!"); break;
                                 case "synced": echo __("Content is Live!"); break;
-                        } ?></span>
+                            } ?>
+                            </span>
                         </p>
                     </div>
                     <div class="block">
@@ -58,6 +64,7 @@
                     </div>
                 </div>
             </div>
+        </div>
     </section>
     <section class="section settings">
         <div class="inner">

web/css/yt2.css

@@ -42,6 +42,7 @@ html {
   padding: 0;
   margin: 0;
   font: normal 400 16px/1.5 'metropolis-bold';
+  color: #2F3C5C;
 }
 img {
   display: block;
@@ -222,7 +223,7 @@ header .right a.github {
   height: 80px;
 }
 .hero .title .overflow + .overflow {
-  margin: -10px 0 20px 0;
+  margin: -10px 0 0 0;
 }
 .hero .title .overflow h1 {
   position: absolute;
@@ -233,6 +234,7 @@ header .right a.github {
   float: left;
   width: 100%;
   font: normal 400 21px/1.2 'metropolis-semibold';
+  margin-top: 20px;
   color: #FFF;
 }
 .hero .title .button {
@@ -806,6 +808,67 @@ header .right a.github {
   background: url(../img/youtube/lbc@2x.png) 50% 50% no-repeat;
   background-size: 13px;
 }
+.channel .error {
+  float: left;
+  width: 100%;
+  font: normal 400 18px/1.5 'metropolis-semibold';
+  color: #AAA;
+  margin: 0 0 40px 0;
+}
+.channel .error span {
+  color: #45B0AF;
+  border-bottom: 1px solid #45B0AF;
+  cursor: pointer;
+}
+.channel .confirmation-steps {
+  float: left;
+  width: 100%;
+}
+.channel .confirmation-steps ul {
+  float: left;
+  width: 100%;
+  list-style: none;
+  padding: 0;
+}
+.channel .confirmation-steps ul li {
+  position: relative;
+  float: left;
+  width: 33%;
+}
+.channel .confirmation-steps ul li span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 48px;
+  height: 48px;
+  background: #40C0A9;
+  border-radius: 50%;
+  font: normal 400 18px/48px sans-serif;
+  text-align: center;
+  color: #FFF;
+}
+.channel .confirmation-steps ul li.disabled span {
+  background: #CCC;
+  color: #FFF;
+}
+.channel .confirmation-steps ul li p {
+  float: left;
+  width: 100%;
+  padding: 0 0 0 60px;
+  line-height: 48px;
+  box-sizing: border-box;
+}
+.channel .confirmation-steps ul li.disabled p {
+  color: #CCC;
+}
+.channel .confirmation-steps ul li p + p {
+  font: normal 400 13px/20px 'metropolis-semibold';
+  color: #2F3C5C;
+  margin-top: 0;
+}
+.channel .confirmation-steps ul li a {
+  color: #45B0AF;
+}
 .settings form {
   float: left;
   width: 100%;
@@ -854,6 +917,9 @@ header .right a.github {
   box-shadow: 0 20px 50px 0 rgba(0,0,0,0.15);
   transition: box-shadow 0.3s;
 }
+.settings a {
+  color: #45B0AF;
+}
 .settings button:hover {
   -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
   -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.15);
@@ -867,6 +933,12 @@ header .right a.github {
   color: #125548;
 }
 
+
+
+
+
+
+
 /* ---------------------------
  --> RESPONSIVE
 --------------------------- */
@@ -1182,6 +1254,12 @@ header .right a.github {
     border-radius: 20px;
   }
 }
+@media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : landscape) {
+  .channel .confirmation-steps ul li {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
 @media only screen and (min-device-width : 300px) and (max-device-width : 767px) and (orientation : portrait) {
   header {
     padding: 0 10%;
@@ -1349,4 +1427,15 @@ header .right a.github {
     padding: 0;
     text-align: center;
   }
+  .channel .confirmation-steps ul li {
+    width: 100%;
+    margin-top: 20px;
+  }
+  .channel .block:not(:first-child) {
+    width: 100%;
+  }
+  .channel .error {
+    font-size: 14px;
+    text-align: center;
+  }
 }