Refactor
This commit is contained in:
John O'Nolan
parent
f14ac2385a
commit
88a76fd2e6
11 changed files with 96 additions and 100 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -74,42 +74,44 @@ html,
|
|||
/* Index
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.post-card {
|
||||
.gh-postcard {
|
||||
margin: 0 auto 6vw;
|
||||
}
|
||||
|
||||
.post-card-link {
|
||||
.gh-postcard-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-card-image {
|
||||
.gh-postcard-image {
|
||||
width: 100%;
|
||||
max-height: 700px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
.post-card-meta {
|
||||
.gh-postcard-meta {
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.post-card-content {
|
||||
.gh-postcard-content {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post-card-content p {
|
||||
margin: 1rem 0;
|
||||
.gh-postcard-content p {
|
||||
margin: 1.2rem 0;
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
.post-card-content > strong {
|
||||
.gh-postcard-content > strong {
|
||||
display: inline-block;
|
||||
padding: 1px 0;
|
||||
font-weight: 500;
|
||||
|
|
@ -122,16 +124,24 @@ html,
|
|||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-header {
|
||||
margin: 4vw 0 0;
|
||||
padding: 0 0 4vw 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-title {
|
||||
margin-top: 4vw;
|
||||
.gh-post-meta {
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gh-image {
|
||||
grid-column: full-start / full-end;
|
||||
.gh-feature-image {
|
||||
grid-column: wide-start / wide-end;
|
||||
width: 100%;
|
||||
margin: 4vw 0 0;
|
||||
}
|
||||
|
||||
.gh-post-footer {
|
||||
|
|
@ -160,7 +170,11 @@ html,
|
|||
}
|
||||
|
||||
.gh-error-description {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
font-size: 4vmin;
|
||||
line-height: 1.2em;
|
||||
font-weight: 300;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
@ -171,6 +185,30 @@ html,
|
|||
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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
{{> "postcard"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
78
error.hbs
|
|
@ -1,64 +1,34 @@
|
|||
{{!--
|
||||
|
||||
This error template is used for all server errors except 404, which has a custom template.
|
||||
It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
|
||||
{{!< default}}
|
||||
|
||||
--}}
|
||||
<!DOCTYPE html>
|
||||
<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">
|
||||
<section class="gh-page gh-error">
|
||||
<div class="gh-container">
|
||||
|
||||
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
|
||||
<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>
|
||||
<section class="gh-error-content">
|
||||
|
||||
<main id="site-main" class="site-main outer">
|
||||
<div class="inner">
|
||||
<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 class="error-message">
|
||||
<h1 class="error-code">{{statusCode}}</h1>
|
||||
<p class="error-description">{{message}}</p>
|
||||
<a class="error-link" href="{{@site.url}}">Go to the front page →</a>
|
||||
</section>
|
||||
{{#if errorDetails}}
|
||||
<section class="gh-error-stack">
|
||||
<h4>Theme errors:</h4>
|
||||
<ul class="gh-error-stack-list">
|
||||
{{#foreach errorDetails}}
|
||||
<li>
|
||||
<h5 class="gh-error-stack-function">{{{rule}}}</h5>
|
||||
|
||||
{{#if errorDetails}}
|
||||
<section class="error-stack">
|
||||
<h3>Theme errors</h3>
|
||||
<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 failures}}
|
||||
<span class="gh-error-stack-file"><strong>Ref:</strong> {{ref}}</span><br>
|
||||
<span class="gh-error-stack-file"><strong>Message:</strong> {{message}}</span>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</section>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
{{> "postcard"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
8
page.hbs
8
page.hbs
|
|
@ -5,15 +5,15 @@
|
|||
<article class="{{post_class}}">
|
||||
|
||||
<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>
|
||||
|
||||
{{#if custom_excerpt}}
|
||||
<p class="gh-excerpt">{{custom_excerpt}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if feature_image}}
|
||||
<img class="gh-feature-image" src="{{feature_image}}" alt="{{title}}" />
|
||||
{{/if}}
|
||||
</header>
|
||||
|
||||
<div class="gh-content gh-canvas">
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
Re-usable card for linking to posts
|
||||
--}}
|
||||
|
||||
<article class="post-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
|
||||
<a class="post-card-link" href="{{url}}">
|
||||
<article class="gh-postcard {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
|
||||
<a class="gh-postcard-link" href="{{url}}">
|
||||
{{#if feature_image}}
|
||||
<img class="post-card-image"
|
||||
<img class="gh-postcard-image"
|
||||
srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
|
|
@ -15,9 +15,9 @@ Re-usable card for linking to posts
|
|||
alt="{{title}}"
|
||||
/>
|
||||
{{/if}}
|
||||
<div class="post-card-content">
|
||||
<span class="post-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h2 class="post-card-title">{{title}}</h2>
|
||||
<div class="gh-postcard-content">
|
||||
<span class="gh-postcard-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h2 class="gh-postcard-title">{{title}}</h2>
|
||||
<p>{{excerpt}}</p>
|
||||
<strong>Read more</strong>
|
||||
</div>
|
||||
11
post.hbs
11
post.hbs
|
|
@ -4,14 +4,15 @@
|
|||
<article class="{{post_class}}">
|
||||
|
||||
<header class="gh-header gh-canvas">
|
||||
{{#if feature_image}}
|
||||
<img class="gh-image" src="{{feature_image}}" alt="{{title}}" />
|
||||
{{/if}}
|
||||
|
||||
<span class="gh-post-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h1 class="gh-title">{{title}}</h1>
|
||||
|
||||
{{#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}}
|
||||
</header>
|
||||
|
||||
|
|
|
|||
2
tag.hbs
2
tag.hbs
|
|
@ -19,7 +19,7 @@
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "post-card"}} {{!-- partials/post-card.hbs --}}
|
||||
{{> "postcard"}} {{!-- partials/post-card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue