From 04fbaa807a11cfad0fa9366d49428328b8da4519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 11 May 2018 17:22:08 -0500
Subject: [PATCH] Responsiveness for second hook

---
 .vuepress/components/Step2.vue  | 167 ++++++++++++++------------------
 .vuepress/scss/pages/_hook.scss | 140 ++++++++++++++++++++++++--
 2 files changed, 203 insertions(+), 104 deletions(-)

diff --git a/.vuepress/components/Step2.vue b/.vuepress/components/Step2.vue
index 1c08eb6..8bc5c41 100644
--- a/.vuepress/components/Step2.vue
+++ b/.vuepress/components/Step2.vue
@@ -9,45 +9,78 @@
         </div>
       </header>
 
-      <div class="xs12 sm8">
-        <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image">
-        <canvas id="meme-canvas" width="400" height="300">
-          Sorry, canvas not supported
-        </canvas>
-        <div class="xs12 sm6">
-          <div class="image-upload-container">
-            <p>Upload a background image</p>
-            <image-uploader
-              :quality="0.8"
-              :autoRotate=true
-              :maxWidth="400"
-              outputFormat="string"
-              :preview=false
-              @input="setImage"
-              @onComplete="imageUploaded"
-            ></image-uploader>
-          </div>
-        </div>
-      </div>
-      <div class="xs12 sm4">
-        <div class="form-container">
-          <form>
-            <input type="text" v-model="topLine" placeholder="Top line" required />
-            <input type="text" v-model="bottomLine" placeholder="Bottom line" required />
-            <input type="text" v-model="title" placeholder="Title" required />
-            <input type="text" v-model="description" placeholder="Description" required />
-            <input type="text" v-model="author" placeholder="Author" required />
-            <input type="text" v-model="language" placeholder="Language" required />
-            <input type="text" v-model="license" placeholder="License" required />
-            <label><input type="checkbox" v-model="nsfw" name="nsfw" />NSFW</label>
-            <input type="submit" class="__button-black" v-on:click="submit" value="Submit" />
-          </form>
-        </div>
-      </div>
+      <aside class="hook__page__content">
+        <div class="inner-wrap">
 
-      <div class="xs12" v-if="isLoading">
-        <div class="loader"></div>
-      </div>
+          <div class="hook__page__content__meme left">
+            <img src="https://spee.ch/40ac6818bbac87a208722bf4467653341d460908/lbry-green.png" id="base-image" alt=""/>
+            <canvas id="meme-canvas" width="400" height="300">Sorry, canvas not supported</canvas>
+
+            <div class="hook__page__content__meme__uploader">
+              Upload an image
+              <image-uploader
+                :quality="0.8"
+                :autoRotate=true
+                :maxWidth="400"
+                outputFormat="string"
+                :preview=false
+                @input="setImage"
+                @onComplete="imageUploaded"
+              ></image-uploader>
+            </div>
+          </div>
+
+          <form class="hook__page__content__meme right">
+            <fieldset>
+              <label for="meme-top-line">Top line</label>
+              <input name="meme-top-line" id="meme-top-line" type="text" v-model="topLine" placeholder="Top line" required/>
+            </fieldset>
+
+            <fieldset>
+              <label for="meme-bottom-line">Bottom line</label>
+              <input name="meme-bottom-line" id="meme-bottom-line" type="text" v-model="bottomLine" placeholder="Bottom line" 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 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>
diff --git a/.vuepress/scss/pages/_hook.scss b/.vuepress/scss/pages/_hook.scss
index 8e9a2e9..9bc32d8 100644
--- a/.vuepress/scss/pages/_hook.scss
+++ b/.vuepress/scss/pages/_hook.scss
@@ -162,10 +162,8 @@
   }
 }
 
-.hook__page__hero__claim {
-  input {
-    width: calc(100% - 10rem);
-  }
+.hook__page__hero__claim input {
+  width: calc(100% - 10rem);
 }
 
 .hook__page__hero__support {
@@ -188,10 +186,8 @@
 
 
 
-.hook__page__content {
-  &::after {
-    @include clearfix;
-  }
+.hook__page__content::after {
+  @include clearfix;
 }
 
 .hook__page__content__card {
@@ -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;
+  }
+}