refactor divider into a singal component

src/components/Divider.astro

@@ -0,0 +1,29 @@
+<div class="divider" aria-hidden="true"></div>
+
+<style>
+    .divider {
+        display: block;
+        width: 100%;
+        height: 12px;
+        margin-bottom: 1rem;
+        background: repeating-linear-gradient(
+            -45deg,
+            var(--deep-red) 0 14px,
+            transparent 14px 28px,
+            var(--deep-blue) 28px 42px,
+            transparent 42px 56px
+        );
+        pointer-events: none;
+    }
+
+    :global(html.dark) .divider,
+    :global(.dark) .divider {
+        background: repeating-linear-gradient(
+            -45deg,
+            #ff8a8a 0 14px,
+            transparent 14px 28px,
+            #9ecbff 28px 42px,
+            transparent 42px 56px
+        );
+    }
+</style>

src/components/Footer.astro

@@ -1,12 +1,14 @@
 ---
 import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
 import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
+import Divider from "@/components/Divider.astro";
 const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
 ---
 
 <footer class="footer">
+  <Divider />
   <a
     href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
     class="github"
@@ -82,22 +84,6 @@ const t = getTranslations(lang);
     text-align: center;
   }
 
-  .footer::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 12px;
-    margin-bottom: 1rem;
-    background: repeating-linear-gradient(
-      -45deg,
-      var(--deep-red) 0 14px,
-      transparent 14px 28px,
-      var(--deep-blue) 28px 42px,
-      transparent 42px 56px
-    );
-    pointer-events: none;
-  }
-
   .footer-content-mobile {
     display: none;
   }
@@ -108,16 +94,6 @@ const t = getTranslations(lang);
     /* display: inline-flex; */
   }
 
-  :global(.dark) .footer::before {
-    background: repeating-linear-gradient(
-      -45deg,
-      #ff8a8a 0 14px,
-      transparent 14px 28px,
-      #9ecbff 28px 42px,
-      transparent 42px 56px
-    );
-  }
-
   @media (max-width: 700px) {
     .footer-content-pc {
       display: none;

src/components/Header.astro

@@ -2,6 +2,7 @@
 import Navigation from "./Navigation.astro";
 import ThemeIcon from "./ThemeIcon.astro";
 import { getLangFromUrl, getTranslations } from "@/i18n";
+import Divider from "@/components/Divider.astro";
 
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
@@ -25,6 +26,9 @@ const t = getTranslations(lang);
         </div>
         <Navigation />
     </nav>
+    <div class="divider">
+        <Divider />
+    </div>
 </header>
 
 <style>
@@ -81,6 +85,11 @@ const t = getTranslations(lang);
         font-size: clamp(1.6rem, 6vw, 2.5rem);
     }
 
+    .divider {
+        margin-top: 0.2rem;
+        margin-bottom: 2rem;
+    }
+
     @media (max-width: 768px) {
         .site-header {
             padding-top: 0.25rem;

src/components/Navigation.astro

@@ -43,37 +43,10 @@ const t = getTranslations(lang);
 <style>
     .site-nav {
         margin: 1rem 0;
-        padding-bottom: 3rem;
+        padding-bottom: 1rem;
         position: relative;
     }
 
-    .site-nav::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 12px;
-        background: repeating-linear-gradient(
-            -45deg,
-            var(--deep-red) 0 14px,
-            transparent 14px 28px,
-            var(--deep-blue) 28px 42px,
-            transparent 42px 56px
-        );
-        pointer-events: none;
-    }
-
-    :global(.dark) .site-nav::after {
-        background: repeating-linear-gradient(
-            -45deg,
-            #ff8a8a 0 14px,
-            transparent 14px 28px,
-            #9ecbff 28px 42px,
-            transparent 42px 56px
-        );
-    }
-
     .site-nav-desktop {
         display: flex;
         gap: 1.5rem;