some visual changes

DeepDoge · Nov 10, 2024 · 1514579 · 1514579
1 parent b03554c
commit 1514579
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/project/app/src/app/Layout.ts b/project/app/src/app/Layout.ts
@@ -128,12 +128,10 @@ const LayoutCss = css`
 		grid-template-columns:
 			[header-start]
 			minmax(0, 20em)
-			[header-end]
-			2fr
-			[main-start]
+			[header-end main-start]
 			minmax(0, 40em)
 			[main-end]
-			4fr;
+			1fr;
 		grid-template-rows: auto;
 
 		@container (inline-size < ${breakPoint}) {

diff --git a/project/app/src/app/feed/FeedItem.ts b/project/app/src/app/feed/FeedItem.ts
@@ -14,7 +14,8 @@ export function FeedItem(post: Post) {
 	return article()
 		.effect(useScope(FeedItemCss))
 		.children(
-			div().children(
+			div({ class: "avatar" }).ariaHidden("true").children(WalletAvatarSvg(post.author)),
+			div({ class: "content" }).children(
 				post.content.map((part) => {
 					switch (part.type) {
 						case PostContent.Part.TypeMap.Text:
@@ -25,47 +26,53 @@ export function FeedItem(post: Post) {
 				}),
 			),
 			footer().children(
+				a()
+					.rel("author")
+					.children(address().children(WalletAddress(post.author))),
 				time({ pubdate: "pubdate" })
 					.dateTime(date.toISOString())
 					.children(getRelativeTimeSignal(date)),
-				a()
-					.rel("author")
-					.children(
-						WalletAvatarSvg(post.author),
-						address().children(WalletAddress(post.author)),
-					),
 			),
 		);
 }
 
 const FeedItemCss = css`
 	:scope {
 		display: grid;
-		gap: 0.5em;
-
-		border-inline-start: solid;
-		border-width: 0.15em;
-		border-color: color-mix(in srgb, transparent, currentColor 85%);
+		grid-template-areas:
+			"avatar . content"
+			"avatar . ."
+			"avatar . footer";
+		grid-template-columns: 1.25em 0.25em 1fr;
+		grid-template-rows: auto 0.5em auto;
 
 		padding: 0.5em;
 	}
 
+	.avatar {
+		grid-area: avatar;
+		align-self: end;
+	}
+
+	.content {
+		grid-area: content;
+		color: color-mix(in srgb, transparent, currentColor 95%);
+	}
+
 	footer {
+		grid-area: footer;
 		display: grid;
 		gap: 0.5em;
-
-		color: color-mix(in srgb, transparent, currentColor 75%);
+		grid-template-columns: minmax(0, 16ch) auto;
+		align-items: center;
 	}
 
 	a[rel="author"] {
-		display: grid;
-		align-items: center;
-		grid-template-columns: 1em minmax(0, 10em);
-		gap: 0.5em;
-		font-size: 0.8em;
+		font-weight: bold;
 	}
 
 	time {
-		font-size: 0.7em;
+		font-size: 0.6em;
+		color: color-mix(in srgb, transparent, currentColor 75%);
 	}
 `;