diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index ad345ac7d..9039d703d 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -1,9 +1,13 @@
 @import 'variables';
 @import 'shared';
+@import 'mixins';
 
 .stories-show {
-  background: $lightest-gray;
-  background: var(--theme-background, $lightest-gray);
+  @include themeable(
+    background, 
+    theme-background, 
+    $lightest-gray
+  );
 }
 
 .unpublished {
@@ -78,15 +82,26 @@ article {
 .container {
   width: 880px;
   max-width: 100%;
-  background: white;
-  background: var(--theme-container-background, #fff);
+  @include themeable(
+    background, 
+    theme-container-background, 
+    white
+  );
   margin: 68px auto 20px;
   text-align: left;
-  box-shadow: $bold-shadow;
-  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
+  @include themeable(
+    box-shadow, 
+    theme-container-box-shadow, 
+    $bold-shadow
+  );
   @media screen and (min-width: 880px) {
-    border: 1px solid darken($light-medium-gray, 2%);
-    border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
+    @include themeable(
+      border, 
+      theme-container-border, 
+      1px solid darken(
+        $light-medium-gray, 2%
+      )
+    );
   }
   @media screen and (min-width: 950px) {
     border-radius: 3px;
@@ -112,8 +127,11 @@ article {
     max-width: 710px;
     margin: auto;
     .org-branded-title-link {
-      color: lighten($black, 4%);
-      color: var(--theme-color, lighten($black, 4%));
+      @include themeable(
+        color, 
+        theme-color, 
+        lighten($black, 4%)
+      );
       .org-branded-title {
         font-size: calc(0.9em + 0.3vw);
         padding: 8px 0px 6px;
@@ -174,8 +192,11 @@ article {
       padding: 0;
       padding: 0px 3px 16px;
       font-weight: 500;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
       font-size: 13.5px;
       line-height: 1.5em;
       @media screen and (min-width: 430px) {
@@ -192,8 +213,11 @@ article {
         background: $light-gray;
       }
       a {
-        color: $medium-gray;
-        color: var(--theme-secondary-color, $medium-gray);
+        @include themeable(
+          color, 
+          theme-secondary-color, 
+          $medium-gray
+        );
         text-decoration: none;
       }
       .icon-img {
@@ -313,8 +337,11 @@ article {
       'Book Antiqua', Georgia, serif;
     font-size: 21px;
     line-height: 32px;
-    background: white;
-    background: var(--theme-container-background, #fff);
+    @include themeable(
+      background, 
+      theme-container-background, 
+      #fff
+    );
     position: relative;
     z-index: 5;
     padding-bottom: 5px;
@@ -421,8 +448,11 @@ article {
       text-align: center;
       font-size: 0.8em;
       line-height: 1.4em;
-      color: darken($medium-gray, 8%);
-      color: var(--theme-color, darken($medium-gray, 8%));
+      @include themeable(
+        color, 
+        theme-color, 
+        darken($medium-gray, 8%)
+      );
       display: block;
     }
     p ~ figcaption {
@@ -581,8 +611,11 @@ article {
       th {
         border: 1px solid $light-medium-gray;
         padding: 5px 1vw;
-        background: $lightest-gray;
-        background: var(--theme-background, $lightest-gray);
+        @include themeable(
+          background, 
+          theme-background, 
+          $lightest-gray
+        );
         text-align: left;
       }
       td {
@@ -602,12 +635,18 @@ article {
     position: relative;
     overflow: hidden;
     padding: 0px 0px 5px;
-    background: white;
-    background: var(--theme-container-background, white);
+    @include themeable(
+      background, 
+      theme-container-background, 
+      white
+    );
     font-family: $helvetica;
     a {
-      color: $black;
-      color: var(--theme-color, $black);
+      @include themeable(
+        color, 
+        theme-color, 
+        $black
+      );
     }
     @media screen and (min-width: 520px) {
       width: 82%;
@@ -664,8 +703,11 @@ article {
       .social {
         font-size: 0.85em;
         a {
-          color: $medium-gray;
-          color: var(--theme-secondary-color, $medium-gray);
+          @include themeable(
+            color, 
+            theme-secondary-color,
+            $medium-gray
+          );
           margin-right: 6px;
           display: inline-block;
           .icon-img {
@@ -676,7 +718,11 @@ article {
             margin: 0px;
             opacity: 0.7;
             background: transparent;
-            background: var(--theme-secondary-color, transparent);
+            @include themeable(
+              background, 
+              theme-secondary-color, 
+              transparent
+            );
           }
         }
       }
@@ -690,12 +736,24 @@ article {
     z-index: 22;
     background: white;
     border: 1px solid darken($light-medium-gray, 2%);
-    border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
-    box-shadow: $bold-shadow;
-    box-shadow: var(--theme-container-box-shadow, $bold-shadow);
+    @include themeable(
+      border, 
+      theme-container-border, 
+      1px solid darken(
+        $light-medium-gray, 2%
+      )
+    );
+    @include themeable(
+      box-shadow, 
+      theme-container-box-shadow, 
+      $bold-shadow
+    );
     width: 100%;
-    background: $tan;
-    background: var(--theme-background, $tan);
+    @include themeable(
+      background, 
+      theme-background, 
+      $tan
+    );
     @media screen and (min-width: 880px) {
       margin-left: -1px;
       margin-right: -1px;
@@ -734,9 +792,11 @@ article {
           animation: wide-reaction-animation 0.25s !important;
         }
         &:not(.user-activated) {
-          background: darken($light-gray, 1%) !important;
-          background: var(--theme-container-background, darken($light-gray, 1%)) !important;
-
+          @include themeable-important(
+            background, 
+            theme-container-background, 
+            darken($light-gray, 1%)
+          );
         }
         &:focus {
           outline: 0;
@@ -779,8 +839,11 @@ article {
       }
     }
     button {
-      background: transparent;
-      background: var(--theme-container-background, transparent);
+      @include themeable(
+        background, 
+        theme-container-background, 
+        transparent
+      );
       margin: 0px calc(0.22vw + 2px);
       padding: 3px calc(0.88vw + 8px);
       border-radius: 100px;
@@ -813,8 +876,11 @@ article {
         display: inline-block;
         vertical-align: 5px;
         margin-left: 4px;
-        color: $medium-gray;
-        color: var(--theme-secondary-color, $medium-gray);
+        @include themeable(
+          color, 
+          theme-secondary-color, 
+          $medium-gray
+        );
         font-size: 14px;
         width: 27px;
         @media screen and (min-width: 500px) {
@@ -938,8 +1004,11 @@ article {
     .article-actions-comments-count {
       display: none;
       position: relative;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(
+        color, 
+        theme-secondary-color, 
+        $medium-gray
+      );
       font-weight: bold;
       font-size: calc(0.8em + 0.1vw);
       vertical-align: calc(7px - 0.07vw);
@@ -1093,8 +1162,11 @@ article {
   margin-bottom: 0px;
   padding-bottom: 20px;
   a {
-    color: $black;
-    color: var(--theme-color, $black);
+    @include themeable(
+      color, 
+      theme-color,
+      $black
+    );
   }
   .inner {
     width: 800px;
diff --git a/app/assets/stylesheets/article_form.scss b/app/assets/stylesheets/article_form.scss
index a05f86a3f..47453dac9 100644
--- a/app/assets/stylesheets/article_form.scss
+++ b/app/assets/stylesheets/article_form.scss
@@ -1,363 +1,438 @@
 @import 'variables';
-.hidden{
-  display:none;
-}
-.job-listing-header{
-  color:#007777;
-  background:#bafff1;
-  text-align:center;
-  padding: 80px 5px 60px;
-  margin-bottom:-20px;
-  font-family: $helvetica;
-  font-size:1.5em;
-  font-weight:800;
+@import 'mixins';
+
+.hidden {
+  display: none;
 }
 
-.markdown-editor{
-  margin:80px auto;
-  padding-bottom: 4px !important;
-  position:relative;
-  z-index:11;
+.job-listing-header {
+  color: #007777;
+  background: #bafff1;
+  text-align: center;
+  padding: 80px 5px 60px;
+  margin-bottom: -20px;
   font-family: $helvetica;
-  .top-buttons{
-    padding:20px 0px 5px;
-    text-align:center;
+  font-size: 1.5em;
+  font-weight: 800;
+}
+
+.markdown-editor {
+  margin: 80px auto;
+  padding-bottom: 4px !important;
+  position: relative;
+  z-index: 11;
+  font-family: $helvetica;
+
+  .top-buttons {
+    padding: 20px 0px 5px;
+    text-align: center;
     max-width: 320px;
-    margin:auto;
-    @media screen and ( min-width: 650px ){
+    margin: auto;
+
+    @media screen and (min-width: 650px) {
       max-width: 100%;
     }
-    button{
-      padding:4px 0px;
-      margin:0px 4px 5px;
-      background:$green;
-      color:$black;
-      border-radius:3px;
-      width:135px;
-      display:inline-block;
-      font-size:17px;
-      opacity:0.9;
+
+    button {
+      padding: 4px 0px;
+      margin: 0px 4px 5px;
+      background: $green;
+      color: $black;
+      border-radius: 3px;
+      width: 135px;
+      display: inline-block;
+      font-size: 17px;
+      opacity: 0.9;
       position: relative;
       font-family: $helvetica-condensed;
       border: 0px;
+
       &.preview-loading {
         background: #56a886;
       }
-      &.help-butt{
+
+      &.help-butt {
         background: $yellow;
         color: $black;
       }
-      &.markdown-butt{
+
+      &.markdown-butt {
         background: $purple;
       }
-      &.loading{
-        opacity:0.66;
+
+      &.loading {
+        opacity: 0.66;
       }
-      &.active{
-        background:$black;
+
+      &.active {
+        background: $black;
         color: $yellow;
-        cursor:default;
-        box-shadow: 0px 3px 6px rgba(0,0,0,0.4);
+        cursor: default;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
+
         // color:white;
-        &::before { 
+        &::before {
           content: "<";
         }
-        &::after { 
+
+        &::after {
           content: ">";
         }
       }
-      &.disabled{
-        background:$medium-gray;
+
+      &.disabled {
+        background: $medium-gray;
         color: white;
-        opacity:0.7;
-        cursor:default;
+        opacity: 0.7;
+        cursor: default;
         box-shadow: none;
       }
-      &:hover:not(.disabled, .preview-loading, .submit-loading){
-        opacity:1;
+
+      &:hover:not(.disabled, .preview-loading, .submit-loading) {
+        opacity: 1;
       }
-      &.submit{
-        background:$bold-blue;
-        color:white;
+
+      &.submit {
+        background: $bold-blue;
+        color: white;
       }
-      &.submit-loading{
+
+      &.submit-loading {
         background: #73949c;
       }
     }
   }
-  .editor-image-upload{
+
+  .editor-image-upload {
     font-family: $helvetica;
     padding: 4px 5px;
-    font-size:0.8em;
+    font-size: 0.8em;
     width: inherit;
     position: relative;
-    margin:auto;
-    @media screen and ( min-width: 900px ){
+    margin: auto;
+
+    @media screen and (min-width: 900px) {
       // width:100%;
       width: inherit;
       padding: 0px 10px;
     }
-    #image-upload-button,#image-upload-submit {
-      background:$black;
-      color:white;
-      border:0;
-      padding:4px 7px;
-      border-radius:3px;
-      font-size:0.8em;
-      &:hover{
-        opacity:0.9;
+
+    #image-upload-button,
+    #image-upload-submit {
+      background: $black;
+      color: white;
+      border: 0;
+      padding: 4px 7px;
+      border-radius: 3px;
+      font-size: 0.8em;
+
+      &:hover {
+        opacity: 0.9;
       }
     }
-    #image-upload-submit{
-      background:$blue;
+
+    #image-upload-submit {
+      background: $blue;
     }
-    #image-upload-file-label{
-      margin:1.0vw 0;
-      display:inline-block;
-      margin-right:5px;
-      margin-left:4px;
-      color:#888;
-      font-size:0.9em;
+
+    #image-upload-file-label {
+      margin: 1.0vw 0;
+      display: inline-block;
+      margin-right: 5px;
+      margin-left: 4px;
+      color: #888;
+      font-size: 0.9em;
     }
-    #uploaded-image{
-      font-size:1em;
-      display:inline-block;
-      padding:0.5vw 0.8vw;
-      border:1px dashed $dark-gray;
-      border-radius:3px;
+
+    #uploaded-image {
+      font-size: 1em;
+      display: inline-block;
+      padding: 0.5vw 0.8vw;
+      border: 1px dashed $dark-gray;
+      border-radius: 3px;
       width: 97%;
+
       @media screen and (min-width: 500px) {
         width: calc(97% - 270px);
       }
     }
   }
-  p{
+
+  p {
     margin-top: 0px;
-    line-height:30px;
-    padding:8px 10px;
-    background:$light-gray;
-    font-size:0.8em;
-    code{
-      background:darken($light-gray,5%);
+    line-height: 30px;
+    padding: 8px 10px;
+    background: $light-gray;
+    font-size: 0.8em;
+
+    code {
+      background: darken($light-gray, 5%);
     }
-    @media screen and ( min-width: 500px ){
-      font-size:1.1em;
+
+    @media screen and (min-width: 500px) {
+      font-size: 1.1em;
     }
 
   }
-  .article-new-billing-notice{
+
+  .article-new-billing-notice {
     background: #bafff1;
     color: #007777;
-    font-size:calc(1.2em + 0.7vw);
-    padding:120px 0px 200px;
-    text-align:center;
-    font-weight:800;
-    width:100%;
-    margin-top:-50px;
+    font-size: calc(1.2em + 0.7vw);
+    padding: 120px 0px 200px;
+    text-align: center;
+    font-weight: 800;
+    width: 100%;
+    margin-top: -50px;
     margin-bottom: -200px;
-    position:relative;
-    z-index:0;
-    @media screen and ( min-width: 1200px ){
-      width:150%;
+    position: relative;
+    z-index: 0;
+
+    @media screen and (min-width: 1200px) {
+      width: 150%;
       margin-left: -25%;
     }
-    .article-new-billing-notice-inner{
-      width:90%;
-      margin:auto;
-      position:relative;
-      z-index:15;
-      .article-new-billing-notice-inner-small{
-        font-size:calc(0.55em + 0.2vw);
-        margin-top:30px;
+
+    .article-new-billing-notice-inner {
+      width: 90%;
+      margin: auto;
+      position: relative;
+      z-index: 15;
+
+      .article-new-billing-notice-inner-small {
+        font-size: calc(0.55em + 0.2vw);
+        margin-top: 30px;
       }
     }
-    a{
-      font-weight:800;
-      color:$red;
-      text-decoration:underline;
+
+    a {
+      font-weight: 800;
+      color: $red;
+      text-decoration: underline;
     }
   }
-  .org-publish-check-wrapper{
+
+  .org-publish-check-wrapper {
     font-family: $helvetica;
-    background:$lightest-gray;
-    background:var(--theme-background, $lightest-gray);
-    padding:20px 14px;
-    text-align:center;
-    font-size:24px;
-    line-height:33px;
-    margin-top:8px;
-    label{
-      padding:1px 10px 3px;
+    @include themeable(
+      background, 
+      theme-background, 
+      $lightest-gray
+    );
+    padding: 20px 14px;
+    text-align: center;
+    font-size: 24px;
+    line-height: 33px;
+    margin-top: 8px;
+
+    label {
+      padding: 1px 10px 3px;
     }
-    input{
-      vertical-align:2px;
-      max-width:30px;
+
+    input {
+      vertical-align: 2px;
+      max-width: 30px;
     }
   }
+
   .editor-main {
     margin-top: 15px;
     position: relative;
     z-index: 5;
   }
+
   .textarea-header {
     background: #e0e0e0;
-    border:1px solid #dddddd;
+    border: 1px solid #dddddd;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
     transform: translateY(2px);
   }
-  input[type="text"]{
-    width:calc(100% - 30px);
-    padding:10px 15px;
-    font-size:22px;
-    height:40px;
-    line-height:40px;
-    &.article-form-input{
-      margin-top:15px;
+
+  input[type="text"] {
+    width: calc(100% - 30px);
+    padding: 10px 15px;
+    font-size: 22px;
+    height: 40px;
+    line-height: 40px;
+
+    &.article-form-input {
+      margin-top: 15px;
     }
   }
-  .hiring-form{
-    h2{
-      margin-top:85px;
-      margin-bottom:16px;
-      font-size:34px;
-      text-align:center;
+
+  .hiring-form {
+    h2 {
+      margin-top: 85px;
+      margin-bottom: 16px;
+      font-size: 34px;
+      text-align: center;
     }
-    h3{
-      text-align:center;
-      font-weight:400;
-      font-size:17px;
+
+    h3 {
+      text-align: center;
+      font-weight: 400;
+      font-size: 17px;
     }
-    .filter-buttons{
-      margin-top:9px;
-      text-align:center;
-      label{
-        cursor:pointer;
+
+    .filter-buttons {
+      margin-top: 9px;
+      text-align: center;
+
+      label {
+        cursor: pointer;
         margin: 9px 5px 9px 0px;
-        display:inline-block;
-        padding:4px 12px;
+        display: inline-block;
+        padding: 4px 12px;
         border-radius: 100px;
-        font-size:17px;
-        &:hover{
-          background:lighten($blue,53%);
-          color:darken($blue,23%);
+        font-size: 17px;
+
+        &:hover {
+          background: lighten($blue, 53%);
+          color: darken($blue, 23%);
         }
       }
-      input{
-        display:none;
-        width:auto;
-        &:checked + label{
-          background:$blue;
-          color:white;
-          &:hover{
-            background:$blue;
+
+      input {
+        display: none;
+        width: auto;
+
+        &:checked+label {
+          background: $blue;
+          color: white;
+
+          &:hover {
+            background: $blue;
           }
         }
       }
     }
-    .tags-to-choose{
-      margin-top:12px;
-      button{
+
+    .tags-to-choose {
+      margin-top: 12px;
+
+      button {
         border: 0px;
         border-radius: 100px;
-        opacity:0.8;
-        &:hover{
-          opacity:1;
+        opacity: 0.8;
+
+        &:hover {
+          opacity: 1;
         }
       }
     }
   }
+
   // .ap-icon-clear{
   //   display:none;
   // }
-  .ap-input-icon{
-    margin-top:13px;
-    right:14px;
+  .ap-input-icon {
+    margin-top: 13px;
+    right: 14px;
   }
+
   .comment-template {
     display: block;
     width: 98%;
     margin: 0 auto;
   }
+
   .article-field {
-    width:calc(100% - 32px);
+    width: calc(100% - 32px);
     min-height: 550px;
-    margin:auto;
-    display:block;
-    border-radius:3px;
-    border:0px;
-    resize:none;
-    padding:12px 15px 18px;
+    margin: auto;
+    display: block;
+    border-radius: 3px;
+    border: 0px;
+    resize: none;
+    padding: 12px 15px 18px;
     font-family: "Lucida Console", Monaco, monospace, sans-serif;
-    font-size:17px;
-    background: white;
-    background: var(--theme-container-background, white);
-    color: $black;
-    color: var(--theme-color, $black);
-    &::placeholder{
-      color:#8f949c;
+    font-size: 17px;
+    @include themeable(
+      background, 
+      theme-container-background, 
+      white
+    );
+    @include themeable(
+      color, 
+      theme-color, 
+      $black
+    );
+
+    &::placeholder {
+      color: #8f949c;
     }
-    &::after
-    {
-        position: absolute;
-        left: 5px;
-        top: 3px;
-        content: attr("dsds ds ds dsdhjsdhjsbdhs eieuirwhewh iurhwiu wehu iewhu ierwhu irwehiu erwhui r huir");
-        pointer-events: none;
-        opacity: 0.6;
+
+    &::after {
+      position: absolute;
+      left: 5px;
+      top: 3px;
+      content: attr("dsds ds ds dsdhjsdhjsbdhs eieuirwhewh iurhwiu wehu iewhu ierwhu irwehiu erwhui r huir");
+      pointer-events: none;
+      opacity: 0.6;
     }
   }
-  #submitbutt{
-    width:300px;
-    margin:10px 0px;
-    display:block;
-    background:rgb(19, 149, 184);
-    color:white;
-    border:1px solid rgb(14, 121, 150);
-    padding:10px;
-    border-radius:3px;
-    font-size:30px;
+
+  #submitbutt {
+    width: 300px;
+    margin: 10px 0px;
+    display: block;
+    background: rgb(19, 149, 184);
+    color: white;
+    border: 1px solid rgb(14, 121, 150);
+    padding: 10px;
+    border-radius: 3px;
+    font-size: 30px;
     box-shadow: inset 0 1px 3px 1px #66bfff;
-    &:hover{
-      background:rgb(19, 143, 176);
+
+    &:hover {
+      background: rgb(19, 143, 176);
     }
   }
-  .hiring-form-toggle{
-    margin:-40px auto 50px;
-    font-weight:600;
-    text-align:center;
+
+  .hiring-form-toggle {
+    margin: -40px auto 50px;
+    font-weight: 600;
+    text-align: center;
   }
-  .form-submit-buttons{
-    text-align:center;
-    input{
-      width:35%;
-      margin:5px 10px 100px;
+
+  .form-submit-buttons {
+    text-align: center;
+
+    input {
+      width: 35%;
+      margin: 5px 10px 100px;
       font-size: 30px;
-      color:white;
+      color: white;
       background: $blue;
-      border:0px;
-      font-weight:600;
-      border-radius:8px;
+      border: 0px;
+      font-weight: 600;
+      border-radius: 8px;
       padding: 20px 0px;
-      &.draft-version{
+
+      &.draft-version {
         color: $black;
         background: $yellow;
       }
-      &:hover{
-        opacity:0.88;
+
+      &:hover {
+        opacity: 0.88;
       }
     }
   }
+
   .switch {
     position: relative;
     display: inline-block;
     width: 60px;
     height: 34px;
-    vertical-align:-10px;
-    margin-right:12px;
+    vertical-align: -10px;
+    margin-right: 12px;
   }
 
-  .switch input {display:none;}
+  .switch input {
+    display: none;
+  }
 
   .slider {
     position: absolute;
@@ -369,7 +444,7 @@
     background-color: #ccc;
     -webkit-transition: .4s;
     transition: .4s;
-    border-radius:100px;
+    border-radius: 100px;
   }
 
   .slider:before {
@@ -382,18 +457,18 @@
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
-    border-radius:100px;
+    border-radius: 100px;
   }
 
-  input:checked + .slider {
+  input:checked+.slider {
     background-color: #2196F3;
   }
 
-  input:focus + .slider {
+  input:focus+.slider {
     box-shadow: 0 0 1px #2196F3;
   }
 
-  input:checked + .slider:before {
+  input:checked+.slider:before {
     -webkit-transform: translateX(26px);
     -ms-transform: translateX(26px);
     transform: translateX(26px);
@@ -408,40 +483,45 @@
     border-radius: 50%;
   }
 }
-#error_explanation{
-  background:$red;
-  max-width:750px;
+
+#error_explanation {
+  background: $red;
+  max-width: 750px;
   font-family: $helvetica;
-  color:white;
-  border-radius:5px;
-  margin:80px auto -50px;
-  position:relative;
-  h2{
-    text-align:center;
-    padding:2vw 0;
+  color: white;
+  border-radius: 5px;
+  margin: 80px auto -50px;
+  position: relative;
+
+  h2 {
+    text-align: center;
+    padding: 2vw 0;
   }
-  ul{
-    width:88%;
-    max-width:500px;
-    margin:30px auto;
-    li{
-      margin:10px 0px;
+
+  ul {
+    width: 88%;
+    max-width: 500px;
+    margin: 30px auto;
+
+    li {
+      margin: 10px 0px;
     }
   }
 }
 
-.editor-article-view{
-  margin-top:-50px;
-  margin-bottom:70px;
+.editor-article-view {
+  margin-top: -50px;
+  margin-bottom: 70px;
 }
 
 
-.new-article-pitch{
-  padding-top:calc(8% + 50px);
-  width:900px;
-  max-width:94%;
-  margin:auto;
-  text-align:center;
+.new-article-pitch {
+  padding-top: calc(8% + 50px);
+  width: 900px;
+  max-width: 94%;
+  margin: auto;
+  text-align: center;
+
   .registration-rainbow {
     .rainbow-logo {
       height: calc(170px + 1vw);
@@ -451,64 +531,76 @@
       margin-top: 26px;
     }
   }
+
   .prefill-non-logged-in-message {
     background: lighten($yellow, 12%);
     border-radius: 8px;
     padding: 10px 0px;
     border: 3px solid $yellow;
+
     .rainbow-logo {
       height: calc(100px + 1vw);
       width: calc(100px + 1vw);
       margin-top: 26px;
     }
+
     p {
       font-size: 1.1em;
       padding: 15px;
     }
   }
-  h1{
-    font-size:calc(30px + 1vw);
-    font-weight:800;
+
+  h1 {
+    font-size: calc(30px + 1vw);
+    font-weight: 800;
   }
-  h2{
-    font-weight:300;
-    font-size:40px;
-    margin:70px auto 40px;
+
+  h2 {
+    font-weight: 300;
+    font-size: 40px;
+    margin: 70px auto 40px;
   }
-  hr{
-    width:40%;
-    margin-top:40px;
-    opacity:0.4;
+
+  hr {
+    width: 40%;
+    margin-top: 40px;
+    opacity: 0.4;
   }
-  h3{
-    font-weight:300;
-    font-size:30px;
+
+  h3 {
+    font-weight: 300;
+    font-size: 30px;
   }
-  p{
-    font-size:16px;
-    line-height:25px;
+
+  p {
+    font-size: 16px;
+    line-height: 25px;
     font-family: $monospace;
   }
-  img.gif{
-    width:500px;
-    max-width:100%;
+
+  img.gif {
+    width: 500px;
+    max-width: 100%;
   }
-  .links{
-    margin:50px auto;
-    .sign-up-link{
-      padding:22px 0px;
-      margin:2%;
-      border:3px solid $bold-blue;
+
+  .links {
+    margin: 50px auto;
+
+    .sign-up-link {
+      padding: 22px 0px;
+      margin: 2%;
+      border: 3px solid $bold-blue;
       background: $bold-blue;
       font-family: $helvetica-condensed;
-      display:inline-block;
-      text-align:center;
-      width:290px;
+      display: inline-block;
+      text-align: center;
+      width: 290px;
       border-radius: 100px;
       color: white;
-      font-size:1.1em;
-      .icon-img{
-        vertical-align:-7px;
+      font-size: 1.1em;
+
+      .icon-img {
+        vertical-align: -7px;
         fill: white;
         height: 30px;
         width: 30px;
@@ -521,11 +613,11 @@
 
 
 
-.sign-in-message{
-  background:rgb(219, 29, 57);
-  color:white;
-  padding:20px;
-  margin-top:58px;
-  text-align:center;
-  margin-bottom:-60px;
+.sign-in-message {
+  background: rgb(219, 29, 57);
+  color: white;
+  padding: 20px;
+  margin-top: 58px;
+  text-align: center;
+  margin-bottom: -60px;
 }