a few styling fixes

examples/social-feed/src/components/Article.astro

@@ -1,6 +1,5 @@
 ---
 import ArticleHeader from './ArticleHeader.astro';
-import SplitLayout from './SplitLayout.astro';
 import type { Article, Post } from '../content/config.js';
 
 export interface Props {
@@ -9,31 +8,14 @@ export interface Props {
 
 const { article } = Astro.props;
 
-const { Content, headings } = await article.render();
+const { Content } = await article.render();
 ---
 
 <article>
 	<ArticleHeader {article} class="header" />
-	<SplitLayout reverse>
 		<div class="e-content">
 			<Content />
 		</div>
-
-		{
-			headings.length > 0 && (
-				<aside>
-					<h3>Table of contents</h3>
-					<ul>
-						{headings.map(({ slug, text }) => (
-							<li>
-								<a href={`${Astro.url.pathname}#${slug}`}>{text}</a>
-							</li>
-						))}
-					</ul>
-				</aside>
-			)
-		}
-	</SplitLayout>
 </article>
 
 <style>
@@ -60,30 +42,7 @@ const { Content, headings } = await article.render();
 		margin-inline: auto;
 	}
 
-	aside {
-		display: none;
-	}
-
-	aside ul {
-		list-style: none;
-		padding: 0;
-		margin-top: var(--theme-space-sm);
-	}
-
-	aside ul > * + * {
-		margin-block-start: var(--theme-space-xs);
-	}
-
-	aside a {
-		font-weight: bold;
-		text-decoration: none;
-	}
-
 	@media (min-width: 50em) {
-		aside {
-			display: block;
-		}
-
 		.e-content > :global(* + *) {
 			margin-block-start: 1.5em;
 		}

examples/social-feed/src/components/Pagination.astro

@@ -99,12 +99,13 @@ if (max < lastPage) items.push(makeItem(lastPage));
 	}
 	a {
 		text-decoration: none;
+		color: var(--theme-text);
 	}
 	.pagination-item > * {
 		border: 1.5px solid var(--theme-accent-dark);
 		border-radius: var(--theme-radius-base);
 		padding: 0.375rem 0.75rem;
-		background-color: var(--theme-accent-light);
+		background-color: var(--theme-bg-accent);
 		font-size: var(--theme-text-sm);
 		font-weight: 700;
 		box-shadow: var(--theme-shadow-sm);

examples/social-feed/src/components/TagList.astro

@@ -9,11 +9,15 @@ const { tags, ...attrs } = Astro.props;
 ---
 
 <ul {...attrs}>
-	{tags.map((tag) => (
-		<li>
-			<a href={`/category/${tag}/`} rel="category tag" class="p-category">{tag}</a>
-		</li>
-	))}
+	{
+		tags.map((tag) => (
+			<li>
+				<a href={`/category/${tag}/`} rel="category tag" class="p-category">
+					{tag}
+				</a>
+			</li>
+		))
+	}
 </ul>
 
 <style>
@@ -23,7 +27,7 @@ const { tags, ...attrs } = Astro.props;
 		display: flex;
 		gap: var(--theme-space-3xs);
 	}
-	li {
+	.p-category {
 		padding: var(--theme-space-3xs) var(--theme-space-2xs);
 		border-radius: var(--theme-radius-full);
 		background-color: var(--theme-accent-dark);
@@ -31,7 +35,7 @@ const { tags, ...attrs } = Astro.props;
 		font-size: var(--theme-text-sm);
 		font-weight: 500;
 	}
-	li::before {
+	.p-category::before {
 		content: '#';
 	}
 </style>