Separate widgets from theme

assets/scss/itch.scss

@@ -1,4 +1,15 @@
+
+/* Basic */
 @import 'variables';
 @import 'mixins';
 @import 'theme';
 @import 'global';
+
+/* Customize */
+@import 'widgets/blog-text';
+@import 'widgets/slack-box';
+@import 'widgets/ghost-love';
+@import 'widgets/twitter-box';
+@import 'widgets/popular-posts';
+@import 'widgets/blog-subscribe';
+@import 'widgets/subscribe-banner';

assets/scss/theme.scss

@@ -1,51 +1,14 @@
-::selection {
-  background: lighten($orange, 36%);
-}
 
-.button-green,
-.button-add,
-.button-add[type="submit"] {
-  transition: all 0.5s ease;
-  background: white;
-  border: 2px solid $green;
-  color: $green;
-}
+$subscribe-banner-color   : $green;
+$selection-color          : lighten($orange, 36%);
+$tag-color                : rgba($orange, .7);
 
-.button-green:not(.button-loading):hover,
-.button-green:not(.button-loading):focus,
-.button-add:not(.button-loading):hover,
-.ghost-pro-ad:hover .button-add:not(.button-loading),
-.button-add:not(.button-loading):focus,
-.button-add[type="submit"]:not(.button-loading):hover,
-.ghost-pro-ad:hover [type="submit"].button-add:not(.button-loading),
-.button-add[type="submit"]:not(.button-loading):focus {
-  background: $green;
-  color: white;
-}
+$feature-one-color        : $green;
+$feature-two-color        : $blue;
 
-.modal-close {
-  color: $red;
-}
+$title-hover-color        : $blue;
 
-.button-save,
-.button-blue,
-button[type="submit"],
-input[type="submit"] {
-  background: $blue;
-  box-shadow: none;
-}
+$header-color             : #303538;
 
-.button-save:not(.button-loading):hover,
-.button-save:not(.button-loading):focus,
-.button-blue:not(.button-loading):hover,
-.button-blue:not(.button-loading):focus,
-button[type="submit"]:not(.button-loading):hover,
-button[type="submit"]:not(.button-loading):focus,
-input[type="submit"]:not(.button-loading):hover,
-input[type="submit"]:not(.button-loading):focus {
-  background: darken($blue, 10%);
-}
-
-.blog-header h1 {
-  background-color: rgba(#8BC34A, .7);
-}
+/* widgets */
+/** advertising **/

assets/scss/variables.scss

@@ -30,16 +30,18 @@ $darkgrey                    : #242628;
 $grey                        : #35393b;
 $midgrey                     : #7d878a;
 $lightgrey                   : #e2edf2;
-
 $brown                       : #aaa9a2;
 $midbrown                    : #c0bfb6;
 $lightbrown                  : #edece4;
+$white                       : #fff;
 
 $blue                        : #3498db;
 $red                         : #e74c3c;
 $orange                      : #e67e22;
 $green                       : #2ecc71;
 $yellow                      : #f1c40f;
 
+
+
 // Others
 $name                        : 'Zombeats';

assets/scss/widgets/blog-subscribe.scss

@@ -0,0 +1,77 @@
+.blog-subscribe {
+  padding: 0;
+
+  text-align: center;
+
+  h3 {
+    font-weight: bold;
+
+    text-transform: uppercase;
+  }
+
+  p {
+    margin: 1rem 0 2.5rem;
+
+    font-size: 1.6rem;
+    font-weight: 200;
+
+    color: $brown;
+  }
+}//.blog-subscribe
+
+//the modal
+#blogsubscribe {
+  .modal-header {
+    padding: 50px 50px 0 50px;
+
+    text-align: center;
+
+    border: none;
+
+    @include breakpoint(450px) {
+      padding: 35px 20px 0 20px;
+    }
+  }
+  .modal-title {
+    font-size: 2.8rem;
+    font-weight: bold;
+    line-height: 1.1em;
+
+    @include breakpoint(450px) {
+      font-size: 2.2rem;
+    }
+  }
+  .modal-body {
+    padding: 30px 50px 50px;
+
+    text-align: center;
+
+    @include breakpoint(450px) {
+      padding: 10px 20px 30px;
+    }
+  }
+  form {
+    margin: 0;
+  }
+  input {
+    width: 100%;
+    height: 50px;
+    padding: 0 15px;
+    margin-bottom: 1rem;
+  }
+  button {
+    min-height: 50px;
+
+    font-size: 1.8rem;
+    line-height: 1;
+
+    @include breakpoint(450px) {
+      font-size: 1.3rem;
+    }
+  }
+  p {
+    margin: 1rem 0;
+
+    color: $brown;
+  }
+}//#blogsubscribe

