Hook design in progress

.vuepress/components/Hook.vue

@@ -1,36 +1,37 @@
 <template>
-  <div id="hook">
+  <div class="hook" id="hook">
-    <div id="hook-navigation">
+    <nav class="hook__navigation" id="hook-navigation">
-      <div class="step">
+      <div class="inner-wrap">
-        <a href="#" v-on:click="activeStep = 1" v-bind:class="{active: (activeStep==1)}">
+        <a href="#" v-on:click.prevent="activeStep = 1" class="hook__navigation__step" v-bind:class="{active: (activeStep==1)}">
           <span class="number">1</span>
           Resolve a claim
         </a>
-      </div>
+
-      <div class="step">
+        <a href="#" v-on:click.prevent="activeStep = 2" class="hook__navigation__step" v-bind:class="{active: (activeStep==2)}">
-        <a href="#" v-on:click="activeStep = 2" v-bind:class="{active: (activeStep==2)}">
           <span class="number">2</span>
           Publish content
         </a>
-      </div>
+
-      <div class="step">
+        <a href="#" v-on:click.prevent="activeStep = 3" class="hook__navigation__step" v-bind:class="{active: (activeStep==3)}">
-        <a href="#" v-on:click="activeStep = 3" v-bind:class="{active: (activeStep==3)}">
           <span class="number">3</span>
           Support with LBC
         </a>
       </div>
-    </div>
+    </nav>
+
     <Step1 v-if="activeStep == 1"></Step1>
     <Step2 v-if="activeStep == 2"></Step2>
     <Step3 v-if="activeStep == 3"></Step3>
+
     <div class="modal" v-model="uploadDialog" v-if="uploadDialog != false">
       <template v-if="confirmed">
         <h3>Your image has been published!</h3>
         <p><a v-bind:href="'https://explorer.lbry.io/tx/' + txhash" target="_blank">Check out your content on the LBRY blockchain explorer</a></p>
         <a href="#" class="__button-black" v-on:click="uploadDialog = false">Dismiss this dialog</a>
       </template>
+
       <template v-else>
-        <h3><div class="loader small"></div>&nbsp;Waiting for confirmations...</h3>
+        <h3><div class="loader small"></div>&nbsp;Waiting for confirmation...</h3>
         <p>Your image was uploaded to the LBRY network but we are currently waiting for the first confirmation. This should take just a few minutes. In the meantime, go ahead and try the other steps!</p>
       </template>
     </div>
