24d2d40b61
These changes slightly restyle the post metadata to make better use of Flexbox's gap feature, simplifying metadata spacing at different viewport widths.
79 lines
3.5 KiB
Handlebars
79 lines
3.5 KiB
Handlebars
{{!< default}}
|
|
|
|
<main class="gh-main gh-outer">
|
|
<div class="gh-inner">
|
|
{{#post}}
|
|
<article class="gh-article {{post_class}}">
|
|
{{#if feature_image}}
|
|
<header class="gh-article-header gh-canvas">
|
|
<h1 class="gh-article-title">{{title}}</h1>
|
|
{{#if custom_excerpt}}
|
|
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
|
|
{{/if}}
|
|
{{> "feature-image"}}
|
|
</header>
|
|
{{/if}}
|
|
|
|
<section class="gh-content gh-canvas">
|
|
{{content}}
|
|
{{#unless feature_image}}
|
|
<header class="gh-article-header">
|
|
<h1 class="gh-article-title">{{title}}</h1>
|
|
{{#if custom_excerpt}}
|
|
<p class="gh-article-excerpt">{{custom_excerpt}}</p>
|
|
{{/if}}
|
|
</header>
|
|
{{/unless}}
|
|
<aside class="gh-article-meta">
|
|
<div class="gh-article-meta-inner">
|
|
{{#primary_author}}
|
|
{{#if profile_image}}
|
|
<figure class="gh-author-image">
|
|
<img src="{{profile_image}}" alt="{{name}}">
|
|
</figure>
|
|
{{/if}}
|
|
<div class="gh-article-meta-wrapper">
|
|
<h4 class="gh-author-name">
|
|
<a href="{{url}}">{{name}}</a>
|
|
</h4>
|
|
{{/primary_author}}
|
|
<time class="gh-article-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time></div>
|
|
{{#if tags}}
|
|
<div class="gh-article-tags">
|
|
{{#foreach}}
|
|
<a class="gh-article-tag tag--{{slug}}" href="{{url}}" style="--tag-color: {{accent_color}}">{{name}}</a>
|
|
{{/foreach}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
{{#if comments}}
|
|
<div class="gh-comments gh-canvas">
|
|
<h2 class="gh-comments-title">{{comment_count empty="" single="comment" plural="comments"}}</h2>
|
|
{{comments title="" count=false}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<footer class="gh-article-footer gh-canvas">
|
|
<nav class="gh-navigation">
|
|
<div class="gh-navigation-previous">
|
|
{{#prev_post}}
|
|
<a class="gh-navigation-link" href="{{url}}">← Previous</a>
|
|
{{/prev_post}}
|
|
</div>
|
|
|
|
<div class="gh-navigation-middle"></div>
|
|
|
|
<div class="gh-navigation-next">
|
|
{{#next_post}}
|
|
<a class="gh-navigation-link" href="{{url}}">Next →</a>
|
|
{{/next_post}}
|
|
</div>
|
|
</nav>
|
|
</footer>
|
|
</article>
|
|
{{/post}}
|
|
</div>
|
|
</main> |