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,11 +88,19 @@
 
     font-size: 0.85em;
   }
+
+  .avatar {
+    padding-top: 6px;
+  }
 </style>
 
 <div class="message">
+  <div class="avatar">
     <Avatar size={48}></Avatar>
+  </div>
   <div class="content">
+    <GlowFX borderRadius={16}>
+      <div class="glowContent">
         <div class="topBar">
           <div class="nameField">
             <Mention user={comment.author}></Mention>
@@ -93,5 +123,8 @@
         <p>{comment.content}</p>
     
         <ActionBar message={comment}></ActionBar>
+
+      </div>
+    </GlowFX>
   </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 {