Updated styling and structure of newsletter signup

content/.vuepress/components/EmailSubscribe.vue

@@ -1,9 +1,11 @@
 <template>
-  <div id="email-subscribe">
+  <div id="email-subscribe" class="newsletter-cta">
-    <h3 class="title">Subscribe to our developer newsletter!</h3>
+    <h3 class="newsletter-cta__title">Subscribe to our developer newsletter</h3>
-    <input type="text" class="input" v-model="emailAddress" placeholder="your@email.com">
+    <div>
-    <a class="__button-black" href="#" v-on:click.prevent="subscribe">Subscribe</a>
+      <input type="text" class="newsletter-cta__input" v-model="emailAddress" placeholder="you@domain.tld">
-    <p v-if="message" class="message">{{ message }}</p>
+      <a class="newsletter-cta__submit" href="#" v-on:click.prevent="subscribe">Subscribe</a>
+    </div>
+    <p v-if="message" class="newsletter-cta__message">{{ message }}</p>
   </div>
 </template>
 
@@ -47,24 +49,84 @@ export default {
 </script>
 
 <style lang="scss">
+  @import "../scss/init/colors";
+  @import "../scss/init/extends";
+  @import "../scss/init/mixins";
 
-#email-subscribe {
+  .newsletter-cta {
-  background: #ddd;
+    background-color: rgba($black, 0.2);
-  padding: 1rem 0;
+    padding-top: 1rem;
-  text-align: center;
+    padding-bottom: 1rem;
-  .title {
+    text-align: center;
-    margin-bottom: 0.5rem;
-  }
-  .input {
-    border: 1px solid black;
-    padding: 0.65rem;
-    background: white;
-    margin-right: 1rem;
-    width: 18rem;
-  }
-  .message {
-    margin-top: 1rem;
-  }
-}
 
+    > div:first-of-type {
+      margin-right: auto;
+      margin-left: auto;
+      width: 500px;
+    }
+
+    &::after {
+      @include clearfix;
+    }
+  }
+
+  .newsletter-cta__title {
+    font-size: 0.8rem;
+    letter-spacing: 0.05rem;
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+  }
+
+  .newsletter-cta__input,
+  .newsletter-cta__submit {
+    @extend .__button-padding-horizontal;
+    border-style: solid;
+    border-width: 1px;
+  }
+
+  .newsletter-cta__input {
+    width: calc(100% - 112px); height: 38px;
+
+    background-color: $white;
+    float: left;
+    transition: border 0.2s;
+
+    &:not(:focus) {
+      border-top-color: $black;
+      border-right-color: transparent;
+      border-bottom-color: $black;
+      border-left-color: $black;
+    }
+
+    &:focus {
+      border-top-color: mix($black, $teal, 20%);
+      border-right-color: transparent;
+      border-bottom-color: mix($black, $teal, 20%);
+      border-left-color: mix($black, $teal, 20%);
+    }
+  }
+
+  .newsletter-cta__submit {
+    @extend .__button-basic;
+    @extend .__button-padding-vertical;
+    color: $white;
+    float: right;
+    left: -1px;
+    width: 112px;
+
+    &:not(:hover) {
+      background-color: $black;
+      border-color: $black;
+    }
+
+    &:hover {
+      background-color: $teal;
+      border-color: mix($black, $teal, 20%);
+    }
+  }
+
+  .newsletter-cta__message {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
 </style>

content/.vuepress/scss/init/_extends.scss

@@ -11,8 +11,10 @@
 
 .__button-basic {
   @extend .__button-base;
-  @extend .__button-padding-vertical;
+}
 
+.__button-plain {
+  @extend .__button-base;
   background-color: transparent;
   border-color: transparent;
 

content/.vuepress/scss/partials/_footer.scss

@@ -4,6 +4,19 @@
   font-size: 1rem;
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
+  position: relative;
+
+  @media (max-width: 980px) {
+    &::before {
+      width: 3rem; height: 100%;
+      bottom: 0; right: 0;
+
+      background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent`
+      content: "";
+      position: absolute;
+      z-index: 2;
+    }
+  }
 
   > div:first-of-type {
     @media (max-width: 980px) {