Whatever pass I lost count
This commit is contained in:
parent
d55446f2ca
commit
55f35da8e9
12 changed files with 121 additions and 125 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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
10
index.hbs
|
@ -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
10
page.hbs
|
@ -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
1
partials/icons/infinity.hbs
Normal 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>
|
After Width: | Height: | Size: 196 B |
|
@ -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
26
partials/post-card.hbs
Normal 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
91
post.hbs
|
@ -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
10
tag.hbs
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue