Add feature aside style

zombeats · Jan 4, 2016 · fff40c5 · fff40c5
1 parent 4079c45
commit fff40c5
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 97 deletions.
diff --git a/assets/scss/bloggy.scss b/assets/scss/bloggy.scss
@@ -10,7 +10,6 @@
 @import 'components/post';
 @import 'components/prism';
 @import 'components/pagination';
-@import 'components/feature-post';
 @import 'components/misc';
 @import 'components/buttons';
 

diff --git a/assets/scss/components/feature-post.scss b/assets/scss/components/feature-post.scss
diff --git a/assets/scss/components/post.scss b/assets/scss/components/post.scss
@@ -2,6 +2,106 @@
    Single Post
    ========================================================================== */
 
+   .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;
+       margin-bototm: 1.6em;
+       background: #e2edf2;
+       border-radius: 3px;
+       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;
+     }
+   }
+
 .post-template {
   .post {
     margin-bottom: 0;