themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Whatever pass I lost count

This commit is contained in:
John O'Nolan 2017-06-12 10:01:00 +01:00
parent d55446f2ca
commit 55f35da8e9
12 changed files with 121 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/components/global.css
View File

@ -8,7 +8,7 @@
--purple: #ad26b4; --purple: #ad26b4;
--yellow: #fecd35; --yellow: #fecd35;
--red: #f05230; --red: #f05230;
--darkgrey: #343f44; --darkgrey: #15171A;
--midgrey: #738a94; --midgrey: #738a94;
--lightgrey: #c5d2d9; --lightgrey: #c5d2d9;
--whitegrey: #e5eff5; --whitegrey: #e5eff5;

52
assets/css/screen.css
View File

@ -72,7 +72,7 @@ body {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
color: #fff; color: #fff;
background: color(var(--darkgrey) l(-15%)) no-repeat center center; background: color(var(--darkgrey) l(-5%)) no-repeat center center;
background-size: cover; background-size: cover;
} }
@ -177,6 +177,14 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
margin-right: 24px; margin-right: 24px;
font-size: 1.7rem;
font-weight: bold;
color: #fff;
letter-spacing: -0.5px;
}
.site-nav-logo:hover {
text-decoration: none;
} }
.site-nav-logo img { .site-nav-logo img {
@ -892,8 +900,8 @@ Super neat trick courtesy of @JoelDrapper
.read-next-feed { .read-next-feed {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -15px; margin: 0 -20px;
padding: 30px 0 0 0; padding: 40px 0 0 0;
} }
.read-next-card { .read-next-card {
@ -901,7 +909,7 @@ Super neat trick courtesy of @JoelDrapper
flex: 1 1 300px; flex: 1 1 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 15px 30px; margin: 0 20px 40px;
padding: 25px; padding: 25px;
color: #fff; color: #fff;
background: var(--darkgrey) center center; background: var(--darkgrey) center center;
@ -935,11 +943,23 @@ Super neat trick courtesy of @JoelDrapper
margin: 0; margin: 0;
font-size: 3rem; font-size: 3rem;
line-height: 1.2em; line-height: 1.2em;
font-weight: 200; font-weight: 300;
letter-spacing: 1px; letter-spacing: 1px;
color: #fff; color: #fff;
} }
.read-next-divider {
display: flex;
justify-content: center;
height: 80px;
}
.read-next-divider svg {
width: 50px;
stroke: #fff;
fill: transparent;
}
.read-next-card-content { .read-next-card-content {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@ -948,31 +968,32 @@ Super neat trick courtesy of @JoelDrapper
font-size: 1.7rem; font-size: 1.7rem;
} }
.read-next-card-content a {
color: #fff;
}
.read-next-card-content ol { .read-next-card-content ol {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; margin: 0 auto;
margin: 0; padding: 0 1em 0 2em;
padding: 0 0 0 2em;
} }
.read-next-card-content li { .read-next-card-content li {
padding-left: 5px; padding-left: 5px;
margin: 20px 0; margin: 20px 0;
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.8rem; line-height: 1.25em;
font-weight: 200; font-weight: 200;
} }
.read-next-card-content li a { .read-next-card-content li a {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-size: 1.6rem; font-weight: 600;
font-weight: 500; color: #fff;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.read-next-card-content li a:hover {
opacity: 1;
} }
@ -1064,6 +1085,7 @@ Super neat trick courtesy of @JoelDrapper
margin: 0 0 0 15px; margin: 0 0 0 15px;
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.3em; line-height: 1.3em;
letter-spacing: -0.5px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

2
assets/public/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/public/screen.css.map
View File

File diff suppressed because one or more lines are too long

4
author.hbs
View File

@ -15,9 +15,9 @@
</header> </header>
<section class="author-profile inner"> <section class="author-profile inner">
{{#if image}} {{#if feature_image}}
<figure class="author-image"> <figure class="author-image">
<div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div> <div class="img" style="background-image: url({{feature_image}})"><span class="hidden">{{name}}'s Picture</span></div>
</figure> </figure>
{{/if}} {{/if}}
<h1 class="author-title">{{name}}</h1> <h1 class="author-title">{{name}}</h1>

10
index.hbs
View File

@ -45,8 +45,14 @@ into the {body} of the default.hbs template --}}
<main id="site-main" class="site-main outer" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner"> <div class="inner">
{{!-- The tag below includes the post loop - partials/loop.hbs --}} <div class="post-feed">
{{> "loop"}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div> </div>
</main> </main>

10
page.hbs
View File

@ -61,3 +61,13 @@ into the {body} of the default.hbs template --}}
</main> </main>
{{/post}} {{/post}}
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
var $postContent = $(".post-full-content");
$postContent.fitVids();
});
</script>
{{/contentFor}}

