Responsiveness for second hook

.vuepress/components/Step2.vue

@@ -9,14 +9,15 @@
         </div>
       </header>
 
-      <div class="xs12 sm8">
+      <aside class="hook__page__content">
-        <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
+        <div class="inner-wrap">
-        <canvas id="meme-canvas" width="400" height="300">
+
-          Sorry, canvas not supported
+          <div class="hook__page__content__meme left">
-        </canvas>
+            <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image" alt=""/>
-        <div class="xs12 sm6">
+            <canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
-          <div class="image-upload-container">
+
-            <p>Upload a background image</p>
+            <div class="hook__page__content__meme__uploader">
+              Upload an image
               <image-uploader
                 :quality="0.8"
                 :autoRotate=true
@@ -28,26 +29,58 @@
               ></image-uploader>
             </div>
           </div>
-      </div>
+
-      <div class="xs12 sm4">
+          <form class="hook__page__content__meme right">
-        <div class="form-container">
+            <fieldset>
-          <form>
+              <label for="meme-top-line">Top line</label>
-            <input type="text" v-model="topLine" placeholder="Top line" required />
+              <input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
-            <input type="text" v-model="bottomLine" placeholder="Bottom line" required />
+            </fieldset>
-            <input type="text" v-model="title" placeholder="Title" required />
+
-            <input type="text" v-model="description" placeholder="Description" required />
+            <fieldset>
-            <input type="text" v-model="author" placeholder="Author" required />
+              <label for="meme-bottom-line">Bottom line</label>
-            <input type="text" v-model="language" placeholder="Language" required />
+              <input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" required/>
-            <input type="text" v-model="license" placeholder="License" required />
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-title">Title</label>
+              <input name="meme-title" id="meme-title" type="text" v-model="title" placeholder="Title" required/>
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-description">Description</label>
+              <input name="meme-description" id="meme-description" type="text" v-model="description" placeholder="Description" required/>
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-author">Author</label>
+              <input name="meme-author" id="meme-author" type="text" v-model="author" placeholder="Author" required/>
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-language">Language</label>
+              <input name="meme-language" id="meme-language" type="text" v-model="language" placeholder="Language" required/>
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-license">License</label>
+              <input name="meme-license" id="meme-license" type="text" v-model="license" placeholder="License" required/>
+            </fieldset>
+
+            <fieldset>
               <label><input type="checkbox" v-model="nsfw" name="nsfw"/>NSFW</label>
+            </fieldset>
+
+            <fieldset>
               <input type="submit" class="__button-black" v-on:click="submit" value="Submit"/>
+            </fieldset>
           </form>
-        </div>
-      </div>
 
           <div class="xs12" v-if="isLoading">
             <div class="loader"></div>
           </div>
+
+        </div>
+      </aside>
     </div>
 
   </section>
@@ -142,61 +175,3 @@ export default {
   name: 'Step2'
 };
 </script>
-
-<style lang="scss">
-
-#step2-page {
-  .sm8 {
-    float: left;
-    width: 66%;
-  }
-  .sm4 {
-    float: right;
-    width: 30%;
-  }
-  #meme-canvas {
-    width: 400px;
-    height: 300px;
-  }
-  #base-image {
-    left: -10000px;
-    top: -10000px;
-    position: absolute;
-  }
-  .image-upload-container {
-    background: white;
-    width: 80%;
-    padding: 1rem;
-    margin: 1rem auto;
-    p {
-      color: black;
-      text-shadow: none;
-    }
-  }
-  .form-container {
-    input {
-      margin-bottom: 0.5rem;
-      display: block;
-      width: 80%;
-      &[type='checkbox'] {
-        margin: 0;
-        width: 1rem;
-        height: 1rem;
-        display: inline-block;
-        -moz-appearance: checkbox;
-        -webkit-appearance: checkbox;
-      }
-    }
-    label {
-      text-align: left;
-      display: block;
-      line-height: 2rem;
-    }
-  }
-  #fileInput {
-    width: 100%;
-  }
-}
-
-
-</style>

.vuepress/scss/pages/_hook.scss

@@ -162,11 +162,9 @@
   }
 }
 
-.hook__page__hero__claim {
+.hook__page__hero__claim input {
-  input {
   width: calc(100% - 10rem);
 }
-}
 
 .hook__page__hero__support {
   input[type=number] {
@@ -188,11 +186,9 @@
 
 
 
-.hook__page__content {
+.hook__page__content::after {
-  &::after {
   @include clearfix;
 }
-}
 
 .hook__page__content__card {
   margin-bottom: 1rem; padding: 1rem;
@@ -211,3 +207,131 @@
     width: 100%;
   }
 }
+
+.hook__page__content__meme {
+  padding-right: 1rem;
+  padding-left: 1rem;
+
+  @media (min-width: 701px) {
+    width: 50%;
+  }
+
+  @media (max-width: 700px) {
+    width: 100%;
+  }
+
+  &.left {
+    margin-bottom: 2rem;
+
+    img {
+      height: 0;
+      visibility: hidden;
+    }
+
+    canvas {
+      width: 100%; height: 100%;
+      background-color: rgba($teal, 0.3);
+    }
+  }
+
+  fieldset {
+    border: none;
+
+    &:not(:last-of-type) {
+      margin-bottom: 1rem;
+    }
+  }
+
+  label {
+    color: rgba($black, 0.3);
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.05rem;
+    margin-bottom: 0.025rem;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  input {
+    @media (min-width: 901px) {
+      &:not([type="checkbox"]):not([type="submit"]) {
+        font-size: 1.25rem;
+      }
+    }
+
+    @media (max-width: 900px) {
+      &:not([type="checkbox"]):not([type="submit"]) {
+        font-size: 1.05rem;
+      }
+    }
+
+    &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
+      border-bottom: 2px solid;
+      padding-bottom: 0.15rem;
+      transition: all 0.2s;
+      width: 100%;
+    }
+
+    &:not([type="file"]):not([type="submit"]) {
+      &:not(:hover):not(:active) {
+        border-color: $black;
+      }
+
+      &:hover,
+      &:active {
+        border-color: $teal;
+      }
+    }
+
+    &[type="checkbox"] {
+      width: 1.25rem; height: 1.25rem;
+
+      border: 2px solid;
+      margin-right: 0.5rem;
+      position: relative;
+      top: 0.35rem;
+
+      &::after {
+        width: 100%; height: 100%;
+
+        content: "✓";
+        font-size: 1.5rem;
+        line-height: 1rem;
+        position: absolute;
+      }
+
+      &:not(:checked)::after {
+        color: transparent;
+      }
+
+      &:checked::after {
+        color: $teal;
+      }
+    }
+  }
+}
+
+.hook__page__content__meme__uploader {
+  @extend .__button-black;
+  text-align: center;
+  width: 11rem;
+
+  > div:first-of-type {
+    width: 100%; height: 100%;
+    top: 0; left: 0;
+
+    position: absolute;
+  }
+
+  input {
+    top: 0; left: 0;
+    bottom: 0; right: 0;
+
+    cursor: pointer;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 10;
+  }
+}