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

New error template and author template

Browse source
This commit is contained in:
John O'Nolan 2017-06-13 13:48:06 +01:00
parent 55f35da8e9
commit 655c35b53c
12 changed files with 276 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

160
assets/css/screen.css
View file

@ -3,7 +3,7 @@
@import "components/global.css";
body {
background: #F4F8FB;
background: #f4f8fb;
}
.img {
@ -53,7 +53,8 @@ body {
@media (min-width: 900px) {
.home-template .post-feed,
.tag-template .post-feed {
.tag-template .post-feed,
.author-template .post-feed {
margin-top: -100px;
}
.home-template .site-nav {
@ -92,12 +93,13 @@ body {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
bottom: auto;
left: 0;
z-index: 10;
height: 60px;
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3));
height: 80px;
background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
}
.site-header.no-cover:before,
@ -111,6 +113,7 @@ body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10vw 0;
min-height: 200px;
max-height: 450px;
@ -260,6 +263,18 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
height: 1.5rem;
}
.social-link-wb svg {
height: 1.6rem;
}
.social-link-wb svg path {
stroke: #fff;
}
.social-link-rss svg {
height: 1.9rem;
}
.subscribe-button {
display: block;
padding: 4px 10px;
@ -433,22 +448,11 @@ The first (most recent) post in the list is styled to be bigger than the others
padding: 0 40px 30px;
}
/* Special Styling for Subscribe box
We've got a special subscribe box, this allows it to appear in the middle of the loop of posts without actually needing to interrupt the loop. Neat trickery courtesy of David Darnes.
.post-card:nth-of-type(2),
.post-card:nth-of-type(3) {
order: -1;
}
*/
}
.home-template .site-header:after {
display: none;
}
@ -490,6 +494,7 @@ The first (most recent) post in the list is styled to be bigger than the others
}
.post-full-title {
margin: 0;
color: color(var(--darkgrey) l(-5%));
}
@ -500,7 +505,7 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-image {
height: 800px;
margin: -5vw -10vw -165px;
margin: 0 -10vw -165px;
background: var(--lightgrey) center center;
background-size: cover;
border-radius: 5px;
@ -509,7 +514,7 @@ The first (most recent) post in the list is styled to be bigger than the others
@media (max-width: 1170px) {
.post-full-image {
height: 600px;
margin: -5vw -4vw -100px;
margin: 0 -4vw -100px;
border-radius: 0;
}
}
@ -564,6 +569,10 @@ The first (most recent) post in the list is styled to be bigger than the others
filter: blur(5px);
}
.no-image .post-full-content {
padding-top: 0;
}
.no-image .post-full-content:before,
.no-image .post-full-content:after {
display: none;
@ -949,6 +958,7 @@ Super neat trick courtesy of @JoelDrapper
}
.read-next-divider {
position: relative;
display: flex;
justify-content: center;
height: 80px;
@ -957,6 +967,7 @@ Super neat trick courtesy of @JoelDrapper
.read-next-divider svg {
width: 50px;
stroke: #fff;
stroke-opacity: 0.65;
fill: transparent;
}
@ -1203,3 +1214,108 @@ Super neat trick courtesy of @JoelDrapper
@media (max-width: 450px) {
.floating-header-share-label { display: none; }
}
/* ==========================================================================
Author Template / author.hbs
========================================================================== */
.site-header-content .author-profile-image {
flex-shrink: 0;
width: 100px;
height: 100px;
margin: 0 0 20px 0;
box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
}
.site-header-content .author-bio {
flex-shrink: 0;
max-width: 600px;
margin: 5px 0 10px 0;
font-size: 2rem;
line-height: 1.3em;
font-weight: 300;
letter-spacing: 0.5px;
opacity: 0.8;
}
.site-header-content .author-meta {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 10px 0;
font-family: Georgia, serif;
font-style: italic;
}
.site-header-content .author-location svg {
height: 1.9rem;
stroke: #fff;
}
.site-header-content .bull {
display: inline-block;
margin: 0 12px;
opacity: 0.5;
}
.site-header-content .social-link:first-of-type {
padding-left: 4px;
}
/* ==========================================================================
Error Template / error.hbs
========================================================================== */
.error-template .site-main {
padding: 7vw 4vw;
}
.site-nav-center {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.site-nav-center .site-nav-logo {
margin-right: 0;
}
.error-message {
text-align: center;
}
.error-code {
margin: 0;
font-size: 12vw;
line-height: 1em;
letter-spacing: -5px;
opacity: 0.3;
}
.error-description {
margin: 0;
font-size: 3rem;
line-height: 1.3em;
font-weight: 400;
color: var(--midgrey);
}
@media (max-width: 800px) {
.error-description {
margin: 5px 0 0 0;
font-size: 1.8rem;
}
}
.error-link {
display: inline-block;
margin-top: 5px;
}
.error-template .post-feed {
padding-top: 0;
}

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

76
author.hbs
View file

@ -5,37 +5,77 @@
{{!-- Everything inside the #author tags pulls data from the author --}}
{{#author}}
<header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
<nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<nav class="site-nav">
<div class="site-nav-left">
{{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
{{/if}}
{{#if @blog.navigation}}
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{!-- The blog navigation links from /ghost/settings/design --}}
{{navigation}}
{{/if}}
</div>
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}
<a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
{{else}}
<a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank">{{> "icons/rss"}}</a>
{{/if}}
</div>
</nav>
</header>
<section class="author-profile inner">
{{#if feature_image}}
<figure class="author-image">
<div class="img" style="background-image: url({{feature_image}})"><span class="hidden">{{name}}'s Picture</span></div>
</figure>
<div class="site-header-content">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<h1 class="author-title">{{name}}</h1>
<h1 class="site-title">{{name}}</h1>
{{#if bio}}
<h2 class="author-bio">{{bio}}</h2>
{{/if}}
<div class="author-meta">
{{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
{{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
<span class="author-stats"><i class="icon-stats"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
{{#if location}}
<div class="author-location">{{location}} <span class="bull">&bull;</span></div>
{{/if}}
<div class="author-stats">
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">&bull;</span>
</div>
</section>
{{#if website}}
<a class="social-link social-link-wb" href="{{website}}" target="_blank">{{> "icons/website"}}</a>
{{/if}}
{{#if twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
{{#if facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
<a class="social-link social-link-rss" href="http://cloud.feedly.com/#subscription/feed/{{url absolute="true"}}rss/" target="_blank">{{> "icons/rss"}}</a>
</div>
</div>
</div>
</header>
{{/author}}
{{!-- The main content area on the homepage --}}
<main class="content" 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>

4
default.hbs
View file

@ -31,8 +31,8 @@
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
<nav class="site-footer-nav">
<a href="{{@blog.url}}">Latest Posts</a>
{{#if @blog.facebook}}<a href="{{facebook_url}}" target="_blank">Facebook</a>{{/if}}
{{#if @blog.twitter}}<a href="{{twitter_url}}" target="_blank">Twitter</a>{{/if}}
{{#if @blog.facebook}}<a href="{{facebook_url @blog.facebook}}" target="_blank">Facebook</a>{{/if}}
{{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank">Twitter</a>{{/if}}
<a href="https://ghost.org" target="_blank">Ghost</a>
</nav>
</div>

63
error.hbs
View file

@ -8,11 +8,66 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "assets/public/screen.css"}}" />
</head>
<body class="{{body_class}}">
<body class="error-template">
<div class="site-wrapper">
ERROR
</div>
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
<div class="inner">
<nav class="site-nav-center">
{{#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}}
</nav>
</div>
</header>
{{!-- The main content area --}}
<main id="site-main" class="site-main outer" role="main">
<div class="inner">
<section class="error-message">
<h1 class="error-code">{{code}}</h1>
<p class="error-description">{{message}}</p>
<a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
</section>
{{#if errorDetails}}
<section class="error-stack">
<h3>Theme errors</h3>
<ul class="error-stack-list">
{{#each errorDetails}}
<li>
<em class="error-stack-function">{{{rule}}}</em>
{{#each failures}}
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
<p><span class="error-stack-file">Message: {{message}}</span></p>
{{/each}}
</li>
{{/each}}
</ul>
</section>
{{/if}}
</div>
</main>
{{#get "posts" limit="3"}}
<aside class="outer">
<div class="inner">
<div class="post-feed">
{{#foreach posts}}
{{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
{{> "post-card"}}
{{/foreach}}
</div>
</div>
</aside>
{{/get}}
</div>
</body>
</html>

4
index.hbs
View file

@ -25,10 +25,10 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}

4
page.hbs
View file

@ -18,10 +18,10 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}

1
partials/icons/location.hbs Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 329 B

1
partials/icons/website.hbs Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 413 B

4
post.hbs
View file

@ -20,10 +20,10 @@ into the {body} of the default.hbs template --}}
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}

4
tag.hbs
View file

@ -18,10 +18,10 @@
<div class="site-nav-right">
<div class="social-links">
{{#if @blog.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank">{{> "icons/facebook"}}</a>
<a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @blog.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank">{{> "icons/twitter"}}</a>
<a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank">{{> "icons/twitter"}}</a>
{{/if}}
</div>
{{#if @labs.subscribers}}