diff --git a/src/comp/comment.svelte b/src/comp/comment.svelte
index f1f29dc..a9decdb 100644
--- a/src/comp/comment.svelte
+++ b/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;
+ }
-
+
-
-
-
- {#each tags as tag}
-
{tag}
- {/each}
+
+
+
+
+
+ {#each tags as tag}
+
{tag}
+ {/each}
+
+ {#if replyTo}
+
+
+ reply
+
+
+ {/if}
+
+
+
+
+
+
{comment.content}
+
+
- {#if replyTo}
-
-
- reply
-
-
- {/if}
-
-
-
-
-
{comment.content}
-
-
+
diff --git a/src/comp/page/post.svelte b/src/comp/page/post.svelte
index 9e03550..c89aeea 100644
--- a/src/comp/page/post.svelte
+++ b/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;
}
diff --git a/src/comp/postcard.svelte b/src/comp/postcard.svelte
index 4eddc57..f59f728 100644
--- a/src/comp/postcard.svelte
+++ b/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;
diff --git a/static/css/base.scss b/static/css/base.scss
index 835dcbb..d4d2e1f 100644
--- a/static/css/base.scss
+++ b/static/css/base.scss
@@ -11,6 +11,7 @@
--white-dim: #afbcc2;
--gray: #1d1d28;
+ --gray-dim: #12121b;
}
body {