Meta info

assets/css/components/card.css

@@ -123,6 +123,11 @@
   text-align: center;
 }
 
+.sm-feature-card-text {
+  padding: 1rem;
+  font-size: 1.15rem;
+}
+
 .sm-cta-card picture + form {
   height: auto;
   margin-block-start: 2rem;
@@ -144,6 +149,23 @@
   flex-direction: column;
 }
 
+.sm-card-meta svg,
+.sm-card .sm-love-button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: var(--primary);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.sm-card h2 > svg {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 2px;
+  fill: var(--primary);
+  translate: 0 3px;
+}
+
 .sm-cta-card h2 {
   margin: 0 0 0.5rem;
   font-size: 1.5rem;
@@ -234,11 +256,6 @@ picture ~ .sm-feature-card-text {
   margin-block-start: 2rem;
 }
 
-.sm-feature-card-text {
-  padding: 1rem;
-  font-size: 1.15rem;
-}
-
 .sm-card img {
   width: 100%;
   height: 100%;
@@ -341,14 +358,20 @@ picture ~ .sm-feature-card-text {
   flex: 1;
 }
 
-.sm-card .sm-love-button {
+.sm-card-meta {
   position: absolute;
   right: 1rem;
   bottom: 1rem;
-  width: 1em;
-  height: 1em;
+  z-index: 2;
+  display: flex;
+  gap: 0.25em;
+  align-items: center;
 }
 
-.sm-card .sm-love-button svg {
-  fill: var(--primary);
+.sm-comment-count {
+  margin-block-start: 0.25rem;
+  font-size: var(--x-small);
+  font-weight: 300;
+  color: var(--element-light);
+  text-transform: uppercase;
 }

assets/css/components/saves.css

@@ -1,7 +1,8 @@
 .sm-love-button {
   display: flex;
   align-items: center;
-  transform: translateY(0.25em);
+
+  /* transform: translateY(0.25em); */
 }
 
 .sm-love-button .sm-heart-fill-icon {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "An elegant Ghost theme",
   "main": "index.js",
   "engines": {

partials/card.hbs

@@ -55,15 +55,21 @@
 
             <div class="sm-card-body">
                 <div>
-                    <h2 class="sm-title {{^if feature_image}}large{{/if}} {{#if premiere}}large{{/if}}">{{title}}</h2>
+                    <h2 class="sm-title{{^if feature_image}} large{{/if}}{{#if premiere}} large{{/if}}">{{^if access}}<svg aria-label="premium content"><use href="#sm-lock-icon"></use></svg>{{/if}}{{title}}</h2>
                     {{#if custom_excerpt}}
                         {{^if premiere}}
                             {{^if feature_image}}
                             <p class="sm-excerpt">{{custom_excerpt}}</p>
                             {{/if}}
                         {{/if}}
+                        {{#if comments}}
+                          {{comment_count singular="comment" plural="comments" class="sm-comment-count"
+                          autowrap="p"}}
+                        {{/if}}
                         {{#if premiere}}<p class="sm-excerpt">{{custom_excerpt}}</p>
                         {{/if}}
+
+
                     {{/if}}
                 </div>
                 <div class="sm-card-footer">
@@ -74,8 +80,14 @@
                 </div>
             </div>
     </a>
-    <button class="sm-circle-icon-button sm-love-button" data-id="{{slug}}" data-title="{{title}}" aria-label="Save {{title}} to favorites">
+    <div class="sm-card-meta">
+      {{#if featured}}
+        <svg class="sm-card-featured-icon" aria-label="featured post"><use href="#sm-fire-icon"></use></svg>
+      {{/if}}
+      <button class="sm-circle-icon-button sm-love-button" data-id="{{slug}}" data-title="{{title}}" aria-label="Save {{title}} to favorites">
         <svg class="sm-heart-outline-icon"><use href="#sm-heart-outline-icon"></use></svg>
         <svg class="sm-heart-fill-icon"><use href="#sm-heart-fill-icon"></use></svg>
-    </button>
+      </button>
+    </div>
+
 </article>

partials/svg.hbs

@@ -6,6 +6,27 @@
   style='display: none;'
 >
   {{! UI icons}}
+  <symbol id='sm-comment-icon' viewBox='0 0 24 24' aria-hidden='true'><path
+      fill='none'
+      d='M0 0h24v24H0z'
+    ></path><path
+      d='M7.291 20.824L2 22l1.176-5.291A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.956 9.956 0 0 1-4.709-1.176zm.29-2.113l.653.35A7.955 7.955 0 0 0 12 20a8 8 0 1 0-8-8c0 1.334.325 2.618.94 3.766l.349.653-.655 2.947 2.947-.655z'
+    ></path></symbol>
+
+  <symbol id='sm-lock-icon' viewBox='0 0 24 24' aria-hidden='true'><path
+      fill='none'
+      d='M0 0h24v24H0z'
+    ></path><path
+      d='M19 10h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1h1V9a7 7 0 1 1 14 0v1zM5 12v8h14v-8H5zm6 2h2v4h-2v-4zm6-4V9A5 5 0 0 0 7 9v1h10z'
+    ></path></symbol>
+
+  <svg id='sm-fire-icon' viewBox='0 0 24 24' aria-hidden='true'><path
+      fill='none'
+      d='M0 0h24v24H0z'
+    ></path><path
+      d='M12 23a7.5 7.5 0 0 0 7.5-7.5c0-.866-.23-1.697-.5-2.47-1.667 1.647-2.933 2.47-3.8 2.47 3.995-7 1.8-10-4.2-14 .5 5-2.796 7.274-4.138 8.537A7.5 7.5 0 0 0 12 23zm.71-17.765c3.241 2.75 3.257 4.887.753 9.274-.761 1.333.202 2.991 1.737 2.991.688 0 1.384-.2 2.119-.595a5.5 5.5 0 1 1-9.087-5.412c.126-.118.765-.685.793-.71.424-.38.773-.717 1.118-1.086 1.23-1.318 2.114-2.78 2.566-4.462z'
+    ></path></svg>
+
   <symbol id='sm-copy-icon' viewBox='0 0 24 24' aria-hidden='true'><path
       fill='none'
       d='M0 0h24v24H0z'