feat:enhance ui

nexmoe · Aug 5, 2024 · 0a32819 · 0a32819
1 parent e25760c
commit 0a32819
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 64 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 240, 17%, 98%;
+    --background: 240deg 11.11% 96.47%;
     --foreground: 222.2 84% 4.9%;
 
     --muted: 210 40% 96.1%;

diff --git a/components/flow/Header.vue b/components/flow/Header.vue
@@ -41,6 +41,5 @@ const props = defineProps<Props>()
 <style>
 .flow-header {
 	padding-left: var(--n-spacing);
-	font-family: Noto Serif SC;
 }
 </style>
diff --git a/components/module/Gallery.vue b/components/module/Gallery.vue
@@ -30,7 +30,7 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 		</div>
 		<div
 			v-if="props.module.image"
-			class="shadow-sm border rounded-2xl relative overflow-hidden"
+			class="shadow-sm border rounded-xl relative overflow-hidden"
 			:style="{
 				aspectRatio: `${module.imageWidth}/${module.imageHeight}`,
 			}"

diff --git a/components/module/Image.vue b/components/module/Image.vue
@@ -18,17 +18,48 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 </script>
 
 <template>
-	<div class="module shu-card p-3 gap-1 flex flex-col justify-between">
-		<div class="space-y-4">
-			<div class="flex flex-row items-center pt-1 gap-2 px-2.5">
-				<div class="w-5 h-5 block overflow-hidden">
-					<LinkIcon
-						:width="20"
-						:url="props.module.url"
-					/>
-				</div>
-				<div>
-					{{ formatDateTime(module.date) }}
+	<div class="module shu-card p-7 gap-3 flex flex-col justify-between">
+		<div class="flex flex-row items-center gap-2">
+			<div class="text-neutral-600">
+				{{ formatDateTime(module.date) }}
+			</div>
+			<div class="w-5 h-5 block overflow-hidden">
+				<LinkIcon
+					:width="20"
+					:url="props.module.url"
+				/>
+			</div>
+		</div>
+		<div class="space-y-6">
+			<div class="space-y-4">
+				<h3
+					v-if="!flow?.configNoTitle"
+					class="card-title font-bold text-2xl tracking-tight text-neutral-950"
+				>
+					{{ props.module.title }}
+				</h3>
+				<div
+					v-if="!flow?.configNoContent && text !== ' '"
+					class="text-base line-clamp-4"
+					v-html="text"
+				/>
+				<div
+					v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
+					class="flex flex-row items-center gap-1"
+				>
+					<template v-if="(props.module.platform?.length || 0) > 1">
+						<div
+							v-for="platform in props.module.platform"
+							:key="platform"
+							class="w-7 h-7 block"
+							@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
+						>
+							<LinkIcon
+								:width="28"
+								:url="platform"
+							/>
+						</div>
+					</template>
 				</div>
 			</div>
 			<div
@@ -48,37 +79,6 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 				/>
 			</div>
 		</div>
-		<div class="space-y-4 px-3 py-3">
-			<h3
-				v-if="!flow?.configNoTitle"
-				class="card-title font-bold text-2xl tracking-tight text-black"
-			>
-				{{ props.module.title }}
-			</h3>
-			<div
-				v-if="!flow?.configNoContent && text !== ' '"
-				class="line-clamp-3"
-				v-html="text"
-			/>
-			<div
-				v-if="!props.module.image || (props.module.platform?.length || 0) > 1"
-				class="flex flex-row items-center gap-1"
-			>
-				<template v-if="(props.module.platform?.length || 0) > 1">
-					<div
-						v-for="platform in props.module.platform"
-						:key="platform"
-						class="w-7 h-7 block"
-						@click="navigateTo(platform, { open: { target: '_blank' }, external: true })"
-					>
-						<LinkIcon
-							:width="28"
-							:url="platform"
-						/>
-					</div>
-				</template>
-			</div>
-		</div>
 	</div>
 </template>
 
@@ -93,7 +93,4 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 .card :deep(iframe) {
 	max-width: 100%;
 }
-.card-title {
-	font-family: Noto Serif SC;
-}
 </style>
diff --git a/components/public/Footer.vue b/components/public/Footer.vue
@@ -20,21 +20,21 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-	<footer class="mt-12 bg-white dark:bg-gray-900">
+	<footer class="mt-12 bg-white dark:bg-neutral-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 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>
+					<h2 class="mb-6 text-sm font-semibold text-neutral-900 uppercase dark:text-white">{{ item.title }}</h2>
 					<ul v-for="list in item.list" :key="list.title"
