peterkrzyzek/ghost_leaders_theme
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Refactor

Browse source
This commit is contained in:
John O'Nolan 2019-11-15 00:02:57 +07:00
parent f14ac2385a
commit 88a76fd2e6
11 changed files with 96 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/built/screen.css
View file

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View file

File diff suppressed because one or more lines are too long

64
assets/css/screen.css
View file

@ -74,42 +74,44 @@ html,
/* Index /* Index
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-card { .gh-postcard {
margin: 0 auto 6vw; margin: 0 auto 6vw;
} }
.post-card-link { .gh-postcard-link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.post-card-image { .gh-postcard-image {
width: 100%; width: 100%;
max-height: 700px; max-height: 700px;
object-fit: cover; object-fit: cover;
margin-bottom: 2vw; margin-bottom: 2vw;
} }
.post-card-meta { .gh-postcard-meta {
display: block; display: block;
margin: 0 0 1rem; margin: 0 0 1rem;
font-size: 1.3rem; font-size: 1.4rem;
line-height: 1.2em;
letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
opacity: 0.8; opacity: 0.8;
} }
.post-card-content { .gh-postcard-content {
max-width: 720px; max-width: 720px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.post-card-content p { .gh-postcard-content p {
margin: 1rem 0; margin: 1.2rem 0;
padding: 0 4vw; padding: 0 4vw;
} }
.post-card-content > strong { .gh-postcard-content > strong {
display: inline-block; display: inline-block;
padding: 1px 0; padding: 1px 0;
font-weight: 500; font-weight: 500;
@ -122,16 +124,24 @@ html,
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-header { .gh-header {
margin: 4vw 0 0;
padding: 0 0 4vw 0; padding: 0 0 4vw 0;
text-align: center;
} }
.gh-title { .gh-post-meta {
margin-top: 4vw; display: block;
margin: 0 0 1rem;
font-size: 1.4rem;
letter-spacing: 0.5px;
text-transform: uppercase;
opacity: 0.8;
} }
.gh-image { .gh-feature-image {
grid-column: full-start / full-end; grid-column: wide-start / wide-end;
width: 100%; width: 100%;
margin: 4vw 0 0;
} }
.gh-post-footer { .gh-post-footer {
@ -160,7 +170,11 @@ html,
} }
.gh-error-description { .gh-error-description {
max-width: 600px;
margin: 0 auto;
padding: 0 2rem;
font-size: 4vmin; font-size: 4vmin;
line-height: 1.2em;
font-weight: 300; font-weight: 300;
opacity: 0.6; opacity: 0.6;
} }
@ -171,6 +185,30 @@ html,
font-size: 1.6rem; font-size: 1.6rem;
} }
.gh-error-stack {
max-width: 600px;
margin: 0 auto 0;
padding: 4vw 0;
text-align: left;
}
.gh-error-stack-list {
margin: 2vw 0 0;
font-size: 1.4rem;
}
.gh-error-stack-list > li {
padding: 2rem 0;
margin: 0;
border-top: rgba(0,0,0,0.1) 1px solid;
}
.gh-error-stack-function {
margin: 0 0 0.5em;
font-size: 1.8rem;
color: red;
}
/* Footer /* Footer
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

2
author.hbs
View file

@ -32,7 +32,7 @@
<div class="post-feed"> <div class="post-feed">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{!-- partials/post-card.hbs --}} {{> "postcard"}} {{!-- partials/post-card.hbs --}}
{{/foreach}} {{/foreach}}
</div> </div>

13
error-404.hbs
View file

@ -1,13 +0,0 @@
{{!< default}}
<section class="gh-page gh-error">
<div class="gh-container">
<section class="gh-error-content">
<h1 class="gh-error-code">{{statusCode}}</h1>
<p class="gh-error-description">{{message}}</p>
<p class="gh-error-link"><a href="{{@site.url}}">Go to the front page →</a></p>
</section>
</div>
</section>

78
error.hbs
View file

@ -1,64 +1,34 @@
{{!--
This error template is used for all server errors except 404, which has a custom template. {{!< default}}
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
--}} <section class="gh-page gh-error">
<!DOCTYPE html> <div class="gh-container">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{meta_title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
</head>
<body class="error-template">
<div class="site-wrapper">
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}"> <section class="gh-error-content">
<div class="inner">
<nav class="site-nav-center">
{{#if @site.logo}}
<a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
{{else}}
<a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
{{/if}}
</nav>
</div>
</header>
<main id="site-main" class="site-main outer"> <h1 class="gh-error-code">{{statusCode}}</h1>
<div class="inner"> <p class="gh-error-description">{{message}}</p>
<p class="gh-error-link"><a href="{{@site.url}}">Go to the front page →</a></p>
<section class="error-message"> {{#if errorDetails}}
<h1 class="error-code">{{statusCode}}</h1> <section class="gh-error-stack">
<p class="error-description">{{message}}</p> <h4>Theme errors:</h4>
<a class="error-link" href="{{@site.url}}">Go to the front page →</a> <ul class="gh-error-stack-list">
</section> {{#foreach errorDetails}}
<li>
<h5 class="gh-error-stack-function">{{{rule}}}</h5>
{{#if errorDetails}} {{#foreach failures}}
<section class="error-stack"> <span class="gh-error-stack-file"><strong>Ref:</strong> {{ref}}</span><br>
<h3>Theme errors</h3> <span class="gh-error-stack-file"><strong>Message:</strong> {{message}}</span>
<ul class="error-stack-list">
{{#foreach errorDetails}}
<li>
<em class="error-stack-function">{{{rule}}}</em>
{{#foreach failures}}
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
<p><span class="error-stack-file">Message: {{message}}</span></p>
{{/foreach}}
</li>
{{/foreach}} {{/foreach}}
</ul> </li>
</section> {{/foreach}}
{{/if}} </ul>
</section>
{{/if}}
</div> </section>
</main>
</div> </div>
</body> </section>
</html>

2
index.hbs
View file

@ -6,7 +6,7 @@
<div class="post-feed"> <div class="post-feed">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{!-- partials/post-card.hbs --}} {{> "postcard"}} {{!-- partials/post-card.hbs --}}
{{/foreach}} {{/foreach}}
</div> </div>

8
page.hbs
View file

@ -5,15 +5,15 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="gh-header gh-canvas"> <header class="gh-header gh-canvas">
{{#if feature_image}}
<img class="gh-image" src="{{feature_image}}" alt="{{title}}" />
{{/if}}
<h1 class="gh-title">{{title}}</h1> <h1 class="gh-title">{{title}}</h1>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<p class="gh-excerpt">{{custom_excerpt}}</p> <p class="gh-excerpt">{{custom_excerpt}}</p>
{{/if}} {{/if}}
{{#if feature_image}}
<img class="gh-feature-image" src="{{feature_image}}" alt="{{title}}" />
{{/if}}
</header> </header>
<div class="gh-content gh-canvas"> <div class="gh-content gh-canvas">

12
partials/post-card.hbs → partials/postcard.hbs
View file

@ -2,10 +2,10 @@
Re-usable card for linking to posts Re-usable card for linking to posts
--}} --}}
<article class="post-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}"> <article class="gh-postcard {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
<a class="post-card-link" href="{{url}}"> <a class="gh-postcard-link" href="{{url}}">
{{#if feature_image}} {{#if feature_image}}
<img class="post-card-image" <img class="gh-postcard-image"
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 300w,
{{img_url feature_image size="m"}} 600w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="l"}} 1000w,
@ -15,9 +15,9 @@ Re-usable card for linking to posts
alt="{{title}}" alt="{{title}}"
/> />
{{/if}} {{/if}}
<div class="post-card-content"> <div class="gh-postcard-content">
<span class="post-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span> <span class="gh-postcard-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
<h2 class="post-card-title">{{title}}</h2> <h2 class="gh-postcard-title">{{title}}</h2>
<p>{{excerpt}}</p> <p>{{excerpt}}</p>
<strong>Read more</strong> <strong>Read more</strong>
</div> </div>

11
post.hbs
View file

@ -4,14 +4,15 @@
<article class="{{post_class}}"> <article class="{{post_class}}">
<header class="gh-header gh-canvas"> <header class="gh-header gh-canvas">
{{#if feature_image}} <span class="gh-post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
<img class="gh-image" src="{{feature_image}}" alt="{{title}}" />
{{/if}}
<h1 class="gh-title">{{title}}</h1> <h1 class="gh-title">{{title}}</h1>
{{#if custom_excerpt}} {{#if custom_excerpt}}
<p class="gh-excerpt">{{custom_excerpt}}</p> <p class="gh-excerpt">{{custom_excerpt}}</p>
{{/if}}
{{#if feature_image}}
<img class="gh-feature-image" src="{{feature_image}}" alt="{{title}}" />
{{/if}} {{/if}}
</header> </header>

2
tag.hbs
View file

@ -19,7 +19,7 @@
<div class="post-feed"> <div class="post-feed">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{!-- partials/post-card.hbs --}} {{> "postcard"}} {{!-- partials/post-card.hbs --}}
{{/foreach}} {{/foreach}}
</div> </div>