From dd02a1225803f96ede1d6217179bf72f17a7cdcb Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Fri, 27 Mar 2015 19:10:31 +0200 Subject: [PATCH] no message --- assets/css/screen.css | 181 +++++++++++++++++++++++++++++++++++++----- package.json | 2 +- post.hbs | 19 +++++ 3 files changed, 181 insertions(+), 21 deletions(-) diff --git a/assets/css/screen.css b/assets/css/screen.css index 94e873a..3321ca2 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -11,12 +11,13 @@ 4. General 5. Single Post 6. Tag Archive - 7. Third Party Elements - 8. Pagination - 9. Footer - 10. Media Queries (Tablet) - 11. Media Queries (Mobile) - 12. Animations + 7. Read Next + 8. Third Party Elements + 9. Pagination + 10. Footer + 11. Media Queries (Tablet) + 12. Media Queries (Mobile) + 13. Animations */ @@ -1324,8 +1325,126 @@ body:not(.post-template) .post-title { display: none; } + /* ========================================================================== - 7. Third Party Elements - Embeds from other services + 7. Read More - Next/Prev Post Links + ========================================================================== */ + +.middle { + +} +.read-next { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: stretch; + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; + margin-top: 10rem; + margin-bottom: calc(-8rem - 37px); +} + +.read-next-story { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + text-decoration: none; + position: relative; + text-align: center; + color: #fff; + background: #222 no-repeat center center; + background-size: cover; + overflow: hidden; +} +.read-next-story:hover:before { + background: rgba(0,0,0,0.8); + transition: all 0.2s ease; +} +.read-next-story:hover .post:before { + color: #222; + background: #fff; + transition: all 0.2s ease; +} + +.read-next-story:before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(0,0,0,0.7); + transition: all 0.5s ease; +} + +.read-next-story .post { + padding-top: 6rem; + padding-bottom: 6rem; +} + +.read-next-story .post:before { + content: "Read This Next"; + padding: 4px 10px 5px; + text-transform: uppercase; + font-size: 1.1rem; + font-family: "Open Sans", sans-serif; + color: rgba(255,255,255,0.8); + border: rgba(255,255,255,0.5) 1px solid; + border-radius: 4px; + transition: all 0.5s ease; +} +.read-next-story.prev .post:before { + content: "You Might Enjoy"; +} + +.read-next-story h2 { + margin-top: 1rem; + color: #fff; +} + +.read-next-story p { + margin: 0; + color: rgba(255,255,255,0.8); +} + +/* Special styles for posts with no cover images */ +.read-next-story.no-cover { + background: #f5f8fa; +} + +.read-next-story.no-cover:before { + display: none; +} + +.read-next-story.no-cover .post:before { + color: rgba(0,0,0,0.5); + border-color: rgba(0,0,0,0.2); +} + +.read-next-story.no-cover h2 { + color: rgba(0,0,0,0.8); +} + +.read-next-story.no-cover p { + color: rgba(0,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,0.04) 1px solid; +} + + +/* ========================================================================== + 8. Third Party Elements - Embeds from other services ========================================================================== */ /* Github */ @@ -1345,8 +1464,9 @@ body:not(.post-template) .post-title { margin-bottom: 1.75em; } + /* ========================================================================== - 8. Pagination - Tools to let you flick between pages + 9. Pagination - Tools to let you flick between pages ========================================================================== */ /* The main wrapper for our pagination links */ @@ -1432,14 +1552,13 @@ body:not(.post-template) .post-title { /* ========================================================================== - 9. Footer - The bottom of every page + 10. Footer - The bottom of every page ========================================================================== */ .site-footer { position: relative; margin: 8rem 0 0 0; - padding: 0.5rem 15px; - border-top: #EBF2F6 1px solid; + padding: 1rem 15px; font-family: "Open Sans", sans-serif; font-size: 1rem; line-height: 1.75em; @@ -1453,7 +1572,7 @@ body:not(.post-template) .post-title { } .site-footer a:hover { - color: #50585D; + border-bottom: #bbc7cc 1px solid; } .poweredby { @@ -1471,7 +1590,7 @@ body:not(.post-template) .post-title { /* ========================================================================== - 10. Media Queries - Smaller than 900px + 11. Media Queries - Smaller than 900px ========================================================================== */ @media only screen and (max-width: 900px) { @@ -1587,11 +1706,29 @@ body:not(.post-template) .post-title { padding: 0; } + .read-next { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 4rem; + } + + .read-next p { + display: none; + } + + .read-next-story.no-cover + .read-next-story.no-cover { + border-top: rgba(0,0,100,0.06) 1px solid; + border-left: none; + } + } /* ========================================================================== - 11. Media Queries - Smaller than 500px + 12. Media Queries - Smaller than 500px ========================================================================== */ @media only screen and (max-width: 500px) { @@ -1756,11 +1893,6 @@ body:not(.post-template) .post-title { font-size: 2.5rem; } - .post-template .post { - padding-bottom: 0; - margin-bottom: 0; - } - .post-template .site-footer { margin-top: 0; } @@ -1846,11 +1978,20 @@ body:not(.post-template) .post-title { display: none; } + .read-next { + margin-top: 2rem; + margin-bottom: -37px; + } + + .read-next .post { + width: 100%; + } + } /* ========================================================================== - 12. Animations + 13. Animations ========================================================================== */ /* Used to fade in title/desc on the home page */ diff --git a/package.json b/package.json index 1578d6a..e1c9f08 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,4 @@ { "name": "Casper", - "version": "1.1.7" + "version": "1.2.0" } diff --git a/post.hbs b/post.hbs index cc48269..2126c5a 100644 --- a/post.hbs +++ b/post.hbs @@ -77,4 +77,23 @@ + + {{/post}}