From 25d31db78e72d460fa292c47adbec358f8d43e1a Mon Sep 17 00:00:00 2001
From: ClasWen <clas.wen@icloud.com>
Date: Tue, 4 Jun 2024 20:35:46 +0800
Subject: [PATCH] fix style

---
 src/components/Footer.astro       |  6 ++-
 src/components/MemberCard.astro   | 87 ++++++++++++++++---------------
 src/components/Navigation.astro   | 54 ++++++++++++-------
 src/components/react/Calendar.tsx |  2 +
 src/layouts/BaseLayout.astro      |  6 ++-
 src/pages/about.astro             |  5 +-
 src/store/member.ts               | 12 ++---
 src/styles/global.css             | 14 -----
 8 files changed, 98 insertions(+), 88 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f336f8f..4b86063 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -34,10 +34,12 @@ const year = date.getFullYear();
             </div>
           </div>
         </div>
-        <div class="bottom">
-          <div class="copyright">
+        <div class="flex flex-col md:flex-row items-center md:items-end text-sm pt-3 pb-1">
+          <div class="">
             &copy; {`2018-${year}  ${SITE_NAME}`}
             <a href="//github.com/austin2035/astro-air-blog">astro-air-blog</a>
+          </div>
+          <div>
             <a href="https://beian.miit.gov.cn/" target="_blank" class="text-xs ml-2">浙ICP备2021030831</a>
           </div>
         </div>
diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro
index 4209b9d..144eed5 100644
--- a/src/components/MemberCard.astro
+++ b/src/components/MemberCard.astro
@@ -1,55 +1,59 @@
 ---
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
-import type { Member } from "../store/member";
-import "../styles/global.css";
-const { member } = Astro.props as { member: Member };
+import type { Member } from "../store/member"
+import "../styles/global.css"
+const { member } = Astro.props as { member: Member }
 const avatar = member.avatar;
 ---
 
