调整关于页面

src/assets/style.css

@@ -11,6 +11,7 @@
     --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
     --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
     --color-bg-1: light-dark(oklch(90% 0 0), oklch(25% 0.02 270));
+    --color-bg-2: light-dark(oklch(85% 0 0), oklch(20% 0.02 270));
 
     --color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
     --color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));

src/components/MainpageTypewriter.svelte

@@ -81,6 +81,13 @@
         '钻研手工开发',
       ],
     },
+    {
+      stages: [
+        { text: '', editing: ['b', 'bw', "bw'v", "bw'vj"] },
+        { text: '备战', editing: ['k', 'kc', "kc'y", "kc'yj"] },
+        '备战考研',
+      ],
+    },
   ]
 
   // 状态机定义

src/layout/BoringLayout.astro

@@ -35,6 +35,10 @@ const { title = '小帕的小窝' } = Astro.props
       margin-block: 1rem;
     }
 
+    & :global(p) {
+      margin-block: 0.25rem;
+    }
+
     & :global(a) {
       color: var(--color-link);
       text-decoration: none;

src/layout/FullLayoutV1.astro

@@ -63,6 +63,11 @@ const { title = '小帕的小窝' } = Astro.props
     navMain?.classList.add('nav-container-hidden')
   }
 
+  const navOpen = () => {
+    const navMain = document.getElementById('nav-main')
+    navMain?.classList.remove('nav-container-hidden')
+  }
+
   document.getElementById('nav-main')?.addEventListener('click', (e) => {
     const target = e.target as HTMLElement
     if (target.id == 'nav-main') {
@@ -70,6 +75,18 @@ const { title = '小帕的小窝' } = Astro.props
     }
   })
 
+  document.getElementById('nav-main')?.addEventListener('focusin', navOpen)
+  document.getElementById('nav-main')?.addEventListener('focusout', (e) => {
+    if (
+      e.relatedTarget &&
+      !document
+        .getElementById('nav-main')
+        ?.contains(e.relatedTarget as HTMLElement)
+    ) {
+      navClose()
+    }
+  })
+
   document.addEventListener('astro:before-preparation', () => {
     document.getElementById('loading-indicator')?.classList.remove('hidden')
   })
@@ -78,6 +95,24 @@ const { title = '小帕的小窝' } = Astro.props
     requestAnimationFrame(navClose)
     document.getElementById('loading-indicator')?.classList.add('hidden')
   })
+
+  document.addEventListener('astro:page-load', () => {
+    document.querySelectorAll('#nav-main li:has(a)').forEach((li) => {
+      console.log(li)
+      const child = li.querySelector('a')
+      if (!child) {
+        li.classList.add('url-here')
+        return
+      }
+      if (
+        window.location.href.replace(/\/$/, '') == child.href.replace(/\/$/, '')
+      ) {
+        li.classList.add('url-here')
+      } else {
+        li.classList.remove('url-here')
+      }
+    })
+  })
 </script>
 
 <style>
@@ -160,6 +195,11 @@ const { title = '小帕的小窝' } = Astro.props
           background-color: rgb(from var(--color-fg-0) r g b / 0.1);
         }
 
