feat(config): add 'Zhi Mang Xing' font to Google Fonts (#130)

Adds the 'Zhi Mang Xing' font to the list of Google Fonts used in the
Nuxt.js application. This font is used in the custom Poe component to
display the poem text.

feat(module): format module date and display it

Formats the module date using the `dayjs` library and displays it in a
badge next to the module title. This provides more context about when
the module was published.

style(footer): adjust grid layout on smaller screens

Modifies the grid layout of the footer sitemap on smaller screens to
display the items in a two-column layout instead of four columns. This
improves the responsiveness and readability of the footer on mobile
devices.

feat(poe): increase font size and adjust animation

Increases the font size of the major and poe text in the custom Poe
component, making the text more prominent and readable. Additionally,
the animation duration of the poe text is adjusted to improve the
visual effect.

style(theme): adjust secondary color and foreground

Updates the secondary color and foreground in the Tailwind CSS
configuration to match the primary color, creating a more consistent
color scheme throughout the application.

assets/css/tailwind.css

@@ -22,8 +22,8 @@
     --primary: 47.75deg 92.27% 59.41%;
     --primary-foreground: 39deg 62.5% 6.27%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 47.75deg 92.27% 59.41% / 32%;
+    --secondary-foreground: 39deg 62.5% 6.27%;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;

components/custom/Poe.vue

@@ -5,10 +5,10 @@
 <template>
 	<div class="body pt-12 h-screen pb-12">
 		<div class="relative flex flex-row items-center justify-center gap-2 h-full">
-			<div class="major text-6xl text-center font-bold tracking-tight text-black">
+			<div class="major text-7xl text-center font-bold tracking-tight text-black">
 				谁怕？一蓑烟雨任平生
 			</div>
-			<div class="poe absolute top-1/2 left-1/2 text-5xl hover:z-20 -translate-x-1/2 -translate-y-1/2">
+			<div class="poe absolute top-1/2 left-1/2 text-6xl hover:z-20 -translate-x-1/2 -translate-y-1/2">
 				<div style="animation: fadeInOut 2s ease-in-out 0s forwards;">
 					莫听穿林打叶声
 				</div>
@@ -25,7 +25,7 @@
 
 <style scoped>
 .body {
-	font-family: Noto Serif SC;
+	font-family: Zhi Mang Xing;
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='24' height='24' fill='rgb(195,195,195)'%3E%3Ccircle cx='16' cy='16' r='1'/%3E%3C/svg%3E");
 }
 

components/public/Footer.vue

@@ -22,7 +22,7 @@ const props = defineProps<Props>()
 <template>
 	<footer class="mt-12 bg-white dark:bg-gray-900">
 		<div class="mx-auto w-full max-w-screen-xl">
-			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 pt-12 lg:py-8 md:grid-cols-4">
+			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 pt-12 md:grid-cols-4">
 				<div v-for="item in props.sitemap" :key="item.title">
 					<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{{ item.title }}</h2>
 					<ul v-for="list in item.list" :key="list.title"

components/space/Module.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { inferRouterOutputs } from '@trpc/server'
+import dayjs from 'dayjs'
 import type { AppRouter } from '@/server/trpc/routers'
 
 type RouterOutput = inferRouterOutputs<AppRouter>
@@ -32,8 +33,10 @@ const props = defineProps<Props>()
 					:width="20"
 					:url="module.url"
 				/>
-				<div class="truncate ">
-					{{ module.title }}
+				<div class="truncate">
+					<span
+						class="bg-accent color-accent-foreground rounded-full px-2 py-0.5 mr-1"
+					>{{ dayjs(module.date).format('M') }} 月</span>{{ module.title }}
 				</div>
 			</NuxtLink>
 		</div>

nuxt.config.ts

@@ -130,6 +130,7 @@ export default defineNuxtConfig({
 	googleFonts: {
 		families: {
 			'Noto Serif SC': true,
+			'Zhi Mang Xing': true,
 		},
 	},