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
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 */

View file

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

View file

@ -77,4 +77,23 @@
</article>
</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}}