Fragment styles into components

assets/scss/bloggy.scss

@@ -6,7 +6,15 @@
 @import 'mixins';
 @import 'global';
 
-/* Customize */
+/* Components */
+@import 'components/post';
+@import 'components/prism';
+@import 'components/pagination';
+@import 'components/feature-post';
+@import 'components/misc';
+@import 'components/buttons';
+
+/* Widgets */
 @import 'widgets/blog-text';
 @import 'widgets/slack-box';
 @import 'widgets/ghost-love';

assets/scss/components/buttons.scss

@@ -0,0 +1,43 @@
+/* ==========================================================================
+   Buttons
+   ========================================================================== */
+
+.button-green,
+.button-add,
+.button-add[type="submit"] {
+  transition: all 0.5s ease;
+  background: white;
+  border: 2px solid $feature-one-color;
+  color: $feature-one-color;
+}
+
+.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: $feature-one-color;
+  color: white;
+}
+
+.button-save,
+.button-blue,
+button[type="submit"],
+input[type="submit"] {
+  background: $feature-two-color;
+  box-shadow: none;
+}
+
+.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($feature-two-color, 10%);
+}

assets/scss/components/feature-post.scss

@@ -0,0 +1,96 @@
+.wrap article aside {
+  display: none;
+}
+
+.wrap.featured {
+  .blog-content {
+    width: 100%;
+  }
+
+  .blog-sidebar {
+    display: none;
+  }
+
+  article {
+    max-width: 700px;
+    margin: 0 auto 0;
+    font-size: 1.15em;
+  }
+
+  .post-title {
+    margin-top: 480px;
+
+    @media (max-width: 900px) {
+      margin-top: 280px;
+    }
+
+    @media (max-width: 500px) {
+      margin-top: 140px;
+    }
+  }
+
+  aside {
+    display: block;
+    float: right;
+    width: 300px;
+    color: #111;
+    border-top: 3px solid #55acee;
+    margin-top: 5px;
+    margin-right: -150px;
+    margin-left: 30px;
+    padding: 20px 30px 25px;
+    font-size: 15px;
+    line-height: 1.8em;
+
+    @media (max-width: 1020px) {
+      display: none;
+    }
+  }
+
+  .post-content .full-img {
+    width: calc(100% + 120px);
+    max-width: none;
+    margin-left: -60px;
+    margin-right: -60px;
+
+    @include breakpoint(1100px) {
+      width: calc(100% + 30px);
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+  }
+}
+
+/* Hero */
+
+.hero {
+  position: absolute;
+  top: -50px;
+  right: -60px;
+  left: -60px;
+  overflow: hidden;
+
+  @media (max-width: 850px) {
+    top: -40px;
+    right: -11%;
+    left: -11%;
+  }
+}
+
+.hero-image {
+  height: 500px;
+  background: #eee no-repeat center center;
+  background-size: cover;
+}
+
+@media (max-width: 900px) {
+  .hero-image {
+    height: 300px;
+  }
+}
+
+@media (max-width: 500px) {
+  .hero-image {
+    height: 200px;
+  }
+}

assets/scss/components/misc.scss

@@ -0,0 +1,33 @@
+/* ==========================================================================
+ Misc
+========================================================================== */
+
+.tags {
+  vertical-align: text-bottom;
+
+  > a {
+    padding: 0.167rem 0.5rem;
+    font-size: .55rem;
+    transition: all 350ms;
+    text-transform: uppercase;
+    color: #f8f8f8;
+    border-radius: 0.7rem;
+    background-color: $tag-color;
+  }
+}
+
+#global-footer .poweredby a {
+  text-decoration: underline;
+}
+
+.global-header {
+  min-height: 30px;
+}
+
+#feature-one {
+  @include feature-header-button($feature-one-color);
+}
+
+#feature-two {
+  @include feature-header-button($feature-two-color);
+}

assets/scss/components/pagination.scss