1
partials/icons/infinity.hbs Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

36
partials/loop.hbs
View File

@ -1,36 +0,0 @@
<div class="post-feed">
{{!-- This is the post loop - each post will be output using this markup --}}
{{!-- <aside class="post-card number-3">
<h1>SUBSCRIBE</h1>
</aside> --}}
{{#foreach posts}}
<article class="post-card {{post_class}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
{{#if tags}}
<span class="post-card-tags">{{tags.[0].name}}</span>
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="33"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author.profile_image}}
<img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" nopin="nopin" />
{{/if}}
<span class="post-card-author">{{author}}</span>
</footer>
</div>
</article>
{{/foreach}}
</div>

26
partials/post-card.hbs Normal file
View File

@ -0,0 +1,26 @@
<article class="post-card {{post_class}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
{{#if tags}}
<span class="post-card-tags">{{tags.[0].name}}</span>
{{/if}}
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="33"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author.profile_image}}
<img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" />
{{/if}}
<span class="post-card-author">{{author}}</span>
</footer>
</div>
</article>

91
post.hbs
View File

@ -9,6 +9,8 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-left"> <div class="site-nav-left">
{{#if @blog.logo}} {{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a> <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
{{/if}} {{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}} {{!-- The blog navigation links from /ghost/settings/design --}}
@ -137,77 +139,36 @@ into the {body} of the default.hbs template --}}
<div class="read-next-feed"> <div class="read-next-feed">
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}} {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
<article class="read-next-card" <article class="read-next-card"
{{#if ../tags.[0].feature_image}} {{#if ../tags.[0].feature_image}}
style="background-image: url({{../tags.[0].feature_image}})" style="background-image: url({{../tags.[0].feature_image}})"
{{else}} {{else}}
{{#if @blog.cover_image}} {{#if @blog.cover_image}}
style="background-image: url({{@blog.cover_image}})"{{/if}} style="background-image: url({{@blog.cover_image}})"{{/if}}
{{/if}} {{/if}}
> >
<header class="read-next-card-header"> <header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3> <h3 class="read-next-card-header-title">Read more posts like this</h3>
</header> </header>
<div class="read-next-card-content"> <div class="read-next-divider">{{> "icons/infinity"}}</div>
<ol> <div class="read-next-card-content">
{{#foreach posts}} <ol>
<li><a href="{{url}}">{{title}}</a></li> {{#foreach posts}}
{{/foreach}} <li><a href="{{url}}">{{title}}</a></li>
</ol> {{/foreach}}
</div> </ol>
</article> </div>
</article>
{{/get}} {{/get}}
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
{{#next_post}} {{#next_post}}
<article class="post-card {{post_class}}"> {{> "post-card"}}
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/next_post}} {{/next_post}}
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
{{#prev_post}} {{#prev_post}}
<article class="post-card {{post_class}}"> {{> "post-card"}}
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div>
</a>
{{/if}}
<div class="post-card-content">
<a class="post-card-content-link" href="{{url}}">
<header class="post-card-header">
<h2 class="post-card-title">{{title}}</h2>
</header>
<section class="post-card-excerpt">
<p>{{excerpt words="28"}}</p>
</section>
</a>
<footer class="post-card-meta">
{{#if author_image}}<img class="author-thumb" src="{{author_image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</div>
</article>
{{/prev_post}} {{/prev_post}}
</div> </div>

10
tag.hbs
View File

@ -49,8 +49,14 @@
<main id="site-main" class="site-main outer" role="main"> <main id="site-main" class="site-main outer" role="main">
<div class="inner"> <div class="inner">
{{!-- The tag below includes the post loop - partials/loop.hbs --}} <div class="post-feed">
{{> "loop"}} {{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div> </div>
</main> </main>