assets/scss/widgets/blog-text.scss

@@ -0,0 +1,10 @@
+.blog-text {
+  color: $midgrey;
+  border: $lightbrown 1px solid;
+  background: lighten($lightbrown, 4%);
+
+  ul {
+    padding: 0 0 0 1.2em;
+    margin: 0;
+  }
+}

assets/scss/widgets/facebook-box.scss

@@ -0,0 +1,13 @@
+.facebook-box {
+  min-height: 280px;
+  padding: 3px 0 0;
+
+  text-align: center;
+
+  border: #eee 1px solid;
+  border-top: $blue 3px solid;
+
+  @include breakpoint(1000px) {
+    display: none;
+  }
+}

assets/scss/widgets/ghost-love.scss

@@ -0,0 +1,79 @@
+.ghost-love {
+  display: block;
+
+  text-align: center;
+
+  color: $white;
+  background: $blue;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  h3 {
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.1em;
+
+    color: $white;
+  }
+  .highlight {
+    display: block;
+    margin: 3rem 0 .5rem 0;
+
+    color: $white;
+
+    @include breakpoint(1000px) {
+      display: inline;
+      margin: 0;
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    &:before,
+    &:after {
+      display: inline-block;
+
+      font-weight: 200;
+
+      content: "—";
+    }
+    &:before {
+      margin-right: 5px;
+    }
+    &:after {
+      margin-left: 5px;
+    }
+  }
+
+  h4 {
+    font-size: 1.5rem;
+    line-height: 1.4em;
+
+    color: rgba(255,255,255,.8);
+  }
+}
+
+.ghost-love-button {
+  padding: 15px 10px;
+  margin: 80px -30px -30px -30px;
+
+  font-size: 1.5rem;
+  font-weight: bold;
+
+  text-align: center;
+  text-transform: uppercase;
+
+  color: $white;
+  background: $red;
+
+  @include breakpoint(1000px) {
+    margin-top: 30px;
+  }
+}
+
+.ghost-love:hover .ghost-love-button {
+  background: $darkgrey;
+}

assets/scss/widgets/gplus-box.scss

@@ -0,0 +1,7 @@
+gplus-box {
+  padding: 0;
+
+  @include breakpoint(1000px) {
+    display: none;
+  }
+}

assets/scss/widgets/popular-posts.scss

@@ -0,0 +1,87 @@
+.popular-posts {
+  padding: 0;
+
+  h3 {
+    margin-bottom: 2rem;
+
+    font-size: 1.8rem;
+    font-weight: bold;
+
+    text-transform: uppercase;
+  }
+
+  mark {
+    padding: 0 4px;
+
+    font-weight: normal;
+
+    color: $white;
+    background: $yellow;
+  }
+
+  ol {
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+  }
+
+  li {
+    position: relative;
+
+    display: block;
+    margin: 0 0 2px 0;
+
+    font-size: 1.4rem;
+    line-height: 1.4em;
+
+    background: lighten($lightgrey, 4%);
+
+    &:hover {
+      background: $lightgrey;
+      .number {
+        background: darken($lightgrey, 4%);
+      }
+    }
+
+    &:nth-child(3n) .number {
+      border-color: $grey;
+    }
+    &:nth-child(3n+2) .number {
+      border-color: $red;
+    }
+  }
+
+  a {
+    display: block;
+    min-height: 38px;
+    padding: 15px 15px 15px 75px;
+
+    color: rgba(0,0,0,.7);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .number {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    display: block;
+    width: 37px;
+    padding: 10px;
+
+    font-size: 2.8rem;
+    font-weight: bold;
+    line-height: 1.5em;
+
+    text-align: center;
+
+    color: rgba(0,0,0,.2);
+    border-left: $blue 3px solid;
+    background: $lightgrey;
+  }
+}