Skip to content

Commit

Permalink
Add support for Ghost editor cards and author boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnONolan
JohnONolan committed Nov 30, 2018
1 parent ce4dd1b commit 4021276
Show file tree
Hide file tree
Showing 3 changed files with 230 additions and 24 deletions.
2 changes: 1 addition & 1 deletion assets/main/css/main.css
View file

Large diffs are not rendered by default.

209 changes: 198 additions & 11 deletions assets/main/sass/layout/_ghost.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,11 @@
transform: none !important;
}

.content {
max-width: 700px;
margin: 0 auto;
}

// Pagination
// --------------------------------------------

Expand All @@ -44,17 +49,8 @@
width: 160px;
}

// Content
// --------------------------------------------

// Adjustment for line length
.content {
max-width: 700px;
margin: 0 auto;
}


// Tags
// Tag Archive
// --------------------------------------------

.tag-header,
Expand All @@ -63,7 +59,7 @@
}


// Authors
// Author Archive
// --------------------------------------------

.author-header {
Expand Down Expand Up @@ -103,3 +99,194 @@
margin-right: 10px;
}

// Author Box
// --------------------------------------------

.post-footer {
margin: 4rem auto 0;
max-width: 700px;
}

.authors {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 -40px;
}

.author-box {
flex: 1 1 300px;
display: inline-flex;
align-items: flex-start;
padding: 5px 20px;
margin: 0 20px 20px;
border: none;
}

.author-box:hover {
color: #212931 !important;
}

.author-box:hover .author-box-name {
color: #18bfef;
transition: color 0.2s ease;
}

.author-box .author-profile-image {
height: 60px;
width: 60px;
margin-right: 20px;
}

.author-box-content {
display: flex;
flex-direction: column;
}

.author-box-label {
font-family: _font(family-heading);
font-size: 0.7rem;
line-height: 1em;
font-weight: 300;
text-transform: uppercase;
color: #999;
}

.author-box-name {
margin: 3px 0;
font-size: 1.3rem;
line-height: 1.2em;
transition: color 0.5s ease;
}

.author-box p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5em;
}

.kg-image {
max-width: 100%;
}

// Content
// --------------------------------------------

.kg-card {
margin: 0 0 2rem 0;
}

.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100%;
}

.kg-image {
max-width: 100%;
}

.kg-card figcaption {
font-size: 0.8rem;
line-height: 1.4em;
text-align: center;
}

.kg-width-wide {
position: relative;
margin-left: -6rem;
margin-right: -6rem;
width: calc(100% + 12rem);

@include breakpoint('<=large') {
margin-left: -4rem;
margin-right: -4rem;
width: calc(100% + 8rem);
}
@include breakpoint('<=medium') {
margin-left: -2rem;
margin-right: -2rem;
width: calc(100% + 4rem);
}
@include breakpoint('<=small') {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}

.kg-width-full {
position: relative;
margin-left: -14.1rem;
margin-right: -14.1rem;
width: calc(100% + 28.2rem);

@include breakpoint('<=large') {
margin-left: -8rem;
margin-right: -8rem;
width: calc(100% + 16rem);
}
@include breakpoint('<=medium') {
margin-left: -4rem;
margin-right: -4rem;
width: calc(100% + 8rem);
}
@include breakpoint('<=small') {
margin-left: -2rem;
margin-right: -2rem;
width: calc(100% + 4rem);
}
}

.kg-gallery-container {
display: flex;
flex-direction: column;
margin-left: -6rem;
margin-right: -6rem;
width: calc(100% + 12rem);

@include breakpoint('<=large') {
margin-left: -4rem;
margin-right: -4rem;
width: calc(100% + 8rem);
}
@include breakpoint('<=medium') {
margin-left: -2rem;
margin-right: -2rem;
width: calc(100% + 4rem);
}
@include breakpoint('<=small') {
margin-left: 0;
margin-right: 0;
width: 100%;
}
}

.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}

.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
margin: 0.75em 0 0 0;
}

.kg-gallery-image:not(:first-of-type) {
margin: 0 0 0 0.75em;
}

.kg-gallery-card + .kg-image-card.kg-width-wide,
.kg-gallery-card + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-gallery-card,
.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
margin: -2.25em 0 3em;
}
43 changes: 31 additions & 12 deletions post.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,26 @@ into the {body} of the default.hbs template --}}
</section>
{{/if}}

<footer class="post-full-footer">
<footer class="post-footer">

{{!-- There are two options for how we display the byline/author-info.
If the post has more than one author, we load a specific template
from includes/byline-multiple.hbs, otherwise, we just use the
default byline. --}}

{{#has author="count:>1"}}
{{> "byline-multiple"}}
{{else}}
{{> "byline-single"}}
{{/has}}
<div class="authors">
{{#foreach authors}}
<a class="author-box" href="{{url}}">
{{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
{{/if}}
<section class="author-box-content">
<div class="author-box-label">Author</div>
<h5 class="author-box-name">{{name}}</h5>
{{#if bio}}
<p>{{bio}}</p>
{{else}}
<p>Read more posts by this author.</p>
{{/if}}
</section>
</a>
{{/foreach}}
</div>

</footer>

Expand All @@ -58,4 +66,15 @@ into the {body} of the default.hbs template --}}

</main>

{{/post}}
{{/post}}

<script>
var images = document.querySelectorAll('.kg-gallery-image img');
images.forEach(function (image) {
var container = image.closest('.kg-gallery-image');
var width = image.attributes.width.value;
var height = image.attributes.height.value;
var ratio = width / height;
container.style.flex = ratio + ' 1 0%';
})
</script>

0 comments on commit 4021276

Please sign in to comment.