no message

This commit is contained in:
John O'Nolan 2015-03-27 19:10:31 +02:00
parent e587980ccd
commit dd02a12258
3 changed files with 181 additions and 21 deletions

View file

@ -11,12 +11,13 @@
4. General 4. General
5. Single Post 5. Single Post
6. Tag Archive 6. Tag Archive
7. Third Party Elements 7. Read Next
8. Pagination 8. Third Party Elements
9. Footer 9. Pagination
10. Media Queries (Tablet) 10. Footer
11. Media Queries (Mobile) 11. Media Queries (Tablet)
12. Animations 12. Media Queries (Mobile)
13. Animations
*/ */
@ -1324,8 +1325,126 @@ body:not(.post-template) .post-title {
display: none; 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 */ /* Github */
@ -1345,8 +1464,9 @@ body:not(.post-template) .post-title {
margin-bottom: 1.75em; 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 */ /* 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 { .site-footer {
position: relative; position: relative;
margin: 8rem 0 0 0; margin: 8rem 0 0 0;
padding: 0.5rem 15px; padding: 1rem 15px;
border-top: #EBF2F6 1px solid;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 1rem; font-size: 1rem;
line-height: 1.75em; line-height: 1.75em;
@ -1453,7 +1572,7 @@ body:not(.post-template) .post-title {
} }
.site-footer a:hover { .site-footer a:hover {
color: #50585D; border-bottom: #bbc7cc 1px solid;
} }
.poweredby { .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) { @media only screen and (max-width: 900px) {
@ -1587,11 +1706,29 @@ body:not(.post-template) .post-title {
padding: 0; 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) { @media only screen and (max-width: 500px) {
@ -1756,11 +1893,6 @@ body:not(.post-template) .post-title {
font-size: 2.5rem; font-size: 2.5rem;
} }
.post-template .post {
padding-bottom: 0;
margin-bottom: 0;
}
.post-template .site-footer { .post-template .site-footer {
margin-top: 0; margin-top: 0;
} }
@ -1846,11 +1978,20 @@ body:not(.post-template) .post-title {
display: none; 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 */ /* Used to fade in title/desc on the home page */

View file

@ -1,4 +1,4 @@
{ {
"name": "Casper", "name": "Casper",
"version": "1.1.7" "version": "1.2.0"
} }

View file

@ -77,4 +77,23 @@
</article> </article>
</main> </main>
<aside class="read-next">
{{#next_post}}
<a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
<section class="post">
<h2>{{title}}</h2>
<p>{{excerpt words="19"}}&hellip;</p>
</section>
</a>
{{/next_post}}
{{#prev_post}}
<a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
<section class="post">
<h2>{{title}}</h2>
<p>{{excerpt words="19"}}&hellip;</p>
</section>
</a>
{{/prev_post}}
</aside>
{{/post}} {{/post}}