@@ -81,109 +82,10 @@ export default {
 </script>
 
 <style lang="scss">
-
+  @import "../../node_modules/highlight.js/styles/monokai-sublime";
-@import '../scss/variables';
+  @import "../scss/init/colors";
-
+  @import "../scss/init/extends";
-@import '../../node_modules/highlight.js/styles/monokai-sublime';
+  @import "../scss/init/mixins";
-
+  @import "../scss/pages/page";
-.dialog__content {
+  @import "../scss/pages/hook";
-  align-items: flex-end !important;
-  justify-content: right !important;
-}
-
-#hook {
-  background: url(https://lbry.io/img/youtube/hero@2x.jpg) no-repeat center center;
-  background-size: cover;
-  text-align: center;
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  p {
-    color: white;
-    text-shadow: 0px 0px 1rem rgba(0,0,0,0.5);
-    a {
-      color: white;
-    }
-  }
-  input[type='text'] {
-    background: white;
-    padding: 0.5rem 0.5rem;
-  }
-  pre {
-    text-align: left;
-  }
-  .flex {
-    margin-bottom: 2rem;
-  }
-  .loader {
-    border: 16px solid #f3f3f3; /* Light grey */
-    border-top: 16px solid #3498db; /* Blue */
-    border-radius: 50%;
-    width: 120px;
-    height: 120px;
-    animation: spin 2s linear infinite;
-    &.small {
-      border: 4px solid #f3f3f3; /* Light grey */
-      border-top: 4px solid #3498db; /* Blue */
-      width: 30px;
-      height: 30px;
-    }
-  }
-  .card {
-    width: 20%;
-    display: inline-block;
-    vertical-align: top;
-    background: white;
-    box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
-    margin: 0 2.5%;
-    &:hover {
-      cursor: pointer;
-    }
-    img {
-      width: 100%;
-      height: 6rem;
-      object-fit: cover;
-    }
-    h4, .account {
-      text-align: left;
-      color: black;
-      padding: 0.5rem 0.5rem;
-      text-shadow: none;
-    }
-  }
-  .modal {
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    width: 25rem;
-    background: white;
-    text-align: left;
-    padding: 1rem;
-    h3, p, p > a {
-      color: black;
-      text-shadow: none;
-    }
-  }
-}
-
-#hook-navigation {
-  .step {
-    width: 30%;
-    float: left;
-    margin: 0 1.5%;
-    background: black;
-    padding: 0.5rem 0;
-    a {
-      color: white;
-    }
-  }
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 </style>

.vuepress/components/Step1.vue

@@ -1,60 +1,77 @@
 <template>
-  <div id="step1-page">
+  <section class="hook__page" id="step1-page">
-    <div class="xs12">
+
+    <header class="hook__page__hero">
+      <div class="inner-wrap">
         <h1>Learn the LBRY protocol by examples</h1>
         <p>Let's start by getting the associated metadata for <a href="#">a claim</a>.</p>
+
+        <div class="hook__page__hero__claim">
+          <span>lbry://</span><input type="text" v-model="address" placeholder=" Claim URI goes here"/>
+          <a href="#" v-on:click="fetchMetadata" class="button">Execute</a>
         </div>
-    <div class="xs12 sm10">
-      lbry://<input type="text" v-model="address" />
-    </div>
-    <div class="xs12 sm2">
-      <a href="#" class="__button-black" v-on:click="fetchMetadata">Execute</a>
       </div>
+    </header>
+
     <div class="xs12" v-if="exampleCode != ''">
       <pre v-highlightjs="exampleCode"><code class="bash"></code></pre>
     </div>
+
     <div class="xs12" v-if="isLoading">
       <div class="loader"></div>
     </div>
+
     <div class="xs12" v-if="jsonData">
       <p>Success! Here is the response for <strong>lbry://{{ address }}</strong>:</p>
       <pre v-highlightjs="jsonData" class="json-example"><code class="json"></code></pre>
       <a href="#" class="__button-black" v-on:click="goTo(2)">Go to next step</a>
     </div>
+
     <template v-if="!isLoading && !jsonData">
-      <div class="xs12">
+      <aside class="hook__page__content">
-        <p>... or select a live example from below</p>
+        <div class="inner-wrap">
-      </div>
+          <p style="text-align: center;">&hellip;or select a live example from below</p>
-      <div class="card">
+
+          <div class="hook__page__content__card">
             <img src="https://spee.ch/0654f2e2322ccfefa02a956d252df9ac7611d8b0/placeholder-itsadisaster.jpeg" v-on:click="chooseClaim('itsadisaster')">
+
             <div v-on:click="chooseClaim('itsadisaster')">
               <h4>It's a Disaster</h4>
-          <div class="account">Anonymous</div>
+              <p class="account">Anonymous</p>
             </div>
           </div>
-      <div class="card">
+
+          <div class="hook__page__content__card">
             <img src="https://spee.ch/b1bd330e048fc22dc7bf941c33dd8245eef492c1/unbubbled.png" v-on:click="chooseClaim('unbubbled1-1')">
+
             <div v-on:click="chooseClaim('unbubbled1-1')">
-          <h4>Unbubbled with Jamie King, Ep1.1 - Bitcoin, Boom or Bust</h4>
+              <h4>Unbubbled with Jamie King, Ep1.1 &mdash; Bitcoin, Boom or Bust</h4>
-          <div class="account">@Unbubbled</div>
+              <p class="account">@Unbubbled</p>
             </div>
           </div>
-      <div class="card">
+
+          <div class="hook__page__content__card">
             <img src="https://spee.ch/9880947df41af880bc19724ceddd1cce957a07e2/placeholder-fortninte.jpeg" v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
+
             <div v-on:click="chooseClaim('fortnite-top-stream-moments-nickatnyte')">
-          <h4>FORTNITE TOP STREAM MOMENTS - Nickatnyte & GamingwithMolt</h4>
+              <h4>FORTNITE TOP STREAM MOMENTS &mdash; Nickatnyte &amp; GamingwithMolt</h4>
-          <div class="account">@nickatnyte</div>
+              <p class="account">@nickatnyte</p>
             </div>
           </div>
-      <div class="card">
+
+          <div class="hook__page__content__card">
             <img src="https://spee.ch/a3b8258478ad88954f42f6ac3427eab380720f60/placeholder-lbrymine.png" v-on:click="chooseClaim('six')">
+
             <div v-on:click="chooseClaim('six')">
               <h4>LBRY Coin (LBC) GPU Miner for AMD and NVIDIA</h4>
-          <div class="account">Anonymous</div>
+              <p class="account">Anonymous</p>
             </div>
           </div>
+        </div>
+      </aside>
     </template>
-  </div>
+
+  </section>
 </template>
 
 <script>
@@ -63,7 +80,7 @@ import EventBus from '../event-bus';
 export default {
   data () {
     return {
-      address: 'Claim URI goes here',
+      address: '',
       jsonData: '',
       isLoading: false,
       exampleCode: ''
@@ -94,29 +111,5 @@ export default {
 </script>
 
 <style lang="scss">
-
   @import '../scss/variables';
-
-#step1-page {
-  .card {
-    .card__title {
-      height: 9rem;
-      h4 {
-        text-align: left;
-        font-size: 1rem;
-      }
-      .account {
-        color: $primary-color;
-        text-align: left;
-      }
-    }
-  }
-  .btn {
-    background-color: $primary-color;
-    border-color: $primary-color;
-    color: white;
-  }
-}
-
-
 </style>

.vuepress/scss/init/_base.scss

@@ -98,6 +98,7 @@ iframe {
 img {
   font-size: 0;
   max-width: 100%;
+
   &::after {
     width: 100%; height: 100%;
     top: -100%; left: 0;

.vuepress/scss/init/_colors.scss

@@ -5,7 +5,7 @@ $gray:    #a3b7ad;
 $yellow:  #dbdb3e;
 $lime:    #8ddb3e;
 $green:   #3edb3e;
-$teal:    #3edb8d;
+$teal:    mix($black, #3edb8d, 15%); // #3edb8d
 $cyan:    #3edbdb;
 $blue:    #3e8cdb;
 $indigo:  #3e3edb;

.vuepress/scss/pages/_hook.scss

@@ -0,0 +1,156 @@
+.hook {
+  .loader {
+    width: 4rem; height: 4rem;
+
+    animation: spin 2s linear infinite;
+    border: 6px solid;
+    border-radius: 50%;
+    border-top-color: $teal;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  to { transform: rotate(1turn); }
+}
+
+.hook__navigation {
+  background-color: $black;
+  color: $white;
+  font-size: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-align: center;
+}
+
+.hook__navigation__step {
+  display: inline-block;
+  text-align: center;
+
+  &:not(.active) {
+    span {
+      border-color: rgba($white, 0.1);
+    }
+  }
+
+  &.active {
+    color: $teal;
+
+    span {
+      border-color: rgba($teal, 0.3);
+    }
+  }
+
+  &:not(:last-of-type) {
+    margin-right: 1rem;
+  }
+
+  span {
+    width: 3rem; height: 3rem;
+
+    border: 1px solid;
+    border-radius: 50%;
+    display: block;
+    font-size: 1.25rem;
+    line-height: 3rem;
+    margin: 0 auto 0.5rem;
+  }
+}
+
+
+
+.hook__page {
+  @extend .page__content;
+}
+
+.hook__page__hero {
+  margin-bottom: 2rem; padding-bottom: 3rem;
+  border-bottom: 1px solid rgba($black, 0.05);
+
+  h1, p {
+    text-align: center;
+  }
+}
+
+.hook__page__hero__claim {
+  background-color: $white;
+  border: 1px solid rgba($gray, 0.7);
+  font-size: 1rem;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 1rem;
+  width: 80%;
+
+  &::after {
+    @include clearfix;
+  }
+
+  input, a {
+    line-height: 3rem;
+  }
+
+  span {
+    color: rgba($black, 0.3);
+  }
+
+  input {
+    width: calc(100% - 10rem);
+  }
+
+  a {
+    border-left: 1px solid rgba($gray, 0.7);
+    color: $white;
+    float: right;
+    position: relative;
+    text-align: center;
+    transition: all 0.2s;
+    width: 6rem;
+
+    &::after {
+      width: calc(100% + 2px); height: calc(100% + 2px);
+      top: -1px; left: -1px;
+
+      border: 1px solid;
+      content: "";
+      position: absolute;
+      transition: inherit;
+    }
+
+    &:not(:hover) {
+      background-color: $black;
+
+      &::after {
+        border-color: $black;
+      }
+    }
+
+    &:hover {
+      background-color: $teal;
+
+      &::after {
+        border-color: $teal;
+      }
+    }
+  }
+}
+
+
+
+.hook__page__content {
+  &::after {
+    @include clearfix;
+  }
+}
+
+.hook__page__content__card {
+  margin-bottom: 1rem; padding: 1rem;
+
+  img {
+    margin-bottom: 0.5rem;
+  }
+
+  float: left;
+  width: 50%;
+}

.vuepress/scss/pages/_page.scss

@@ -113,8 +113,8 @@
     }
   }
 
-  a {
+  a:not(.button) {
-    color: mix($black, $teal, 15%);
+    color: $teal;
     position: relative;
 
     &::after {

.vuepress/scss/partials/_footer.scss

@@ -58,7 +58,7 @@
     }
 
     &:hover {
-      color: mix($black, $teal, 15%);
+      color: $teal;
     }
   }
 }

.vuepress/scss/partials/_navigation.scss

@@ -73,7 +73,7 @@
     &::after {
       width: 100%; height: 3px;
 
-      background-color: mix($black, $teal, 15%);
+      background-color: $teal;
       content: "";
       left: 0;
       position: absolute;

.vuepress/theme/Layout.vue

@@ -27,7 +27,7 @@
             <li class="home__feature">
               <p class="home__feature__title"><strong>New to LBRY?</strong></p>
               <p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
-              <a class="home__feature__cta" href="">Check it out</a>
+              <a class="home__feature__cta" href="/hook.html">Check it out</a>
             </li>
 
             <li class="home__feature">
@@ -97,6 +97,10 @@
       </div>
     </template>
 
+    <template v-else-if="$page.path == '/hook.html'">
+      <Content></Content>
+    </template>
+
     <template v-else-if="$page.path == '/whitepaper.html'">
       <Content custom></Content>
     </template>