styling

royalfig · Jul 10, 2023 · a276b59 · a276b59
1 parent a6761cb
commit a276b59
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 78 deletions.
diff --git a/assets/css/components/card.css b/assets/css/components/card.css
@@ -60,26 +60,20 @@
 .sm-arrow-link {
   padding: 0.35rem;
   line-height: 0;
-  background-color: var(--border-color);
+  background-color: var(--primary);
   border-radius: 50%;
 }
 
 .sm-arrow-link svg {
-  fill: var(--element-dark);
-}
-
-/* Feature image card */
-.sm-feature-image-card {
-  grid-row: span 16;
-  grid-column: span 12;
+  fill: var(--surface);
 }
 
-/* No image card */
 .sm-no-image-card {
-  grid-row: span 12;
-  grid-column: span 12;
-  color: var(--element);
-  background-color: var(--surface-light);
+  background-image: radial-gradient(
+    at 50% 0,
+    var(--surface-light),
+    var(--surface-dark)
+  );
 }
 
 .sm-no-image-card .sm-card-body {
@@ -89,26 +83,12 @@
   justify-content: flex-end;
 }
 
-.sm-no-image-card svg {
-  fill: var(--element);
-}
-
-/* Featured card */
-.sm-featured-card {
-  grid-row: span 18;
-  grid-column: span 12;
-}
-
-/* Tags card */
-.sm-tag-card {
-  position: relative;
-  grid-row: span 6;
-  grid-column: span 6;
-  padding: 1rem;
+.sm-card-excerpt {
+  display: -webkit-box;
+  margin-block-end: 1rem;
   overflow: hidden;
-  color: #fff;
-  background-color: var(--surface-light);
-  border-radius: var(--radius);
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 
 .sm-tag-card.sm-background-color {
@@ -155,24 +135,11 @@
   justify-content: space-between;
 }
 
-/* CTA card */
-.sm-cta-card {
-  display: flex;
-  flex-direction: column;
-  grid-row: span 12;
-  grid-column: span 12;
-  justify-content: space-between;
-  padding: 1rem;
-  color: var(--surface-dark);
-  background-color: var(--primary);
-  border-radius: var(--radius);
-}
-
 .sm-cta-card h2 {
   margin: 0;
   font-weight: 900;
   line-height: 1.1;
-  color: inherit;
+  color: var(--surface-light);
   background-image: none !important;
 }
 
@@ -230,6 +197,57 @@
   background-color: var(--secondary-dark);
 }
 
+/* Card sizing */
+
+/* Feature image card */
+.sm-feature-image-card {
+  grid-row: span 16;
+  grid-column: span 12;
+}
+
+/* No image card */
+.sm-no-image-card {
+  grid-row: span 12;
+  grid-column: span 12;
+  color: var(--element);
+  background-color: var(--surface-light);
+}
+
+.sm-no-image-card .sm-card-title {
+  margin-block-end: 0.5rem;
+}
+
+/* CTA card */
+.sm-cta-card {
+  display: flex;
+  flex-direction: column;
+  grid-row: span 12;
+  grid-column: span 12;
+  justify-content: space-between;
+  padding: 1rem;
+  color: var(--surface-dark);
+  background-color: var(--primary);
+  border-radius: var(--radius);
+}
+
+/* Featured card */
+.sm-featured-card {
+  grid-row: span 18;
+  grid-column: span 12;
+}
+
+/* Tags card */
+.sm-tag-card {
+  position: relative;
+  grid-row: span 6;
+  grid-column: span 6;
+  padding: 1rem;
+  overflow: hidden;
+  color: #fff;
+  background-color: var(--surface-light);
+  border-radius: var(--radius);
+}
+
 @media (--tablet) {
   .sm-feature-image-card {
     grid-row: span 6;
@@ -242,7 +260,7 @@
   }
 
   .sm-no-image-card {
-    grid-row: span 3;
+    grid-row: span 6;
     grid-column: span 9;
   }
 
@@ -251,7 +269,7 @@
   }
 
   .sm-cta-card {
-    grid-row: span 3;
+    grid-row: span 6;
     grid-column: span 6;
   }
 

diff --git a/assets/css/pages/post.css b/assets/css/pages/post.css
@@ -169,40 +169,16 @@
   margin-block: 1rem 6rem;
 }
 
+.sm-related-posts .sm-grid-home {
+  padding: 0;
+  margin-block: 0;
+}
+
 /* Related posts block */
 .sm-related-posts h2 {
   margin-block-start: 1rem;
 }
 
-.sm-related-posts-grid-container {
-  grid-template-columns: 1fr;
-  gap: 10px;
-}
-
-@media (--phone) {
-  .sm-related-posts-grid-container {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .sm-related-posts-grid-container > article:last-child {
-    display: none;
-  }
-}
-
-@media (--tablet) {
-  .sm-related-posts-grid-container {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .sm-related-posts-grid-container > article:last-child {
-    display: initial;
-  }
-}
-
-.sm-related-posts .sm-card {
-  grid-area: auto;
-}
-
 /* Comments */
 /* stylelint-disable-next-line selector-max-id */
 #ghost-comments-root {

diff --git a/partials/card.hbs b/partials/card.hbs
@@ -58,6 +58,12 @@
       {{#if primary_tag}}<p class="sm-card-tag">{{primary_tag.name}}</p>{{/if}}
       </div>
       <h2 class="sm-card-title">{{^if access}}<svg aria-label="premium content"><use href="#sm-lock-icon"></use></svg>{{/if}}<a herf={{url}}>{{title}}</a></h2>
+      {{^if feature_image}}
+      {{^if featured}}
+      <p class="sm-card-excerpt">
+        {{excerpt}}
+      </p>
+      {{/if}}{{/if}}
     <div class="sm-card-meta">
       <div>
         {{#if featured}}

diff --git a/post.hbs b/post.hbs
@@ -26,7 +26,7 @@
         {{#get "posts" limit="3" include="tags" filter="id:-{{id}}+tag:[{{tags.[*].slug}}]" as |related|}}
             {{#if related}}
             <h2>Read this next</h2>
-            <div class="sm-related-posts-grid-container">
+            <div class="sm-grid-home">
                 {{#foreach related}}
                     {{> "card"}}
                 {{/foreach}}