-<a
-  href={member.link}
-  target="_blank"
-  rel="noopener noreferrer"
-  class="no-link-color"
->
-  <div class="flex flex-col gap-2 w-full">
-    <div class="w-full rounded-lg overflow-hidden">
-      <div
-        class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
-      >
-        {
-          avatar ? (
-            typeof avatar !== "string" ? (
+  <a
+    href={member.link}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="no-link-color"
+  >
+    <div class="flex flex-col gap-2 w-full">
+      <div class="w-full rounded-lg overflow-hidden">
+        <div
+          class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
+        >
+          {
+          avatar
+            ? (
+                typeof avatar !== "string"
+                  ? (
+                    <img
+                      class="object-cover h-full navigate"
+                      src={(await avatar)?.default?.src}
+                      alt=""
+                    />
+                    )
+                  : (
+                    <img
+                      class="object-cover h-full navigate"
+                      src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
+                      alt=""
+                    />
+                    )
+              )
+            : (
               <img
-                class="object-cover h-full navigate"
-                src={(await avatar)?.default?.src}
+                class="object-cover h-3/4 navigate"
+                src="https://oss.nbtca.space/CA-logo.svg"
                 alt=""
               />
-            ) : (
-              <img
-                class="object-cover h-full navigate"
-                src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
-                alt=""
-              />
-            )
-          ) : (
-            <img
-              class="object-cover h-3/4 navigate"
-              src="https://oss.nbtca.space/CA-logo.svg"
-              alt=""
-            />
-          )
+              )
         }
+        </div>
+      </div>
+      <div class="h-16">
+        <div class="text-lg">{member.alias}</div>
+        <div class="text-sm mt-0.5">{member.profile}</div>
       </div>
     </div>
-    <div class="h-16">
-      <div class="text-lg">{member.alias}</div>
-      <div class="text-sm mt-0.5">{member.profile}</div>
-    </div>
-  </div>
-</a>
-<style>
+  </a>
+    <style>
   /* 初始状态 */
   .navigate {
     /* cursor: pointer; */
@@ -66,7 +70,6 @@ const avatar = member.avatar;
   .navigate:active {
     animation: ease-in-out 1s exit forwards;
   }
- 
 
   /* 定义 exit 动画 */
   @keyframes exit {
@@ -83,4 +86,4 @@ const avatar = member.avatar;
     color: inherit;
     text-decoration: none;
   }
-</style>
+    </style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index f593b0e..1a35770 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -1,11 +1,35 @@
 ---
 import { SITE_TITLE } from "../consts"
+import { ref } from "vue"
+
+const menuList = ref<{
+  link: string
+  name: string
+}[]>([
+  {
+    link: "/archive",
+    name: "目录",
+  },
+  {
+    link: "https://repair.nbtca.space",
+    name: "维修",
+  },
+  {
+    link: "/calendar",
+    name: "日历",
+  },
+  {
+    link: "/about",
+    name: "关于我们",
+  },
+])
+
 ---
 
   <nav class="nav">
     <div class="nav-wrapper">
       <div class="nav-content-wrapper">
-        <div class="nav-content">
+        <div class="flex items-center justify-between">
           <a href="/" class="nav-title flex items-center gap-3">
             <img
               src="https://oss.nbtca.space/CA-logo.svg"
@@ -16,24 +40,16 @@ import { SITE_TITLE } from "../consts"
               {SITE_TITLE}
             </span>
           </a>
-          <div class="nav-menu">
-            <div class="nav-item-wrapper">
-              <a href="/archive" class="nav-item-content">目录</a>
-            </div>
-            <div class="nav-item-wrapper">
-              <a href="https://repair.nbtca.space" class="nav-item-content">
-                维修
-              </a>
-            </div>
-            <div class="nav-item-wrapper">
-              <a href="/calendar" class="nav-item-content">日历</a>
-            </div>
-            <div class="nav-item-wrapper">
-              <a href="/about" class="nav-item-content">关于</a>
-            </div>
-            <div class="nav-item-wrapper">
-              <a href="/join-us" class="nav-item-content">加入我们</a>
-            </div>
+          <div class="flex items-center">
+            {
+              menuList.value.map(menu =>
+                (
+                  <div class="px-3 lg:px-4">
+                    <a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
+                  </div>
+                ),
+              )
+            }
           </div>
         </div>
       </div>
diff --git a/src/components/react/Calendar.tsx b/src/components/react/Calendar.tsx
index 2ac3d5a..271e4de 100644
--- a/src/components/react/Calendar.tsx
+++ b/src/components/react/Calendar.tsx
@@ -8,6 +8,7 @@ class CalendarComponent extends React.Component {
   render() {
     const calendarStyle = {
       width: "80%",
+      maxWidth: "960px",
       margin: "20px auto",
     }
     return (
@@ -28,6 +29,7 @@ class CalendarComponent extends React.Component {
             minute: "2-digit",
             meridiem: false,
           }}
+          height="600px"
         />
       </div>
     )
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ec84110..5e775ea 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -11,9 +11,11 @@ const title = primaryTitle ? `${primaryTitle}  -  ${SITE_TITLE}` : SITE_TITLE;
     <head>
       <BaseHead title={title} description={SITE_DESCRIPTION} />
     </head>
-    <body class="page-landing">
+    <body class="flex flex-col min-h-screen">
       <Header />
-      <slot />
+      <div class="flex-grow h-full">
+        <slot />
+      </div>
       <Footer />
     </body>
   </html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 2be75e6..b541b1e 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -32,8 +32,7 @@ const memberGroupByYear = computed(() => {
   <BaseLayout primaryTitle="关于">
     <section class="pb-20 bg-[#f5f5f7]">
       <div class="section-content">
-      <!-- <div class="text-[32px] leading-[1.125] font-bold py-6">友情链接</div> -->
-        <div class="text-[32px] leading-[1.125] font-bold py-6">协会成员</div>
+        <div class="text-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6">协会成员</div>
         <div>
           {
           Object.keys(memberGroupByYear.value)
@@ -41,7 +40,7 @@ const memberGroupByYear = computed(() => {
             .map((year) => {
               return (
                 <div class="py-4 first:pt-2">
-                  <div class="text-[24px] font-bold pb-2">{year}</div>
+                  <div class="text-lg lg:text-2xl font-bold pb-2">{year}</div>
                   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-8">
                     {memberGroupByYear.value[year].map(member => (
                       <MemberCard member={member} />
diff --git a/src/store/member.ts b/src/store/member.ts
index 07da757..dcb056b 100644
--- a/src/store/member.ts
+++ b/src/store/member.ts
@@ -12,41 +12,41 @@ export const otherMembers: Member[] = [
     alias: "鲁冠泽",
     profile: "Java, Web。",
     avatar: import("../pages/posts/blogs/更多/assets/avatar/cimoccn.png"),
-    link: "https://cimoc.cn/"
+    link: "https://cimoc.cn/",
   },
   {
     memberId: undefined,
     alias: "江蕾",
     profile: "前端。",
     avatar: import("../pages/posts/blogs/更多/assets/avatar/DoEH51Nj97Ah64a.png"),
-    link: "https://www.cnblogs.com/JLay"
+    link: "https://www.cnblogs.com/JLay",
   },
   {
     memberId: undefined,
     alias: "黄文轩",
     profile: "网安, Linux和C/C++。",
     avatar: import("../pages/posts/blogs/更多/assets/avatar/4J9NfH1UZD3sz5I.png"),
-    link: "https://www.cnblogs.com/N3ptune"
+    link: "https://www.cnblogs.com/N3ptune",
   },
   {
     memberId: undefined,
     alias: "陈学书",
     profile: "Mac, 人工智能, Web和流水账。",
     avatar: import("../pages/posts/blogs/更多/assets/avatar/VjBGkQ6c58vH4l9.png"),
-    link: "https://www.cnblogs.com/Flat-White"
+    link: "https://www.cnblogs.com/Flat-White",
   },
   {
     memberId: undefined,
     alias: "王纯",
     profile: "Web。",
     avatar: import("../pages/posts/blogs/更多/assets/avatar/avatar.png"),
-    link: "https://chundot.org"
+    link: "https://chundot.org",
   },
   {
     memberId: undefined,
     alias: "章晟玮",
     profile: "算法记录。",
     avatar: undefined,
-    link: "https://bcscb.xyz/"
+    link: "https://bcscb.xyz/",
   },
 ]
diff --git a/src/styles/global.css b/src/styles/global.css
index 73b2bf3..00970d9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -381,20 +381,6 @@ a:disabled,
   z-index: 2;
 }
 
-.nav-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-}
-
-.nav-menu {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-
 
 a.nav-title:hover {
   cursor: pointer;