@@ -0,0 +1,182 @@
+/* ==========================================================================
+   Pagination - Tools to let you flick between pages
+   ========================================================================== */
+
+/* The main wrapper for our pagination links */
+
+.pagination {
+  position: relative;
+  margin: 40px auto 20px;
+  font-size: 1.3rem;
+  text-align: center;
+  color: #9eabb3;
+}
+
+.pagination a {
+  color: #9eabb3;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* Push the previous/next links out to the left/right */
+
+.older-posts,
+.newer-posts {
+  position: absolute;
+  display: inline-block;
+  padding: 5px 15px;
+  transition: border ease .3s;
+  text-decoration: none;
+  border: #ebf2f6 2px solid;
+  border-radius: 30px;
+
+  @include breakpoint(500px) {
+    position: static;
+    margin: 10px 0;
+  }
+}
+
+.older-posts {
+  right: 0;
+}
+
+.page-number {
+  display: inline-block;
+  padding: 5px 0;
+
+  @include breakpoint(500px) {
+    display: block;
+  }
+}
+
+.newer-posts {
+  left: 0;
+}
+
+.older-posts:hover,
+.newer-posts:hover {
+  border-color: #9eabb3;
+}
+
+/* ==========================================================================
+   7. Read More - Next/Prev Post Links
+   ========================================================================== */
+
+.read-next {
+  display: flex;
+  margin: 4rem 0;
+  overflow: hidden;
+  border-radius: 5px;
+  align-items: stretch;
+}
+
+.read-next-story {
+  position: relative;
+  display: flex;
+  min-width: 50%;
+  overflow: hidden;
+  text-align: center;
+  text-decoration: none;
+  color: $white;
+  background: #222 no-repeat center center;
+  background-size: cover;
+  flex-grow: 1;
+}
+
+.read-next-story:hover {
+  text-decoration: none;
+}
+
+.read-next-story:hover:before {
+  transition: all .2s ease;
+  background: rgba(0, 0, 0, .8);
+}
+
+.read-next-story:hover .post:before {
+  transition: all .2s ease;
+  color: #222;
+  background: $white;
+}
+
+.read-next-story:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  transition: all .5s ease;
+  background: rgba(0, 0, 0, .7);
+}
+
+.read-next-story .post {
+  position: relative;
+  width: 80%;
+  padding: 3rem 0;
+  margin: 0 auto;
+}
+
+.read-next-story .post:before {
+  padding: 4px 10px 5px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 1.1rem;
+  content: "Siguiente Publicación";
+  transition: all .5s ease;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, .8);
+  border: rgba(255, 255, 255, .5) 1px solid;
+  border-radius: 4px;
+}
+
+.read-next-story.prev .post:before {
+  content: "Tal vez te interese";
+}
+
+.read-next-story h2 {
+  margin-top: 3rem;
+  color: $white;
+}
+
+.read-next-story p {
+  margin: 3rem 0 0 0;
+  font-weight: 200;
+  line-height: 1.4em;
+  color: rgba(255, 255, 255, .8);
+}
+
+/* Special styles for posts with no cover images */
+
+.read-next-story.no-cover {
+  background: $white;
+}
+
+.read-next-story.no-cover:before {
+  display: none;
+}
+
+.read-next-story.no-cover .post:before {
+  color: rgba(0, 0, 0, .5);
+  border-color: rgba(0, 0, 0, .2);
+}
+
+.read-next-story.no-cover:hover .post:before {
+  color: $blue;
+  border-color: $blue;
+}
+
+.read-next-story.no-cover h2 {
+  color: rgba(0, 0, 0, .8);
+}
+
+.read-next-story.no-cover p {
+  color: rgba(0, 0, 0, .5);
+}
+
+/* if there are two posts without covers, put a border between them */
+
+.read-next-story.no-cover + .read-next-story.no-cover {
+  border-left: rgba(0, 0, 100, .04) 1px solid;
+}