Tag and author templates, design details

author.hbs

@@ -0,0 +1,51 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
+
+<main class="gh-main gh-outer">
+
+    {{#author}}
+        <section class="gh-archive gh-inner">
+            <div class="gh-archive-wrapper">
+                <h1 class="gh-article-title is-title">
+                    {{#if website}}
+                        <a class="gh-author-social-link" href="{{website}}" target="_blank" rel="noopener">{{name}}</a>
+                    {{else}}
+                        {{name}}
+                    {{/if}}
+                </h1>
+                {{#if bio}}
+                    <p class="gh-article-excerpt">{{bio}}</p>
+                {{/if}}
+                <footer class="gh-author-meta">
+                    {{#if location}}
+                        <div class="gh-author-location">{{location}}</div>
+                    {{/if}}
+                    <div class="gh-author-social">
+                        {{#if twitter}}
+                            <a class="gh-author-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                        {{/if}}
+                        {{#if facebook}}
+                            <a class="gh-author-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        {{/if}}
+                    </div>
+                </footer>
+            </div>
+            {{#if profile_image}}
+                <img class="gh-article-image" src="{{img_url profile_image size="s"}}" alt="{{name}}">
+            {{/if}}
+        </section>
+    {{/author}}
+    
+    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}}">
+        <div class="gh-container-inner gh-inner">
+            <main class="gh-main">
+                <div class="gh-feed">
+                    {{#foreach posts}}
+                        {{> "loop"}}
+                    {{/foreach}}
+                </div>
+            </main>
+        </div>
+    </section>
+
+</main>

page.hbs

@@ -0,0 +1,24 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
+
+{{#post}}
+
+<main class="gh-main">
+    <article class="gh-article {{post_class}}">
+
+        <header class="gh-article-header gh-canvas">
+            <h1 class="gh-article-title is-title">{{title}}</h1>
+            {{#if custom_excerpt}}
+                <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
+            {{/if}}
+            {{> "feature-image"}}
+        </header>
+
+        <section class="gh-content gh-canvas is-body">
+            {{content}}
+        </section>
+
+    </article>
+</main>
+
+{{/post}}

partials/components/footer.hbs

@@ -2,7 +2,7 @@
     <div class="gh-footer-inner gh-inner">
 
         <div class="gh-footer-bar">
-            <span class="gh-footer-logo">
+            <span class="gh-footer-logo is-title">
                 {{#if @site.logo}}
                     <img src="{{@site.logo}}" alt="{{@site.title}}">
                 {{else}}
@@ -19,10 +19,10 @@
 
         <section class="gh-footer-signup">
             {{#if @custom.footer_signup_header}}
-                <h2 class="gh-footer-signup-header">{{@custom.footer_signup_header}}</h2>
+                <h2 class="gh-footer-signup-header is-title">{{@custom.footer_signup_header}}</h2>
             {{/if}}
             {{#if @custom.footer_signup_subhead}}
-                <p class="gh-footer-signup-subhead">{{@custom.footer_signup_subhead}}</p>
+                <p class="gh-footer-signup-subhead is-body">{{@custom.footer_signup_subhead}}</p>
             {{/if}}
             <button class="gh-button">Subscribe</button>
         </section>

partials/components/header.hbs

@@ -42,7 +42,7 @@
 
             {{!-- Landing layout --}}
             {{#match headerStyle "Landing"}}
-                <h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
                 <form class="gh-header-form">
                     <input class="gh-header-input" type="email" placeholder="jamie@example.com">
                     <button class="gh-button" type="submit">Subscribe</button>
@@ -51,7 +51,7 @@
 
             {{!-- Search layout --}}
             {{#match headerStyle "Search"}}
-                <h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
                 <form class="gh-header-form">
                     {{> "icons/search"}}
                     <button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>

partials/components/navigation.hbs

@@ -2,7 +2,7 @@
     <div class="gh-navigation-inner gh-inner">
 
         <div class="gh-navigation-brand">
-            <a class="gh-navigation-logo" href="{{@site.url}}" data-title>
+            <a class="gh-navigation-logo is-title" href="{{@site.url}}">
                 {{#if @site.logo}}
                     <img src="{{@site.logo}}" alt="{{@site.title}}">
                 {{else}}

partials/components/post-list.hbs

@@ -17,9 +17,9 @@
                     {{#if @site.icon}}
                         <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
                     {{/if}}
-                    <h3 class="gh-about-title">{{@site.title}}</h3>
+                    <h3 class="gh-about-title is-title">{{@site.title}}</h3>
                     {{#if @site.description}}
-                        <p class="gh-about-description">{{@site.description}}</p>
+                        <p class="gh-about-description is-body">{{@site.description}}</p>
                     {{/if}}
                     {{#if @site.members_enabled}}
                         {{#unless @member}}

partials/loop.hbs

@@ -18,9 +18,9 @@
             {{#if primary_tag}}
                 <p class="gh-card-tag">{{primary_tag.name}}</p>
             {{/if}}
-            <h3 class="gh-card-title" data-title>{{title}}</h3>
+            <h3 class="gh-card-title is-title">{{title}}</h3>
-            <p class="gh-card-excerpt" data-body>{{excerpt}}</p>
+            <p class="gh-card-excerpt is-body">{{excerpt}}</p>
-            <footer class="gh-card-meta" data-body><!--
+            <footer class="gh-card-meta"><!--
              -->{{#if @custom.show_author}}
                     <span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span>
                 {{/if}}

partials/recent-posts.hbs

@@ -1,8 +1,8 @@
-<section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}} gh-canvas">
+<section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}} gh-outer">
-    <div class="gh-container-inner">
+    <div class="gh-container-inner gh-inner">
         <h2 class="gh-container-title">Read more</h2>
         <div class="gh-feed">
-            {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="2" as |next|}}
+            {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="3" as |next|}}
                 {{#foreach next}}
                     {{> "loop"}}
                 {{/foreach}}

post.hbs

@@ -1,4 +1,5 @@
 {{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
 
 {{#post}}
 
@@ -10,15 +11,14 @@
             {{#if primary_tag}}
                 <a class="gh-article-tag" href="{{primary_tag.url}}">{{primary_tag.name}}</a>
             {{/if}}
-            <h1 class="gh-article-title">{{title}}</h1>
+            <h1 class="gh-article-title is-title">{{title}}</h1>
-            {{!-- {{> "post-meta"}} --}}
             {{#if custom_excerpt}}
-                <p class="gh-article-excerpt">{{custom_excerpt}}</p>
+                <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
             {{/if}}
             {{> "feature-image"}}
         </header>
 
-        <section class="gh-content gh-canvas">
+        <section class="gh-content gh-canvas is-body">
             {{content}}
         </section>
 

tag.hbs

@@ -0,0 +1,28 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
+
+<main class="gh-main gh-outer">
+
+    {{#tag}}
+        <section class="gh-archive gh-inner">
+            <h1 class="gh-article-title is-title">{{name}}</h1>
+            {{#if description}}
+                <p class="gh-article-excerpt">{{description}}</p>
+            {{/if}}
+            {{> "feature-image"}}
+        </section>
+    {{/tag}}
+    
+    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}}">
+        <div class="gh-container-inner gh-inner">
+            <main class="gh-main">
+                <div class="gh-feed">
+                    {{#foreach posts}}
+                        {{> "loop"}}
+                    {{/foreach}}
+                </div>
+            </main>
+        </div>
+    </section>
+
+</main>