-						class="text-gray-500 dark:text-gray-400 font-medium">
+						class="text-neutral-500 dark:neutral-gray-400 font-medium">
 						<li class="mb-4">
 							<a :href="list.url" class="hover:underline">{{ list.title }}</a>
 						</li>
 					</ul>
 				</div>
 			</div>
 			<div class="px-4 py-6 md:flex md:items-center md:justify-between">
-				<span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center">© {{ dayjs(new
+				<span class="text-sm text-neutral-500 dark:text-neutral-300 sm:text-center">© {{ dayjs(new
 			Date()).format('YYYY') }} {{ props.siteName }} All Rights Reserved. Powered by <a class="underline"
 						href="https://github.com/nexmoe/roam-space" target="_blank">Roam Space</a>
 				</span>

diff --git a/components/public/Prose.vue b/components/public/Prose.vue
@@ -10,19 +10,18 @@ const props = defineProps<Props>()
         <h1 class="font-bold text-3xl">
             {{ props.title }}
         </h1>
-        <div v-if="$slots.default" class="description flex flex-col gap-4">
+        <div v-if="$slots.default" class="description flex text-3xl flex-col gap-4 text-neutral-600">
             <slot />
         </div>
     </div>
 </template>
 
 <style scoped>
 .prose {
-    @apply pt-12 pb-16 flex flex-col gap-4;
+    @apply pt-20 pb-24 flex flex-col gap-4;
     max-width: 70ch;
     font-size: 1rem;
     line-height: 1.75;
-    font-family: Noto Serif SC;
     padding-left: var(--n-spacing)
 }
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -27,12 +27,11 @@ const config = await useGetConfig()
 }
 
 body {
-	/* font-family: Noto Serif SC; */
 	/* background-color: #f7f5fd; */
 }
 
 .shu-card {
-	@apply relative hover:z-10 hover:shadow-2xl transition-all h-full overflow-hidden rounded-3xl bg-white text-sm leading-6;
+	@apply relative hover:z-10 hover:shadow-2xl transition-all h-full overflow-hidden rounded-2xl bg-white text-sm leading-6;
 }
 
 .nexmoe-bg {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -129,9 +129,10 @@ export default defineNuxtConfig({
 	},
 
 	googleFonts: {
+		text: '莫听穿林打叶声何妨吟啸且徐行竹杖芒鞋轻胜马谁怕？一蓑烟雨任平生',
 		families: {
-			'Noto Serif SC': true,
-			'Zhi Mang Xing': true,
+			'Zhi Mang Xing': {
+			},
 		},
 	},
 

diff --git a/public/project.json b/public/project.json
@@ -1,24 +1,24 @@
 [
 	{
-		"title": "<span style='color:#df5d64;'>小舒同学</span>",
+		"title": "小舒同学",
 		"image": "https://xiaoshuapp.com/icon.svg",
 		"content": "轻松得使你的收藏夹变成强大的新标签页，让你重新聚焦真正重要的事情",
 		"url": "https://xiaoshuapp.com/"
 	},
 	{
-		"title": "<span style='color:#665cd5;'>探索者小舒</span>",
+		"title": "探索者小舒",
 		"image": "https://xiaoshuapp.com/explorer/icon.svg",
 		"content": "以最轻松快捷的方式在侧栏切换搜索",
 		"url": "https://xiaoshuapp.com/explorer/"
 	},
 	{
-		"title": "<span style='color:#f04e45;'>漫游云野</span>",
+		"title": "漫游云野",
 		"image": "https://i.dawnlab.me/50929d62d1850bcc95495ff522ee127c.th.png/nexmoe",
 		"content": "轻松随意地与你朋友分享你的宝藏，发现互联网上的秘宝",
 		"url": "https://roam.mixcm.com"
 	},
 	{
-		"title": "<span style='color:#ff5454;'>Monitor Pro</span>",
+		"title": "Monitor Pro",
 		"image": "https://i.dawnlab.me/b49f4dc77408b1e5446ad667323e7eda.png",
 		"content": "监控一切你在意的资源信息",
 		"url": "https://marketplace.visualstudio.com/items?itemName=nexmoe.monitor-pro"

diff --git a/utils/date.ts b/utils/date.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
 
 export function formatDateTime(source: string | number) {
-	return dayjs(source).format('MMMM DD, YYYY')
+	return dayjs(source).format('YYYY 年 M 月 D 日')
 }