mirror of
https://github.com/ViViDboarder/Vivid-Casper.git
synced 2024-12-22 11:37:38 +00:00
New error template and author template
This commit is contained in:
John O'Nolan
parent
55f35da8e9
commit
655c35b53c
@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
90
author.hbs
90
author.hbs
@ -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}}
|
||||
{{#if @blog.navigation}}
|
||||
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></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}}
|
||||
{{!-- 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>
|
||||
{{/if}}
|
||||
<h1 class="author-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>
|
||||
<div class="site-header-content">
|
||||
{{#if profile_image}}
|
||||
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
{{/if}}
|
||||
<h1 class="site-title">{{name}}</h1>
|
||||
{{#if bio}}
|
||||
<h2 class="author-bio">{{bio}}</h2>
|
||||
{{/if}}
|
||||
<div class="author-meta">
|
||||
{{#if location}}
|
||||
<div class="author-location">{{location}} <span class="bull">•</span></div>
|
||||
{{/if}}
|
||||
<div class="author-stats">
|
||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">•</span>
|
||||
</div>
|
||||
{{#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>
|
||||
</section>
|
||||
</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>
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
<section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> © {{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
63
error.hbs
@ -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>
|
||||
|
||||
@ -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
4
page.hbs
@ -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
1
partials/icons/location.hbs
Normal 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>
|
||||
|
After Width: | Height: | Size: 329 B |
1
partials/icons/website.hbs
Normal file
1
partials/icons/website.hbs
Normal 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>
|
||||
|
After Width: | Height: | Size: 413 B |
4
post.hbs
4
post.hbs
@ -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
4
tag.hbs
@ -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}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user