Added desc tags to post pages

assets/css/screen.css

@@ -11,6 +11,7 @@
     --gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);
     --head-nav-gap: 32px;
     --container-width: 1440px;
+    --big-title-font-size: clamp(4rem, 2.86vw + 2.63rem, 7.2rem);
     --title-font-size: clamp(3.2rem, 2.7rem + 1.5625vw, 5.2rem);
     --content-font-size: clamp(1.7rem, 0.38vw + 1.4rem, 2rem);
     --header-spacing: clamp(4.8rem, 4rem + 2.5vw, 8rem);
@@ -316,10 +317,7 @@ hr {
 .tag-desc {
     color: var(--color-secondary-text);
     font-weight: 600;
-    font-size: calc(var(--title-font-size) * 0.7);
+    display: inline;
-    display: inline-block;
-    vertical-align: middle;
-    block-size: var(--title-font-size);
 }
 
 /* Feed
@@ -452,8 +450,8 @@ hr {
 }
 
 .gh-article-title {
-    grid-column: 1 / span 9;
+    grid-column: 1 / span 12;
-    font-size: clamp(4rem, 2.86vw + 2.63rem, 7.2rem);
+    font-size: var(--big-title-font-size);
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.03em;

post.hbs

@@ -10,7 +10,12 @@
 
                 {{#if feature_image}}
                     <header class="gh-article-header gh-canvas">
-                        <h1 class="gh-article-title">{{title}}</h1>
+                        <h1 class="gh-article-title">
+                            {{title}}
+                            <div class="tag-desc">
+                                {{> "get-desc-tags"}}
+                            </div>
+                        </h1>
                         {{#if custom_excerpt}}
                             <p class="gh-article-excerpt">{{custom_excerpt}}</p>
                         {{/if}}
@@ -18,8 +23,25 @@
                 {{/if}}
 
                 <section class="gh-content gh-canvas">
-                    <aside class="gh-sidebar"><div class="gh-toc"></div></aside> {{! Table of contents }}
+                    {{!-- Adds table of contents unless instructed not to --}}
+                    {{^has tag="#hide toc"}}
+                        <aside class="gh-sidebar">
+                            <div class="gh-toc"></div>
+                        </aside>
+
+                        <script src="{{asset "js/lib/tocbot.min.js"}}"></script>
+                        <script>
+                            tocbot.init({
+                                tocSelector: '.gh-toc',
+                                contentSelector: '.gh-content',
+                                headingSelector: 'h1, h2',
+                                hasInnerContainers: true,
+                            });
+                        </script>
+                    {{/has}}
+
                     {{content}}
+
                     {{#unless feature_image}}
                         <header class="gh-article-header">
                             <h1 class="gh-article-title">{{title}}</h1>
@@ -31,18 +53,7 @@
                 </section>
             </article>
 
-            {{!-- Adds table of contents unless instructed not to --}}
+
-            {{^has tag="#hide toc"}}
-                <script src="{{asset "js/lib/tocbot.min.js"}}"></script>
-                <script>
-                    tocbot.init({
-                        tocSelector: '.gh-toc',
-                        contentSelector: '.gh-content',
-                        headingSelector: 'h1, h2',
-                        hasInnerContainers: true,
-                    });
-                </script>
-            {{/has}}
         {{/post}}
     </div>
 </main>