Featured post indicator

assets/css/screen.css

@@ -654,7 +654,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin-top: 0;
 }
 
-.post-card-primary-tag {
+.post-card-tags {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     margin: 0 0 10px;
     color: var(--color-secondary-text);
     font-size: 1.4rem;
@@ -663,6 +666,13 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     line-height: 1;
 }
 
+.post-card-featured {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    color: var(--ghost-accent-color);
+}
+
 .post-card-title {
     margin: 0;
     font-size: 2.6rem;
@@ -788,7 +798,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         height: 100%;
     }
 
-    .post-card-large .post-card-primary-tag {
+    .post-card-large .post-card-tags {
         margin-bottom: 12px;
     }
 
@@ -810,7 +820,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         margin-bottom: 40px;
     }
 
-    .post-card-full .post-card-primary-tag {
+    .post-card-full .post-card-tags {
         margin-bottom: 14px;
     }
 
@@ -1714,10 +1724,14 @@ html.dark-mode .post-card-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode :is(.post-card-primary-tag, .post-card-meta, .article-tag a, .byline-meta-content) {
+html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
     color: color-mod(var(--color-secondary-text) l(-22%));
 }
 
+html.dark-mode .post-card-featured {
+    color: #fff;
+}
+
 html.dark-mode .post-card-title {
     color: #fff;
 }

partials/icons/fire.hbs

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

partials/post-card.hbs

@@ -24,9 +24,14 @@ which templates loop over to generate a list of posts. --}}
 
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
-                {{#primary_tag}}
-                    <div class="post-card-primary-tag">{{name}}</div>
-                {{/primary_tag}}
+                <div class="post-card-tags">
+                    {{#primary_tag}}
+                        <span class="post-card-primary-tag">{{name}}</span>
+                    {{/primary_tag}}
+                    {{#if featured}}
+                        <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+                    {{/if}}
+                </div>
                 <h2 class="post-card-title">{{title}}</h2>
             </header>
             {{#if excerpt}}

post.hbs

@@ -12,11 +12,16 @@ into the {body} tag of the default.hbs template --}}
 
     <header class="article-header gh-canvas">
 
-        {{#if primary_tag}}
-            <section class="article-tag post-card-primary-tag">
-                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
-            </section>
-        {{/if}}
+        <div class="article-tag post-card-tags">
+            {{#primary_tag}}
+                <span class="post-card-primary-tag">
+                    <a href="{{url}}">{{name}}</a>
+                </span>
+            {{/primary_tag}}
+            {{#if featured}}
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+            {{/if}}
+        </div>
 
         <h1 class="article-title">{{title}}</h1>