no message
This commit is contained in:
John O'Nolan
parent
e587980ccd
commit
dd02a12258
3 changed files with 181 additions and 21 deletions
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"name": "Casper",
|
||||
"version": "1.1.7"
|
||||
"version": "1.2.0"
|
||||
}
|
||||
|
|
|
|||
19
post.hbs
19
post.hbs
|
|
@ -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"}}…</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"}}…</p>
|
||||
</section>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
</aside>
|
||||
|
||||
{{/post}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue