css

.build.yml

@@ -5,7 +5,7 @@ packages:
   - npm
   - rsync
 environment:
-  site: mzhang.srht.site
+  site: mzhang.io
 secrets:
   - 0b26b413-7901-41c3-a4e2-3c752228ffcb
 sources:

src/components/PostList.astro

@@ -5,13 +5,14 @@ import { sortBy } from "lodash-es";
 import TagList from "./TagList.astro";
 
 interface Props {
+  className: string;
   basePath: string;
   drafts?: "exclude" | "include" | "only";
   filteredPosts?: Post[];
 }
 
 type Post = CollectionEntry<"posts">;
-const { basePath, drafts: includeDrafts, filteredPosts } = Astro.props;
+const { className, basePath, drafts: includeDrafts, filteredPosts } = Astro.props;
 
 type FilterFn = (_: Post) => boolean;
 
@@ -40,7 +41,7 @@ else allPosts = await getCollection("posts", filter);
 const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
 ---
 
-<table class="postListing">
+<table class={`postListing ${className}`}>
   {
     sortedPosts.map((post) => {
       return (

src/pages/index.astro

@@ -2,6 +2,7 @@
 import PostList from "../components/PostList.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { join } from "path";
+import "../styles/home.scss";
 
 const currentUrl = Astro.url;
 ---
@@ -9,5 +10,5 @@ const currentUrl = Astro.url;
 <BaseLayout>
   <h2>Blog</h2>
 
-  <PostList basePath={join(currentUrl.pathname, "posts")} />
+  <PostList className="home" basePath={join(currentUrl.pathname, "posts")} />
 </BaseLayout>

src/styles/home.scss

@@ -0,0 +1,10 @@
+.home.postListing {
+  .tags {
+    gap: 4px;
+
+    .tag {
+      background-color: inherit;
+      padding: 0;
+    }
+  }
+}