feat(postlist): calculate postlist height according to pageSize

.vitepress/theme/components/Avatar.vue

@@ -34,7 +34,7 @@ const { theme } = useData();
   }
 
   .frame {
-    padding: 1.5rem 0;
+    padding: 0 0 1.5rem;
   }
 }
 </style>

.vitepress/theme/components/Container.vue

@@ -7,7 +7,7 @@
 <style module scoped>
 .container {
   justify-content: center;
-  padding: 1rem 2.5rem 0;
+  padding: 2rem 2rem 0;
 }
 
 @media (min-width: 640px) {

.vitepress/theme/components/HomeFeed.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import type { ContentData } from "vitepress";
-import { useData } from "vitepress";
+import { onContentUpdated, useData } from "vitepress";
 import { ref } from "vue";
 import { data as allPosts } from "../posts.data";
 import PostList from "./PostList.vue";
@@ -53,15 +53,28 @@ function turnTo(n: number) {
   const start = (n - 1) * page.size;
   postList.value = allPosts.slice(start, start + page.size);
 }
+
+function setPostListMinHeight() {
+  const root = document.querySelector(":root");
+  const h = theme.value.pageSize * 2.9;
+  (<HTMLElement>root).style.setProperty("--post-list-min-height", `${h}rem`);
+}
+
+onContentUpdated(() => {
+  setPostListMinHeight();
+});
 </script>
 
 <style module scope>
+:root {
+  --post-list-min-height: 29rem;
+}
+
 .postListBox {
-  min-height: 29rem;
+  min-height: var(--post-list-min-height);
 }
 
 .pagination {
-  padding-top: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;