Tag and author templates

assets/css/screen.css

@@ -1273,10 +1273,10 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-container.is-list .gh-card-excerpt {
-    font-size: 1.6rem;
+    margin-top: 6px;
 }
 
-.gh-container.is-list .gh-card::before {
+.gh-container.is-list .gh-card + .gh-card::before {
     position: absolute;
     top: calc(var(--grid-gap) / -2);
     left: 0;
@@ -1350,7 +1350,7 @@ Search                         LOGO                    Login Subscribe
 
 .gh-about-title {
     font-size: 2.4rem;
-    font-weight: 750;
+    font-weight: 800;
     letter-spacing: -0.019em;
 }
 
@@ -1848,21 +1848,40 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .gh-archive {
-    margin-top: 64px;
+    display: grid;
-    max-width: 950px;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: var(--grid-gap);
+    margin-block: 80px 24px;
+    padding-bottom: 48px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.gh-archive.has-image {
+    margin-top: 24px;
+}
+
+.gh-archive.has-image .gh-article-title {
+    font-size: 5.6rem;
 }
 
 .gh-archive .gh-article-excerpt {
-    margin-top: 10px;
+    margin-top: 12px;
 }
 
-.tag-template .gh-article-title + .gh-article-image {
+.gh-archive .gh-article-image {
-    margin-top: 32px;
+    grid-column: auto;
+    margin-top: 0;
+}
+
+:is(.tag-template, .author-template) .gh-container {
+    margin-top: 0;
 }
 
 .author-template .gh-archive {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
     gap: 24px;
 }
 
@@ -1873,6 +1892,10 @@ figcaption a {
     border-radius: 50%;
 }
 
+.author-template .gh-article-title {
+    font-size: 3.6rem;
+}
+
 .gh-author-meta {
     display: flex;
     gap: 10px;
@@ -1890,11 +1913,12 @@ figcaption a {
     display: flex;
     gap: 10px;
     align-items: center;
+    padding-left: 3px;
 }
 
 .gh-author-social svg {
-    width: 18px;
+    width: 20px;
-    height: 18px;
+    height: 20px;
 }
 
 /* 19. Design settings

author.hbs

@@ -17,9 +17,6 @@
                     <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 facebook}}
                             <a class="gh-author-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
@@ -28,6 +25,9 @@
                             <a class="gh-author-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
                         {{/if}}
                     </div>
+                    {{#if location}}
+                        <div class="gh-author-location">{{location}}</div>
+                    {{/if}}
                 </footer>
             </div>
             {{#if profile_image}}
@@ -36,8 +36,9 @@
         </section>
     {{/author}}
     
-    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}}">
+    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.show_sidebar}} has-sidebar{{/if}}{{#if @custom.hide_images}} no-image{{/if}}">
         <div class="gh-container-inner gh-inner">
+            
             <main class="gh-main">
                 <div class="gh-feed">
                     {{#foreach posts}}
@@ -45,6 +46,26 @@
                     {{/foreach}}
                 </div>
             </main>
+
+            {{#if @custom.show_sidebar}}
+                <aside class="gh-sidebar">
+                    <section class="gh-about">
+                        {{#if @site.icon}}
+                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
+                        {{/if}}
+                        <h3 class="gh-about-title is-title">{{@site.title}}</h3>
+                        {{#if @site.description}}
+                            <p class="gh-about-description is-body">{{@site.description}}</p>
+                        {{/if}}
+                        {{#if @site.members_enabled}}
+                            {{#unless @member}}
+                                <button class="gh-button">Subscribe</button>
+                            {{/unless}}
+                        {{/if}}
+                    </section>
+                </aside>
+            {{/if}}
+
         </div>
     </section>
 

partials/components/footer.hbs

@@ -18,7 +18,6 @@
         </div>
 
         <section class="gh-footer-signup">
-            {{#if @custom.footer_signup_header}}
             <h2 class="gh-footer-signup-header is-title">
                 {{#if @custom.footer_signup_header}}
                     {{@custom.footer_signup_header}}
@@ -26,7 +25,6 @@
                     Subscribe to {{@site.title}}
                 {{/if}}
             </h2>
-            {{/if}}
             {{#if @custom.footer_signup_subhead}}
                 <p class="gh-footer-signup-subhead is-body">{{@custom.footer_signup_subhead}}</p>
             {{/if}}

partials/icons/twitter.hbs

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
+<svg viewBox="0 0 24 24" fill="currentColor"><g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>

tag copy.hbs

@@ -0,0 +1,38 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
+
+<main class="gh-main gh-outer">
+    <div class="gh-archive gh-inner">
+
+        {{#tag}}
+            <section class="gh-archive-content">
+                <div class="gh-archive-inner">
+                    {{#if feature_image}}
+                        <img class="gh-archive-image" src="{{img_url feature_image size="s"}}" alt="{{name}}">
+                    {{/if}}
+                    <h1 class="gh-archive-title is-title">{{name}}</h1>
+                    <p class="gh-archive-description">
+                        {{#if description}}
+                            {{description}}
+                        {{else}}
+                            {{plural ../pagination.total empty="0 posts" singular="% post" plural="% posts"}}
+                        {{/if}}
+                    </p>
+                </div>
+            </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">
+                <main class="gh-main">
+                    <div class="gh-feed">
+                        {{#foreach posts}}
+                            {{> "loop"}}
+                        {{/foreach}}
+                    </div>
+                </main>
+            </div>
+        </section>
+
+    </div>
+</main>

tag.hbs

@@ -4,17 +4,20 @@
 <main class="gh-main gh-outer">
 
     {{#tag}}
-        <section class="gh-archive gh-inner">
+        <section class="gh-archive{{#if feature_image}} has-image{{/if}} gh-inner">
+            <header class="gh-archive-wrapper">
                 <h1 class="gh-article-title is-title">{{name}}</h1>
                 {{#if description}}
                     <p class="gh-article-excerpt">{{description}}</p>
                 {{/if}}
+            </header>
             {{> "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}}">
+    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.show_sidebar}} has-sidebar{{/if}}{{#if @custom.hide_images}} no-image{{/if}}">
         <div class="gh-container-inner gh-inner">
+            
             <main class="gh-main">
                 <div class="gh-feed">
                     {{#foreach posts}}
@@ -22,6 +25,26 @@
                     {{/foreach}}
                 </div>
             </main>
+
+            {{#if @custom.show_sidebar}}
+                <aside class="gh-sidebar">
+                    <section class="gh-about">
+                        {{#if @site.icon}}
+                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
+                        {{/if}}
+                        <h3 class="gh-about-title is-title">{{@site.title}}</h3>
+                        {{#if @site.description}}
+                            <p class="gh-about-description is-body">{{@site.description}}</p>
+                        {{/if}}
+                        {{#if @site.members_enabled}}
+                            {{#unless @member}}
+                                <button class="gh-button">Subscribe</button>
+                            {{/unless}}
+                        {{/if}}
+                    </section>
+                </aside>
+            {{/if}}
+
         </div>
     </section>