diff --git a/assets/scss/components/post.scss b/assets/scss/components/post.scss index 7325988..804ab5a 100644 --- a/assets/scss/components/post.scss +++ b/assets/scss/components/post.scss @@ -2,105 +2,105 @@ Single Post ========================================================================== */ - .wrap article aside { - display: none; - } +.wrap article aside { + display: none; +} - .wrap.featured { - .blog-content { - width: 100%; - } - - .blog-sidebar { - display: none; - } - - article { - max-width: 700px; - margin: 0 auto; - 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; - } - } - } +.wrap.featured { + .blog-content { + width: 100%; + } - /* Hero */ + .blog-sidebar { + display: none; + } - .hero { - position: absolute; - top: -50px; - right: -60px; - left: -60px; - overflow: hidden; + article { + max-width: 700px; + margin: 0 auto; + font-size: 1.15em; + } - @media (max-width: 850px) { - top: -40px; - right: -11%; - left: -11%; - } - } - - .hero-image { - height: 500px; - background: #eee no-repeat center center; - background-size: cover; - } + .post-title { + margin-top: 480px; @media (max-width: 900px) { - .hero-image { - height: 300px; - } + margin-top: 280px; } @media (max-width: 500px) { - .hero-image { - height: 200px; - } + 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 {