snipette/weflock
snipette/weflock
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Whatever pass I lost count

Browse source
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;
--yellow: #fecd35;
--red: #f05230;
--darkgrey: #343f44;
--darkgrey: #15171A;
--midgrey: #738a94;
--lightgrey: #c5d2d9;
--whitegrey: #e5eff5;

52
assets/css/screen.css
View file

@ -72,7 +72,7 @@ body {
padding-top: 12px;
padding-bottom: 12px;
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;
}
@ -177,6 +177,14 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
flex-shrink: 0;
display: block;
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 {
@ -892,8 +900,8 @@ Super neat trick courtesy of @JoelDrapper
.read-next-feed {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
padding: 30px 0 0 0;
margin: 0 -20px;
padding: 40px 0 0 0;
}
.read-next-card {
@ -901,7 +909,7 @@ Super neat trick courtesy of @JoelDrapper
flex: 1 1 300px;
display: flex;
flex-direction: column;
margin: 0 15px 30px;
margin: 0 20px 40px;
padding: 25px;
color: #fff;
background: var(--darkgrey) center center;
@ -935,11 +943,23 @@ Super neat trick courtesy of @JoelDrapper
margin: 0;
font-size: 3rem;
line-height: 1.2em;
font-weight: 200;
font-weight: 300;
letter-spacing: 1px;
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 {
flex-grow: 1;
display: flex;
@ -948,31 +968,32 @@ Super neat trick courtesy of @JoelDrapper
font-size: 1.7rem;
}
.read-next-card-content a {
color: #fff;
}
.read-next-card-content ol {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin: 0;
padding: 0 0 0 2em;
margin: 0 auto;
padding: 0 1em 0 2em;
}
.read-next-card-content li {
padding-left: 5px;
margin: 20px 0;
font-size: 1.8rem;
line-height: 1.8rem;
line-height: 1.25em;
font-weight: 200;
}
.read-next-card-content li a {
display: inline-block;
vertical-align: top;
font-size: 1.6rem;
font-weight: 500;
font-weight: 600;
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;
font-size: 1.5rem;
line-height: 1.3em;
letter-spacing: -0.5px;
white-space: nowrap;
overflow: hidden;
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>
<section class="author-profile inner">
{{#if image}}
{{#if feature_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>
{{/if}}
<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">
<div class="inner">
{{!-- The tag below includes the post loop - partials/loop.hbs --}}
{{> "loop"}}
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</main>

10
page.hbs
View file

@ -61,3 +61,13 @@ into the {body} of the default.hbs template --}}
</main>
{{/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>

53
post.hbs
View file

@ -9,6 +9,8 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-left">
{{#if @blog.logo}}
<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 @blog.navigation}}
{{!-- The blog navigation links from /ghost/settings/design --}}
@ -148,6 +150,7 @@ into the {body} of the default.hbs template --}}
<header class="read-next-card-header">
<h3 class="read-next-card-header-title">Read more posts like this</h3>
</header>
<div class="read-next-divider">{{> "icons/infinity"}}</div>
<div class="read-next-card-content">
<ol>
{{#foreach posts}}
@ -158,56 +161,14 @@ into the {body} of the default.hbs template --}}
</article>
{{/get}}
{{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
{{#next_post}}
<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">
<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>
{{> "post-card"}}
{{/next_post}}
{{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
{{#prev_post}}
<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">
<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>
{{> "post-card"}}
{{/prev_post}}
</div>

10
tag.hbs
View file

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