diff --git a/assets/scss/bloggy.scss b/assets/scss/bloggy.scss index 05e8877..3e85e86 100644 --- 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 deleted file mode 100644 index 3da8b12..0000000 --- a/assets/scss/components/feature-post.scss +++ /dev/null @@ -1,96 +0,0 @@ -.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; - } -} diff --git a/assets/scss/components/post.scss b/assets/scss/components/post.scss index 8889f0c..cc15cab 100644 --- 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;