mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
Whatever pass I lost count
This commit is contained in:
John O'Nolan
parent
d55446f2ca
commit
55f35da8e9
@ -8,7 +8,7 @@
|
||||
--purple: #ad26b4;
|
||||
--yellow: #fecd35;
|
||||
--red: #f05230;
|
||||
--darkgrey: #343f44;
|
||||
--darkgrey: #15171A;
|
||||
--midgrey: #738a94;
|
||||
--lightgrey: #c5d2d9;
|
||||
--whitegrey: #e5eff5;
|
||||
|
||||
@ -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;
|
||||
|
||||
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>
|
||||
|
||||
<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
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">
|
||||
<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
10
page.hbs
@ -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
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">
|
||||
{{#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 --}}
|
||||
@ -137,77 +139,36 @@ into the {body} of the default.hbs template --}}
|
||||
<div class="read-next-feed">
|
||||
|
||||
{{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
|
||||
<article class="read-next-card"
|
||||
{{#if ../tags.[0].feature_image}}
|
||||
style="background-image: url({{../tags.[0].feature_image}})"
|
||||
{{else}}
|
||||
{{#if @blog.cover_image}}
|
||||
style="background-image: url({{@blog.cover_image}})"{{/if}}
|
||||
{{/if}}
|
||||
>
|
||||
<header class="read-next-card-header">
|
||||
<h3 class="read-next-card-header-title">Read more posts like this</h3>
|
||||
</header>
|
||||
<div class="read-next-card-content">
|
||||
<ol>
|
||||
{{#foreach posts}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
</ol>
|
||||
</div>
|
||||
</article>
|
||||
<article class="read-next-card"
|
||||
{{#if ../tags.[0].feature_image}}
|
||||
style="background-image: url({{../tags.[0].feature_image}})"
|
||||
{{else}}
|
||||
{{#if @blog.cover_image}}
|
||||
style="background-image: url({{@blog.cover_image}})"{{/if}}
|
||||
{{/if}}
|
||||
>
|
||||
<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}}
|
||||
<li><a href="{{url}}">{{title}}</a></li>
|
||||
{{/foreach}}
|
||||
</ol>
|
||||
</div>
|
||||
</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
10
tag.hbs
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user