fix style

src/components/Footer.astro

@@ -34,10 +34,12 @@ const year = date.getFullYear();
             </div>
           </div>
         </div>
-        <div class="bottom">
+        <div class="flex flex-col md:flex-row items-center md:items-end text-sm pt-3 pb-1">
-          <div class="copyright">
+          <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>

src/components/MemberCard.astro

@@ -1,9 +1,9 @@
 ---
 // 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 type { Member } from "../store/member"
-import "../styles/global.css";
+import "../styles/global.css"
-const { member } = Astro.props as { member: Member };
+const { member } = Astro.props as { member: Member }
 const avatar = member.avatar;
 ---
 
@@ -19,21 +19,25 @@ const avatar = member.avatar;
           class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
         >
           {
-          avatar ? (
+          avatar
-            typeof avatar !== "string" ? (
+            ? (
+                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-3/4 navigate"
                 src="https://oss.nbtca.space/CA-logo.svg"
@@ -67,7 +71,6 @@ const avatar = member.avatar;
     animation: ease-in-out 1s exit forwards;
   }
 
-
   /* 定义 exit 动画 */
   @keyframes exit {
     0% {

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="flex items-center">
-            <div class="nav-item-wrapper">
+            {
-              <a href="/archive" class="nav-item-content">目录</a>
+              menuList.value.map(menu =>
-            </div>
+                (
-            <div class="nav-item-wrapper">
+                  <div class="px-3 lg:px-4">
-              <a href="https://repair.nbtca.space" class="nav-item-content">
+                    <a href={menu.link} class="nav-item-content hover:text-[#2997ff] text-nowrap">{menu.name}</a>
-                维修
-              </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>
         </div>
       </div>

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>
     )

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 />
+      <div class="flex-grow h-full">
         <slot />
+      </div>
       <Footer />
     </body>
   </html>

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-2xl lg:text-3xl leading-[1.125] font-bold pt-6 pb-4 lg:pb-6">协会成员</div>
-        <div class="text-[32px] leading-[1.125] font-bold py-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} />

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/",
   },
 ]

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;