Refactor
This commit is contained in:
John O'Nolan
parent
f14ac2385a
commit
88a76fd2e6
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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue