Move styles from base.scss to scratchx.scss

The division made no sense

css/scratchx.css

@@ -762,51 +762,8 @@ picture {
 .modal-open {
   overflow: hidden; }
 
-dialog {
+a[href=""] {
-  display: block;
+  outline: 1px solid red; }
-  position: static;
-  overflow: hidden;
-  border-radius: 5px;
-  text-align: center; }
-  dialog h2 {
-    text-align: center;
-    margin: 1.5em 0 0.375em 0; }
-  dialog section {
-    background-color: #3f5975;
-    color: #fff;
-    padding: 0.75em; }
-  dialog section:last-child {
-    background-color: #fff;
-    padding: 0.75em;
-    color: #58595b; }
-  dialog button {
-    display: inline-block;
-    line-height: normal;
-    width: 100%;
-    padding: 0.375em;
-    /*
-        Needed so that all buttons are the same height
-        as text inputs
-    */
-    border: 1px solid; }
-
-.message {
-  border-radius: 5px;
-  text-align: center;
-  margin: 1.5em 0;
-  padding: 0.75em; }
-
-.warning {
-  background-color: #fff447;
-  color: #58595b; }
-
-.info {
-  background-color: #dfe3e7;
-  color: #58595b; }
-
-.success {
-  background-color: #18ba37;
-  color: #fff; }
 
 article header h1 {
   text-align: center; }
@@ -825,65 +782,6 @@ article header h1 + p {
   article header h1 + p:last-child {
     margin-right: 0; }
 
-.twitter, .github {
-  display: block;
-  float: left;
-  margin-right: 24px; }
-  .twitter span, .github span {
-    display: none; }
-
-.twitter:before {
-  content: "";
-  font-family: "ScratchX";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  font-size: 1.5em;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: 0.375em;
-  width: 0.75em;
-  height: 0.75em;
-  text-align: center;
-  display: inline-block;
-  line-height: 1.875em;
-  width: 1.875em;
-  height: 1.875em;
-  border-radius: 0.9375em;
-  background-color: #21b4f0;
-  color: #fff; }
-
-.github:before {
-  content: "";
-  font-family: "ScratchX";
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  font-size: 1.5em;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: 0.375em;
-  width: 0.75em;
-  height: 0.75em;
-  text-align: center;
-  display: inline-block;
-  line-height: 1.875em;
-  width: 1.875em;
-  height: 1.875em;
-  border-radius: 0.9375em;
-  background-color: #21b4f0;
-  color: #fff; }
-a[href=""] {
-  outline: 1px solid red; }
-
 body > main > header > div,
 body > main > article > header > div,
 body > main > article > section > div,
@@ -1214,6 +1112,81 @@ body > main > article {
   .main-nav li {
     margin-left: 50px; }
 
+.message {
+  border-radius: 5px;
+  text-align: center;
+  margin: 1.5em 0;
+  padding: 0.75em; }
+
+.warning {
+  background-color: #fff447;
+  color: #58595b; }
+
+.info {
+  background-color: #dfe3e7;
+  color: #58595b; }
+
+.success {
+  background-color: #18ba37;
+  color: #fff; }
+
+.twitter, .github {
+  display: block;
+  float: left;
+  margin-right: 24px; }
+  .twitter span, .github span {
+    display: none; }
+
+.twitter:before {
+  content: "";
+  font-family: "ScratchX";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  font-size: 1.5em;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: 0.375em;
+  width: 0.75em;
+  height: 0.75em;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.875em;
+  width: 1.875em;
+  height: 1.875em;
+  border-radius: 0.9375em;
+  background-color: #21b4f0;
+  color: #fff; }
+
+.github:before {
+  content: "";
+  font-family: "ScratchX";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  font-size: 1.5em;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: 0.375em;
+  width: 0.75em;
+  height: 0.75em;
+  text-align: center;
+  display: inline-block;
+  line-height: 1.875em;
+  width: 1.875em;
+  height: 1.875em;
+  border-radius: 0.9375em;
+  background-color: #21b4f0;
+  color: #fff; }
+
 /* Homepage */
 body.page-home > main > header {
   background-color: transparent; }

sass/base/_base.scss

@@ -13,118 +13,3 @@
 @import "tables";
 @import "typography";
 @import "modal";
-
-dialog {
-    display: block;
-    position: static;
-    overflow: hidden;
-    border-radius: $base-border-radius;
-    text-align: center;
-
-    h2 {
-        text-align: center;
-        margin: 4 * $vertical-base 0 $vertical-base 0;
-    }
-    
-    section {
-        background-color: $alt-background-color;
-        color: $alt-font-color;
-        padding: 2 * $vertical-base;
-    }
-
-    section:last-child {
-        background-color: $base-background-color;
-        padding: 2 * $vertical-base;
-        color: $base-font-color;
-    }
-
-    button {
-        display: inline-block;
-        line-height: normal;
-        width: 100%;
-        padding: $vertical-base;
-        /*
-            Needed so that all buttons are the same height
-            as text inputs
-        */
-        border: 1px solid;
-    }
-
-}
-
-.message {
-    border-radius: $base-border-radius;
-    text-align: center;
-    margin: $vertical-base * 4 0;
-    padding: $vertical-base * 2;
-}
-
-.warning {
-    background-color: $yellow;
-    color: $dark-gray;
-}
-
-.info {
-    background-color: $light-gray;
-    color: $dark-gray;
-}
-
-.success {
-    background-color: $green;
-    color: $white;
-}
-
-article header h1 {
-    text-align: center;
-}
-
-article header p {
-    text-align: center;
-}
-
-article header h1 + p {
-    font-size: 1.125em;
-    margin-bottom: 1.5em;
-    @include span-columns(10);
-    @include shift(1);
-}
-
-body > main > article > section {
-    ul {
-        @extend %default-ul;
-    }
-
-}
-
-.twitter, .github {
-    display: block;
-    float: left;
-    margin-right: 2 * $gutter;
-    span {
-        display: none;
-    }
-}
-
-.twitter {
-    @include icon(before, twitter, circular, false, 4 * $vertical-base){
-        display: inline-block;
-        line-height: 5 * $vertical-base;
-        width: 5 * $vertical-base;
-        height: 5 * $vertical-base;
-        border-radius: 2.5 * $vertical-base;
-        background-color: $blue;
-        color: $white;
-    }
-}
-
-.github {
-    @include icon(before, github, circular, false, 4 * $vertical-base){
-        display: inline-block;
-        line-height: 5 * $vertical-base;
-        width: 5 * $vertical-base;
-        height: 5 * $vertical-base;
-        border-radius: 2.5 * $vertical-base;
-        background-color: $blue;
-        color: $white;
-    }
-}

sass/scratchx.scss

@@ -8,6 +8,28 @@ a[href=""] {
     outline: 1px solid red;
 }
 
+article header h1 {
+    text-align: center;
+}
+
+article header p {
+    text-align: center;
+}
+
+article header h1 + p {
+    font-size: 1.125em;
+    margin-bottom: 1.5em;
+    @include span-columns(10);
+    @include shift(1);
+}
+
+body > main > article > section {
+    ul {
+        @extend %default-ul;
+    }
+
+}
+
 body > main {
     > header,
     > article > header,
@@ -72,6 +94,45 @@ body {
 }
 
 
+dialog {
+    display: block;
+    position: static;
+    overflow: hidden;
+    border-radius: $base-border-radius;
+    text-align: center;
+
+    h2 {
+        text-align: center;
+        margin: 4 * $vertical-base 0 $vertical-base 0;
+    }
+    
+    section {
+        background-color: $alt-background-color;
+        color: $alt-font-color;
+        padding: 4 * $vertical-base;
+    }
+
+    section:last-child {
+        background-color: $base-background-color;
+        padding: 4 * $vertical-base;
+        color: $base-font-color;
+    }
+
+    button {
+        display: inline-block;
+        line-height: normal;
+        width: 100%;
+        padding: $vertical-base;
+        /*
+            Needed so that all buttons are the same height
+            as text inputs
+        */
+        border: 1px solid;
+    }
+
+}
+
+
 dialog.with-icon {
     section:first-child {
         /* Add a border equal to the number of featured extensions - 1 */
@@ -229,6 +290,62 @@ body > main > article {
     }
 }
 
+.message {
+    border-radius: $base-border-radius;
+    text-align: center;
+    margin: $vertical-base * 4 0;
+    padding: $vertical-base * 2;
+}
+
+.warning {
+    background-color: $yellow;
+    color: $dark-gray;
+}
+
+.info {
+    background-color: $light-gray;
+    color: $dark-gray;
+}
+
+.success {
+    background-color: $green;
+    color: $white;
+}
+
+.twitter, .github {
+    display: block;
+    float: left;
+    margin-right: 2 * $gutter;
+    span {
+        display: none;
+    }
+}
+
+.twitter {
+    @include icon(before, twitter, circular, false, 4 * $vertical-base){
+        display: inline-block;
+        line-height: 5 * $vertical-base;
+        width: 5 * $vertical-base;
+        height: 5 * $vertical-base;
+        border-radius: 2.5 * $vertical-base;
+        background-color: $blue;
+        color: $white;
+    }
+}
+
+.github {
+    @include icon(before, github, circular, false, 4 * $vertical-base){
+        display: inline-block;
+        line-height: 5 * $vertical-base;
+        width: 5 * $vertical-base;
+        height: 5 * $vertical-base;
+        border-radius: 2.5 * $vertical-base;
+        background-color: $blue;
+        color: $white;
+    }
+}
+
+
 @import "home";
 @import "editor";
 @import "gallery";