From adb1e4dcf252d1508f5012ef9d78434ccf654d17 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 26 Mar 2025 14:08:42 -0500
Subject: [PATCH] UX: Change title fonts, etc (#80)

---
 scss/topic-cards.scss | 47 ++++++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 82c580e..18805c0 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -29,8 +29,8 @@
   padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
-  grid-template-rows: 22px minmax(22px, auto);
+  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
+  grid-template-rows: 20px minmax(20px, auto);
   grid-template-areas:
     "activity activity activity activity . . status"
     "topic-title topic-title topic-title topic-title likes-replies likes-replies category";
@@ -38,8 +38,8 @@
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
   &.excerpt-expanded {
-    grid-template-columns: 22px auto repeat(5, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
+    grid-template-columns: 20px auto repeat(5, 1fr) auto;
+    grid-template-rows: 20px auto auto 30px;
     grid-template-areas:
       "activity activity activity activity . . . status"
       "topic-title topic-title topic-title topic-title topic-title topic-title . ."
@@ -65,8 +65,8 @@
     }
   }
   @include breakpoint(large) {
-    grid-template-columns: 22px repeat(6, 1fr);
-    grid-template-rows: 22px minmax(22px, auto);
+    grid-template-columns: 20px repeat(6, 1fr);
+    grid-template-rows: 20px minmax(20px, auto);
     grid-template-areas:
       "activity activity activity activity activity activity status"
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
@@ -107,6 +107,7 @@
   .topic-activity {
     display: flex;
     gap: 0.25em;
+    font-size: var(--font-down-1);
   }
 
   .topic-activity__user {
@@ -115,8 +116,8 @@
   }
 
   .topic-activity__user .avatar {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
     border-radius: 4px;
   }
 
@@ -129,7 +130,7 @@
     @include breakpoint("large", min-width) {
       position: absolute;
       right: 0px;
-      top: -22px;
+      top: -20px;
       background-color: var(--d-content-background);
       height: 85%;
       font-size: var(--font-down-3);
@@ -165,12 +166,14 @@
 
   // title
   td.main-link .link-top-line {
-    font-size: var(--font-up-1);
+    font-size: var(--font-0);
     grid-area: topic-title;
     font-weight: 500;
+    display: flex;
   }
 
   .link-top-line .event-date {
+    margin-left: 0.5em;
     font-size: var(--font-down-3);
   }
 
@@ -231,7 +234,7 @@
   td.topic-category-data .badge-category__wrapper,
   td.main-link .link-bottom-line .badge-category__wrapper {
     border-radius: var(--d-border-radius);
-    padding: 6px;
+    padding: 3px 6px;
     align-self: flex-end;
     background-color: light-dark(
       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
@@ -301,12 +304,12 @@
 // Bookmarks
 
 .topic-list-item.bookmark-list-item {
-  grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
   grid-template-areas:
     "avatar update metadata metadata metadata metadata dropdown"
     "topic-title topic-title topic-title topic-title topic-title category dropdown";
   @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
       "avatar update metadata metadata metadata metadata metadata dropdown"
       "topic-title topic-title topic-title topic-title topic-title likes-replies category dropdown";
@@ -328,7 +331,7 @@
       "excerpt excerpt excerpt excerpt excerpt excerpt . dropdown"
       "excerpt excerpt excerpt excerpt excerpt excerpt category dropdown";
     @include breakpoint(mobile-extra-large) {
-      grid-template-columns: 22px min-content min-content auto min-content min-content min-content 36px;
+      grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
       .post-excerpt {
         display: none;
       }
@@ -379,7 +382,7 @@
 // Assigned List
 
 .topic-list-item.assigned-list-item {
-  grid-template-columns: 22px min-content min-content auto min-content min-content 36px;
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
   grid-template-areas:
     "activity activity activity activity activity status dropdown"
     "topic-title topic-title topic-title topic-title likes-replies category dropdown";
@@ -390,6 +393,7 @@
       "category . . . . likes-replies dropdown";
   }
   @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
     grid-template-areas:
       "activity activity activity activity activity activity status dropdown"
       "topic-title topic-title topic-title topic-title topic-title topic-title . dropdown"
@@ -405,6 +409,11 @@
   td.topic-category-status-data {
     display: contents;
   }
+  .topic-status-card {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
 }
 
 // User Messages
@@ -419,8 +428,8 @@ body.user-messages-page .topic-list-item {
     "activity activity activity activity activity activity activity"
     "topic-title topic-title topic-title topic-title likes-replies likes-replies likes-replies";
   &.excerpt-expanded {
-    grid-template-columns: 22px repeat(6, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
+    grid-template-columns: 20px repeat(6, 1fr) auto;
+    grid-template-rows: 20px auto auto 30px;
     grid-template-areas:
       "activity activity activity activity activity activity activity activity"
       "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
@@ -461,8 +470,8 @@ body.user-messages-page .topic-list-item {
     }
   }
   @include breakpoint(large) {
-    grid-template-columns: 22px min-content min-content auto min-content min-content min-content;
-    grid-template-rows: 22px minmax(22px, auto);
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
+    grid-template-rows: 20px minmax(20px, auto);
     grid-template-areas:
       "avatar author status status  . activity"
       ". topic-title topic-title topic-title . . likes-replies"