From 9addc2cbf10ce9050ccc9f726f9c320f9ac62e09 Mon Sep 17 00:00:00 2001
From: Tony Sullivan <tony.f.sullivan@outlook.com>
Date: Mon, 18 Sep 2023 13:37:12 -0500
Subject: [PATCH] mobile layout for card header

---
 .../social-feed/src/components/Card.astro     | 19 ++++++++++++---
 examples/social-feed/src/layouts/Feed.astro   | 23 +------------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/examples/social-feed/src/components/Card.astro b/examples/social-feed/src/components/Card.astro
index 54495030c..a8d21f6df 100644
--- a/examples/social-feed/src/components/Card.astro
+++ b/examples/social-feed/src/components/Card.astro
@@ -75,9 +75,9 @@ const postUrl = `/post/${post.slug}/`;
 	header {
 		display: grid;
 		grid-template-columns: auto auto 1fr;
-		grid-template-areas: 'avatar name nickname' 'avatar tags tags';
+		grid-template-areas: 'avatar name' 'avatar nickname' 'tags tags';
 		align-items: center;
-		row-gap: var(--theme-space-2xs);
+		row-gap: var(--theme-space-3xs);
 		column-gap: var(--theme-space-sm);
 	}
 	.h-card .u-photo {
@@ -99,12 +99,16 @@ const postUrl = `/post/${post.slug}/`;
 	}
 	.tags {
 		grid-area: tags;
+		margin-block-start: var(--theme-space-2xs);
 	}
-	article > img {
+	article > .u-photo {
 		aspect-ratio: 21/9;
 		object-fit: cover;
 		border-radius: var(--theme-radius-lg);
 	}
+	.e-content > :global(* + *) {
+		margin-block-start: 1em;
+	}
 	footer {
 		display: flex;
 		align-items: center;
@@ -113,4 +117,13 @@ const postUrl = `/post/${post.slug}/`;
 	footer > *:only-child {
 		margin-inline-start: auto;
 	}
+	@media (min-width: 50em) {
+		header {
+			grid-template-areas: 'avatar name nickname' 'avatar tags tags';
+		}
+
+		.tags {
+			margin-block-start: 0;
+		}
+	}
 </style>
diff --git a/examples/social-feed/src/layouts/Feed.astro b/examples/social-feed/src/layouts/Feed.astro
index f6b0d7a43..4dee07dd5 100644
--- a/examples/social-feed/src/layouts/Feed.astro
+++ b/examples/social-feed/src/layouts/Feed.astro
@@ -12,26 +12,5 @@ export interface Props extends LayoutProps {}
 		<div>
 			<slot />
 		</div>
-</SplitLayout>
+	</SplitLayout>
 </Layout>
-
-<style>
-	.flex-col {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.wrapper {
-		gap: var(--theme-size-xl);
-		margin: 0 auto;
-		width: 100%;
-		max-width: var(--theme-content-width);
-	}
-
-	@media (min-width: 50em) {
-		.wrapper {
-			display: grid;
-			grid-template-columns: 12rem 1fr;
-		}
-	}
-</style>