Refactor: Updated Post and Comment styling

src/comp/comment.svelte

@@ -7,6 +7,7 @@
     import Ago from "./ago.svelte";
     import ActionBar from "./actionbar.svelte";
     import { circOut } from "svelte/easing";
+    import GlowFX from "./fx/glowfx.svelte";
 
   /**
    * @type {import("$types/base").Comment}
@@ -31,13 +32,33 @@
     display: flex;
     flex-flow: row nowrap;
     gap: 16px;
+    position: relative;
   }
 
   .content {
+    flex: 1;
+    border-radius: 16px;
+    background: var(--gray-dim);
+    width: 100%;
+    position: relative;
+  }
+
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .glowContent {
+    position: relative;
     display: flex;
     flex-flow: column nowrap;
-    flex: 1;
+    width: calc(100% - 32px);
     gap: 8px;
+    padding: 16px;
   }
 
   .topBar {
@@ -55,6 +76,7 @@
 
     & > .tag {
       color: var(--white-dim);
+      font-size: 0.9em;
     }
   }
 
@@ -66,32 +88,43 @@
 
     font-size: 0.85em;
   }
+
+  .avatar {
+    padding-top: 6px;
+  }
 </style>
 
 <div class="message">
-  <Avatar size={48}></Avatar>
+  <div class="avatar">
+    <Avatar size={48}></Avatar>
+  </div>
   <div class="content">
-    <div class="topBar">
+    <GlowFX borderRadius={16}>
-      <div class="nameField">
+      <div class="glowContent">
-        <Mention user={comment.author}></Mention>
+        <div class="topBar">
-        {#each tags as tag}
+          <div class="nameField">
-        <span class="tag typeTitle">{tag}</span>
+            <Mention user={comment.author}></Mention>
-        {/each}
+            {#each tags as tag}
+            <span class="tag typeTitle">{tag}</span>
+            {/each}
+    
+            {#if replyTo}
+            <span class="replyBar">
+              <Tablericon name="square-rounded-arrow-right" size={16} color="white"></Tablericon>
+              reply
+              <Mention user={replyTo.author}></Mention>
+            </span>
+            {/if}
+          </div>
+    
+          <Ago date={comment.commentDate}></Ago>
+        </div>
+    
+        <p>{comment.content}</p>
+    
+        <ActionBar message={comment}></ActionBar>
 
-        {#if replyTo}
-        <span class="replyBar">
-          <Tablericon name="square-rounded-arrow-right" size={16} color="white"></Tablericon>
-          reply
-          <Mention user={replyTo.author}></Mention>
-        </span>
-        {/if}
       </div>
-
+    </GlowFX>
-      <Ago date={comment.commentDate}></Ago>
-    </div>
-
-    <p>{comment.content}</p>
-
-    <ActionBar message={comment}></ActionBar>
   </div>
 </div>

src/comp/page/post.svelte

@@ -41,10 +41,6 @@
     align-items: start;
     justify-content: center;
     flex: 1;
-
-    & > .date {
-      color: var(--white-dim);
-    }
   }
 
   .postHead {
@@ -61,7 +57,7 @@
 
   .commentsHead {
     width: 100%;
-    border-bottom: 1px solid var(--accent-dim);
+    border-bottom: 1px solid var(--gray);
 
     margin-top: 32px;
   }

src/comp/postcard.svelte

@@ -60,11 +60,11 @@
 
     border-radius: 16px;
     padding: 16px;
-    background: #12121b;
+    background: var(--gray-dim);
 
     background-size: 300vw;
     background-position: 100% 0%;
-    background-image: linear-gradient(30deg, #131320 40%, #373052 50%, #12121b 60%);
+    background-image: linear-gradient(30deg, #131320 40%, #373052 50%, var(--gray-dim) 60%);
 
     position: relative;
 

static/css/base.scss

@@ -11,6 +11,7 @@
   --white-dim: #afbcc2;
 
   --gray: #1d1d28;
+  --gray-dim: #12121b;
 }
 
 body {