+        &.url-here {
+          color: var(--color-blue);
+          background-color: rgb(from var(--color-blue) r g b / 0.1);
+        }
+
         & > a {
           padding-inline: 0.75rem;
           width: 100%;
@@ -211,6 +251,7 @@ const { title = '小帕的小窝' } = Astro.props
       align-items: center;
       justify-content: center;
       font-size: 2rem;
+      cursor: pointer;
 
       &:active,
       &:hover {

src/pages/about.astro

@@ -1,36 +1,13 @@
 ---
 import BoringLayout from '../layout/BoringLayout.astro'
-
-const friends = [
-  ['https://omega98.top', '核子的博客'],
-  ['https://tnot.top', 'TNOT 的博客'],
-  ['https://ruusuge.top', 'ルース毛的博客'],
-  ['https://akarin.dev/', '宸佬的博客'],
-  ['https://wzq02.top', 'wzq02 的博客'],
-  ['https://r1kka.one/', "Rikka's Blog"],
-]
 ---
 
 <BoringLayout title="关于">
   <h1>关于<a href="/">这里</a></h1>
+  <p>这里是 passthem 和他朋友们的博客</p>
+  <p>主要由我也就是 passthem 运维这个网站，但是我会接收朋友们的投稿</p>
+  <h1>怎么感觉有点未完成</h1>
   <p>之前，我心血来潮，写了一个自己的博客系统，但是我把它的源代码搞丢了！</p>
   <p>正好想重新设计，所以，我打算重构了。但是，重构它很漫长</p>
   <p>这里的占位的东西，会慢慢填充的！</p>
-  <h1>友链</h1>
-  <p>
-    {
-      friends
-        .map((friend) => {
-          return <a href={friend[0]}>{friend[1]}</a>
-        })
-        .map((block, i) => {
-          if (i == friends.length - 1) {
-            return block
-          } else {
-            return [block, <span>・</span>]
-          }
-        })
-        .flat()
-    }
-  </p>
 </BoringLayout>

src/pages/index.astro

@@ -97,7 +97,40 @@ try {
     <div class="slide-title-design2" aria-hidden="true">
       <Icon name="mdi:email" />
     </div>
-    <h1>当前页面还在开发中......</h1>
+    <div class="contact-container">
+      <h1><div class="text">联系我</div><div class="animation"></div></h1>
+      <table>
+        <tbody>
+          <tr>
+            <th>Github</th>
+            <th><a href="https://github.com/passthem-desu">passthem-desu</a></th
+            >
+          </tr>
+          <tr>
+            <th>Youtube</th>
+            <th
+              ><a href="https://www.youtube.com/@Passthem183">@Passthem183</a
+              ></th
+            >
+          </tr>
+          <tr>
+            <th>OtoSite</th>
+            <th><a href="https://otomad.site/@passthem">@passthem</a></th>
+          </tr>
+          <tr>
+            <th>Email</th>
+            <th
+              ><a href="mailto:passthem183@gmail.com">passthem183@gmail.com</a
+              ></th
+            >
+          </tr>
+          <tr>
+            <th>Bilibili</th>
+            <th><a href="https://space.bilibili.com/92852604">passthem</a></th>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </section>
 
   <section class="slide">
@@ -110,7 +143,57 @@ try {
     <div class="slide-title-design2" aria-hidden="true">
       <Icon name="mdi:link-variant" />
     </div>
-    <h1>当前页面还在开发中......</h1>
+    <h1>友情链接</h1>
+    <div class="friends">
+      {
+        [
+          [
+            'https://omega98.top/images/blog_avatar.jpg',
+            'https://omega98.top',
+            '核子的博客',
+          ],
+          ['https://www.tnot.top/logo.png', 'https://tnot.top', 'TNOT 的博客'],
+          [
+            'https://ruusuge.top/img/logo_hu_cc283ac364b1bc0b.png',
+            'https://ruusuge.top',
+            'ルース毛的博客',
+          ],
+          [
+            'https://cdn.jsdelivr.net/gh/TransparentLC/transparentlc.github.io/img/avatar.jpg',
+            'https://akarin.dev',
+            '存在感消失的地方',
+          ],
+          [
+            'https://wzq02.top/assets/icons/favicon-96x96.png',
+            'https://wzq02.top',
+            'wzq02 的博客',
+          ],
+          [
+            'https://pics.r1kka.one/file/1738764637932_-305500c1acccdf39.jpg',
+            'https://r1kka.one/',
+            "Rikka's Blog",
+          ],
+          [
+            'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
+            'https://qm.qq.com/q/nDnHUy9KQo',
+            '有顶天变电站 (QQ)'
+          ],
+          [
+            'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
+            'https://qm.qq.com/q/QOpCVZcvyS',
+            '六方相的新月 (QQ)'
+          ]
+        ].map(b => <a href={b[1]} class="friend">
+          <div class="avatar">
+            <Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
+          </div>
+          <div class="description">
+            {b[2]}
+          </div>
+        </a>
+      )
+      }
+    </div>
   </section>
 </FullLayoutV1>
 
@@ -131,6 +214,11 @@ try {
 
     document.querySelectorAll('section.slide').forEach((ele) => {
       observer.observe(ele)
+      ;(ele as HTMLElement).addEventListener('focusin', () => {
+        ele.scrollIntoView({
+          block: 'start',
+        })
+      })
     })
   }
 
@@ -145,6 +233,7 @@ try {
 
   .slide {
     scroll-snap-align: start;
+    scroll-snap-stop: always;
     height: 100dvh;
     display: flex;
     align-items: center;
@@ -201,6 +290,24 @@ try {
     }
   }
 
+  @property --avatar-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-hover-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-rotation {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+  }
+
   /* 自我介绍部分 */
   .self-introduction {
     display: flex;
@@ -217,16 +324,32 @@ try {
     & > .avatar {
       margin: 0;
       border-radius: 50%;
+
       --final-width: clamp(160px, 30vw, 240px);
-      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
-      transform: rotate(10deg);
+      --avatar-scalar: 0;
+      --avatar-hover-scalar: 1;
+      --avatar-rotation: 20deg;
+      transition:
+        --avatar-rotation cubic-bezier(0.2, 1, 0.4, 1) 1.8s,
+        --avatar-scalar cubic-bezier(0.2, 2, 0.3, 0.8) 1.2s,
+        --avatar-hover-scalar cubic-bezier(0.2, 3, 0.4, 0.6) 0.6s,
+        width cubic-bezier(0.4, 1, 0.4, 1) 0.9s;
+
+      transform: rotate(var(--avatar-rotation)) scale(var(--avatar-scalar))
+        scale(var(--avatar-hover-scalar));
       aspect-ratio: 1 / 1;
       overflow: hidden;
       width: 0;
 
       section.slide.slide-visible & {
+        --avatar-scalar: 1;
+        --avatar-rotation: 0deg;
         width: var(--final-width);
-        transform: rotate(0);
+      }
+
+      &:hover,
+      &:focus {
+        --avatar-hover-scalar: 1.05;
       }
     }
 
@@ -288,7 +411,8 @@ try {
     }
   }
 
-  section:has(.thsx:hover) .motto > p {
+  section:has(.thsx:hover) .motto > p,
+  section:has(.thsx:focus) .motto > p {
     &:nth-child(1)::before {
       transition-delay: 0;
     }
@@ -401,4 +525,226 @@ try {
       }
     }
   }
+
+  /* 联络页 */
+  @keyframes bg-contact-roll {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: var(--bg-width) 0;
+    }
+  }
+
+  .contact-container {
+    & > h1 {
+      --height: 1.5em;
+      --skew-angle: 15deg;
+      --col1: var(--color-fg-0);
+      --bg-width: 2rem;
+
+      height: var(--height);
+      line-height: var(--height);
+      display: grid;
+      grid-template-columns: auto 1fr;
+      color: var(--color-bg-0);
+      margin-block-end: 0.5em;
+
+      & > .text {
+        background-color: var(--color-fg-0);
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1);
+          inset-block-start: 0;
+          height: 100%;
+          width: calc(tan(var(--skew-angle)) * var(--height));
+          background-image: linear-gradient(
+            to left bottom,
+            transparent 50%,
+            var(--col1) 50%
+          );
+        }
+      }
+
+      & > .animation {
+        content: '';
+        display: block;
+        background-image: linear-gradient(
+          90deg,
+          transparent 0,
+          transparent 25%,
+          var(--col1) 25%,
+          var(--col1) 75%,
+          transparent 75%,
+          transparent 100%
+        );
+        background-repeat: repeat;
+        background-size: var(--bg-width) 100%;
+        animation: bg-contact-roll infinite linear 2s;
+        transform: skewX(var(--skew-angle))
+          translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px));
+      }
+    }
+
+    & > table {
+      font-family: var(--font-mono);
+
+      & caption {
+        text-align: center;
+      }
+
+      & tr {
+        text-align: left;
+        display: grid;
+        grid-template-columns: 6em 16em;
+        gap: 1em;
+        line-height: 2em;
+
+        @media (max-width: 767px) {
+          grid-template-columns: 18em;
+          gap: 0;
+          line-height: 1.8em;
+          margin-block: 1em;
+        }
+
+        & th:nth-child(1) {
+          display: flex;
+          justify-content: space-between;
+
+          @media (max-width: 767px) {
+            justify-content: left;
+          }
+
+          &::after {
+            content: ':';
+          }
+        }
+
+        & th:nth-child(2) {
+          display: flex;
+          justify-content: space-between;
+
+          @media (max-width: 767px) {
+            justify-content: end;
+          }
+
+          &::before {
+            content: '[';
+          }
+
+          &::after {
+            content: ']';
+          }
+
+          &:hover,
+          &:has(a:focus) {
+            background-color: var(--color-fg-0);
+            color: var(--color-bg-0);
+          }
+
+          & > a {
+            text-align: center;
+            margin-inline: 1em;
+
+            &:focus {
+              outline: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* 友链页 */
+  .slide:has(>.friends) {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .friends {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    max-width: 50rem;
+    max-height: 30rem;
+    padding-block: 3rem;
+    overflow-y: scroll;
+    margin-inline: 1rem;
+    background-color: rgb(from var(--color-bg-0) r g b / .3);
+    border-radius: 2rem;
+    backdrop-filter: blur(5px);
+
+    & > .friend {
+      background-color: var(--color-bg-0);
+      display: grid;
+      align-items: center;
+      border-radius: 30px;
+      overflow: hidden;
+      width: 14rem;
+      height: 60px;
+      grid-template-columns: 60px 1fr;
+      position: relative;
+      isolation: isolate;
+
+      & > .avatar {
+        border-radius: 30px;
+        height: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        background-color: var(--color-bg-n);
+        /* box-shadow: 0 0 0 10px var(--color-bg-2); */
+        transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+      }
+
+      & > .description {
+        text-align: center;
+      }
+
+      &::before {
+        content: '';
+        display: block;
+        border-radius: 30px;
+        background-color: var(--color-bg-n);
+        position: absolute;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+
+        inset-inline-start: calc(-100% + 30px);
+        box-shadow: 0 0 0 10px var(--color-blue);
+        transition: inset-inline-start cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+      }
+
+      outline: solid 0px transparent;
+      outline-offset: 0px;
+      transition: all cubic-bezier(0.2, 1, 0.4, 1) 0.5s;
+
+      &:focus {
+        outline: solid 3px var(--color-blue);
+        outline-offset: 3px;
+      }
+
+      &:hover, &:focus {
+        transform: scale(1.1);
+      }
+
+      &:hover::before,
+      &:focus::before {
+        inset-inline-start: 0;
+      }
+
+      &:hover .avatar,
+      &:focus .avatar {
+        /* transform: rotate(360deg); */
+      }
+    }
+  }
 </style>