增加豆瓣、Steam、装备管理适配页面

src/components/Footer.astro

@@ -35,12 +35,16 @@ const today = new Date();
       </div>
     </div>
     <div th:if="${theme.config?.footer?.footer_custom_html}" th:utext="${theme.config?.footer?.footer_custom_html}" class="footer-custom"></div>
-    <halo:footer />
+    <div class="footer-injected">
+      <halo:footer />
+    </div>
   </div>
 </footer>
 
 <style>
   footer {
+    position: relative;
+    z-index: 1;
     border-top: 1px solid var(--rule);
     background: linear-gradient(
       to bottom,
@@ -53,11 +57,11 @@ const today = new Date();
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
-    padding: 0 1.25rem;
-    min-height: 50px;
+    padding: 1.25rem;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    flex-wrap: wrap;
+    gap: 0.75rem;
   }
 
   .footer-bottom {
@@ -142,9 +146,75 @@ const today = new Date();
   }
 
   .footer-custom {
-    margin-left: auto;
+    width: 100%;
+    text-align: center;
     font-size: 0.85rem;
     color: var(--ink-3);
+    line-height: 1.8;
+  }
+
+  .footer-custom :global(a),
+  .footer-custom :global(p),
+  .footer-custom :global(span) {
+    display: inline;
+    margin-inline: 0.25em;
+  }
+
+  .footer-custom :global(a) {
+    color: var(--ink-3);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  .footer-custom :global(a):hover {
+    color: var(--ink-2);
+  }
+
+  .footer-custom :global(img) {
+    display: inline-block;
+    max-height: 26px;
+    vertical-align: middle;
+    border-radius: 4px;
+  }
+
+  .footer-custom :global(div) {
+    text-align: center;
+  }
+
+  .footer-injected {
+    width: 100%;
+    text-align: center;
+    font-size: 0.85rem;
+    color: var(--ink-3);
+    line-height: 1.8;
+  }
+
+  .footer-injected :global(a),
+  .footer-injected :global(p),
+  .footer-injected :global(span) {
+    display: inline;
+    margin-inline: 0.25em;
+  }
+
+  .footer-injected :global(a) {
+    color: var(--ink-3);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  .footer-injected :global(a):hover {
+    color: var(--ink-2);
+  }
+
+  .footer-injected :global(img) {
+    display: inline-block;
+    max-height: 26px;
+    vertical-align: middle;
+    border-radius: 4px;
+  }
+
+  .footer-injected :global(div) {
+    text-align: center;
   }
 
   @media (max-width: 768px) {
@@ -161,5 +231,15 @@ const today = new Date();
     .footer-bottom__right {
       justify-content: center;
     }
+
+    .footer-custom,
+    .footer-injected {
+      font-size: 0.75rem;
+    }
+
+    .footer-custom :global(img),
+    .footer-injected :global(img) {
+      max-height: 20px;
+    }
   }
 </style>

src/components/HeroSection.astro

@@ -3,6 +3,7 @@
 
 <section
   class="hero"
+  id="wi-hero"
   th:if="${theme.config?.hero?.hero_enabled != false}"
   th:classappend="${theme.config?.animation?.animation_breath == false} ? 'hero--no-breath'"
 >
@@ -17,7 +18,9 @@
     ></div>
   </div>
 
-  <div class="hero__content">
+  <div class="hero__blur-overlay" id="wi-hero-blur-overlay"></div>
+
+  <div class="hero__content" id="wi-hero-content">
     <h1
       class="hero__title"
       th:text="${theme.config?.hero?.hero_title != null and !#strings.isEmpty(theme.config?.hero?.hero_title) ? theme.config?.hero?.hero_title : site.title}"
@@ -43,7 +46,7 @@
     ></p>
   </div>
 
-  <div class="hero__scroll-indicator" aria-hidden="true">
+  <div class="hero__scroll-indicator" id="wi-hero-scroll-indicator" aria-hidden="true">
     <svg
       width="24"
       height="24"
@@ -105,9 +108,9 @@
 
 <style>
   .hero {
-    position: relative;
-    height: calc(100vh + 80px);
-    height: calc(100dvh + 80px);
+    position: fixed;
+    inset: 0;
+    z-index: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -119,8 +122,6 @@
       color-mix(in srgb, var(--bg) 90%, var(--mist-pink) 10%) 70%,
       var(--bg) 100%
     );
-    margin-top: -80px;
-    padding-top: 80px;
     width: 100%;
   }
 
@@ -130,6 +131,16 @@
     pointer-events: none;
   }
 
+  .hero__blur-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    backdrop-filter: blur(0px);
+    -webkit-backdrop-filter: blur(0px);
+    will-change: backdrop-filter;
+    pointer-events: none;
+  }
+
   .hero__orb {
     position: absolute;
     border-radius: 50%;
@@ -190,13 +201,14 @@
 
   .hero__content {
     position: relative;
-    z-index: 1;
+    z-index: 2;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: var(--space-xl);
     gap: var(--space-lg);
+    transition: opacity 0.4s ease, transform 0.4s ease;
   }
 
   .hero__title {
@@ -230,8 +242,10 @@
     bottom: 2rem;
     left: 50%;
     transform: translateX(-50%);
+    z-index: 2;
     color: var(--ink-3);
     animation: scrollHint 2s ease-in-out infinite;
+    transition: opacity 0.4s ease;
   }
 
   .hero--no-breath .hero__orb {