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

Refactor 

Splitting up files
This commit is contained in:
John O'Nolan 2019-11-17 17:09:01 +07:00
parent ab990b71f1
commit 7c4eefd66b
10 changed files with 188 additions and 191 deletions
Show Stats 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

60
assets/css/components/errors.css Normal file
View 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
View 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
View 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;
}
}

190
assets/css/screen.css
View File

@ -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;
}
}

2
author.hbs
View File

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

2
index.hbs
View File

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

12
partials/postcard.hbs → partials/card.hbs
View File

@ -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">&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">&bull;</span> {{reading_time}}</span>
<h2 class="gh-card-title">{{title}}</h2>
<p>{{excerpt}}</p>
<strong>Read more</strong>
</div>

2
tag.hbs
View File

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