Refactor
Splitting up files
This commit is contained in:
John O'Nolan
parent
ab990b71f1
commit
7c4eefd66b
10 changed files with 188 additions and 191 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
60
assets/css/components/errors.css
Normal file
60
assets/css/components/errors.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/* Error Templates
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-error {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: 2vmin;
|
||||
}
|
||||
|
||||
.gh-error-content {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-error-code {
|
||||
margin: 0;
|
||||
font-size: 14vmin;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.gh-error-link {
|
||||
display: block;
|
||||
margin-top: 4vmin;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-error-stack {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0;
|
||||
padding: 8vmin 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-error-stack-list {
|
||||
margin: 4vmin 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;
|
||||
}
|
||||
57
assets/css/components/footer.css
Normal file
57
assets/css/components/footer.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
/* Global Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8vmin 4vw;
|
||||
}
|
||||
|
||||
.gh-foot .gh-container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.gh-foot a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.gh-foot-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav li {
|
||||
margin: 0 1.5vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
.gh-foot-meta {
|
||||
margin: 2rem 0;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-foot-menu .nav {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
50
assets/css/components/readmore.css
Normal file
50
assets/css/components/readmore.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* Read More
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-readmore {
|
||||
padding: 8vmin 4vw;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.gh-readmore .gh-container {
|
||||
display: grid;
|
||||
grid-gap: 8vmin;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gh-readmore-prev {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-readmore a {
|
||||
display: flex;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-readmore h4 {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.gh-readmore svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 1em;
|
||||
margin: 0.15em 0 0;
|
||||
}
|
||||
|
||||
.gh-readmore svg + h4,
|
||||
.gh-readmore h4 + svg {
|
||||
margin-left: 2vmin;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-readmore {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.gh-readmore svg {
|
||||
margin: 0.1em 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,10 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
/* Ghost components */
|
||||
@import "components/header.css";
|
||||
@import "components/content.css";
|
||||
@import "components/readmore.css";
|
||||
@import "components/members.css";
|
||||
@import "components/errors.css";
|
||||
@import "components/footer.css";
|
||||
|
||||
/* Global components */
|
||||
@import "components/forms.css";
|
||||
|
|
@ -82,23 +85,23 @@ html,
|
|||
/* Index
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-postcard:not(:first-child) {
|
||||
.gh-card:not(:first-child) {
|
||||
margin: 8vmin auto 0;
|
||||
}
|
||||
|
||||
.gh-postcard-link {
|
||||
.gh-card-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-postcard-image {
|
||||
.gh-card-image {
|
||||
width: 100%;
|
||||
max-height: 700px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 4vmin;
|
||||
}
|
||||
|
||||
.gh-postcard-meta {
|
||||
.gh-card-meta {
|
||||
display: block;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.4rem;
|
||||
|
|
@ -108,18 +111,18 @@ html,
|
|||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.gh-postcard-content {
|
||||
.gh-card-content {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-postcard-content p {
|
||||
.gh-card-content p {
|
||||
margin: 1.2rem 0;
|
||||
padding: 0 4vw;
|
||||
}
|
||||
|
||||
.gh-postcard-content > strong {
|
||||
.gh-card-content > strong {
|
||||
display: inline-block;
|
||||
padding: 1px 0;
|
||||
font-weight: 500;
|
||||
|
|
@ -154,176 +157,3 @@ html,
|
|||
.gh-post-footer {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
|
||||
/* Read More
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-readmore {
|
||||
padding: 8vmin 4vw;
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
|
||||
.gh-readmore .gh-container {
|
||||
display: grid;
|
||||
grid-gap: 8vmin;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gh-readmore-prev {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.gh-readmore a {
|
||||
display: flex;
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gh-readmore h4 {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.gh-readmore svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 1em;
|
||||
margin: 0.15em 0 0;
|
||||
}
|
||||
|
||||
.gh-readmore svg + h4,
|
||||
.gh-readmore h4 + svg {
|
||||
margin-left: 2vmin;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-readmore {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.gh-readmore svg {
|
||||
margin: 0.1em 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Errors
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-error {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-bottom: 2vmin;
|
||||
}
|
||||
|
||||
.gh-error-content {
|
||||
flex: 1 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-error-code {
|
||||
margin: 0;
|
||||
font-size: 14vmin;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.gh-error-link {
|
||||
display: block;
|
||||
margin-top: 4vmin;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-error-stack {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0;
|
||||
padding: 8vmin 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-error-stack-list {
|
||||
margin: 4vmin 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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8vmin 4vw;
|
||||
}
|
||||
|
||||
.gh-foot .gh-container {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.gh-foot a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.gh-foot-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav li {
|
||||
margin: 0 1.5vmin;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-foot-menu .nav a {
|
||||
display: inline-block;
|
||||
padding: 3px 0;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
.gh-foot-meta {
|
||||
margin: 2rem 0;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.gh-foot-menu .nav {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "postcard"}} {{!-- partials/post-card.hbs --}}
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="gh-postfeed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "postcard"}} {{!-- partials/postcard.hbs --}}
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
Re-usable card for linking to posts
|
||||
--}}
|
||||
|
||||
<article class="gh-postcard {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
|
||||
<a class="gh-postcard-link" href="{{url}}">
|
||||
<article class="gh-card {{post_class}} {{#if feature_image}}with-image{{else}}no-image{{/if}}">
|
||||
<a class="gh-card-link" href="{{url}}">
|
||||
{{#if feature_image}}
|
||||
<img class="gh-postcard-image"
|
||||
<img class="gh-card-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="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>
|
||||
<div class="gh-card-content">
|
||||
<span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span>
|
||||
<h2 class="gh-card-title">{{title}}</h2>
|
||||
<p>{{excerpt}}</p>
|
||||
<strong>Read more</strong>
|
||||
</div>
|
||||
2
tag.hbs
2
tag.hbs
|
|
@ -19,7 +19,7 @@
|
|||
<div class="post-feed">
|
||||
{{#foreach posts}}
|
||||
|
||||
{{> "postcard"}} {{!-- partials/post-card.hbs --}}
|
||||
{{> "card"}} {{!-- partials/card.hbs --}}
|
||||
|
||||
{{/foreach}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue