From 97027d98475c5d74ceb3fb649d209c76d55abeec Mon Sep 17 00:00:00 2001
From: sendevia <me@sendevia.top>
Date: Fri, 5 Dec 2025 23:24:37 +0800
Subject: [PATCH] feat(Header): refactor Header component to use semantic class
 names

---
 .vitepress/theme/components/Header.vue        | 16 +++----
 .../theme/styles/components/Header.scss       | 44 +++++++++----------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/.vitepress/theme/components/Header.vue b/.vitepress/theme/components/Header.vue
index c7b9c87..b17c3b5 100644
--- a/.vitepress/theme/components/Header.vue
+++ b/.vitepress/theme/components/Header.vue
@@ -14,13 +14,13 @@ if (typeof window !== "undefined") {
 </script>
 
 <template>
-  <header>
-    <div id="header-hero-container">
-      <span id="header-hero-headline">{{ frontmatter.title ? frontmatter.title : page.title }}</span>
-      <span id="header-hero-subtitle">{{ frontmatter.description }}</span>
-      <div id="header-impression">
+  <header class="Header">
+    <div class="container">
+      <span class="headline">{{ frontmatter.title ? frontmatter.title : page.title }}</span>
+      <span class="subtitle">{{ frontmatter.description }}</span>
+      <div class="impression">
         <svg width="0" height="0">
-          <filter id="noise-filter">
+          <filter class="noise-filter">
             <feTurbulence type="fractalNoise" baseFrequency="1" numOctaves="5" :seed="seed" result="noise" />
             <feColorMatrix type="saturate" values="0" result="desaturatedNoise" />
             <feComponentTransfer>
@@ -31,9 +31,9 @@ if (typeof window !== "undefined") {
             </feComponentTransfer>
           </filter>
         </svg>
-        <div id="header-impression-noise"></div>
+        <div class="noise"></div>
         <div
-          id="header-impression-image"
+          class="image"
           :style="{
             backgroundImage: frontmatter.impression ? `url('${frontmatter.impression}')` : `url('${defaultImpression}')`,
           }"
diff --git a/.vitepress/theme/styles/components/Header.scss b/.vitepress/theme/styles/components/Header.scss
index c2453a5..61d417c 100644
--- a/.vitepress/theme/styles/components/Header.scss
+++ b/.vitepress/theme/styles/components/Header.scss
@@ -1,6 +1,6 @@
 @use "../mixin";
 
-header {
+.Header {
   grid-column: span 12;
 
   position: relative;
@@ -13,7 +13,7 @@ header {
     display: none;
   }
 
-  #header-hero-container {
+  .container {
     display: flex;
     align-items: flex-start;
     flex-direction: column;
@@ -35,7 +35,7 @@ header {
     transition: var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
     z-index: 1;
 
-    #header-hero-headline {
+    .headline {
       @include mixin.typescale-style(
         "display-large",
         $font-size: 90rem,
@@ -51,7 +51,7 @@ header {
       transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
     }
 
-    #header-hero-subtitle {
+    .subtitle {
       @include mixin.typescale-style("headline-large", $font-size: 22rem, $line-height: 22rem);
 
       width: 100%;
@@ -62,7 +62,7 @@ header {
       transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
     }
 
-    #header-impression {
+    .impression {
       position: absolute;
       left: 0px;
       top: 0px;
@@ -75,7 +75,7 @@ header {
       transition: background-color var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
       z-index: -1;
 
-      #header-impression-noise {
+      .noise {
         position: relative;
 
         height: 100%;
@@ -87,7 +87,7 @@ header {
         z-index: 2;
       }
 
-      #header-impression-image {
+      .image {
         position: absolute;
         left: 0px;
         top: 0px;
@@ -104,11 +104,11 @@ header {
       @media (prefers-color-scheme: dark) {
         background-color: var(--md-ref-palette-secondary10);
 
-        #header-impression-noise {
+        .noise {
           opacity: 0.1;
         }
 
-        #header-impression-image {
+        .image {
           opacity: 0.4;
         }
       }
@@ -117,22 +117,22 @@ header {
 }
 
 @media screen and (max-width: 1600px) {
-  header {
+  .Header {
     grid-column: span 12;
   }
 }
 
 @media screen and (max-width: 1200px) {
-  header {
+  .Header {
     grid-column: span 8;
 
     height: 45vh;
     min-height: 360px;
 
-    #header-hero-container {
+    .container {
       padding: 5vw;
 
-      #header-hero-headline {
+      .headline {
         @include mixin.typescale-style(
           "display-large",
           $font-size: 7vw,
@@ -141,7 +141,7 @@ header {
         );
       }
 
-      #header-hero-subtitle {
+      .subtitle {
         @include mixin.typescale-style(
           "display-small",
           $font-size: 18rem,
@@ -154,13 +154,13 @@ header {
 }
 
 @media screen and (max-width: 840px) {
-  header {
+  .Header {
     grid-column: span 6;
 
-    #header-hero-container {
+    .container {
       width: 100%;
 
-      #header-hero-headline {
+      .headline {
         @include mixin.typescale-style(
           "display-large",
           $font-size: 8vw,
@@ -169,7 +169,7 @@ header {
         );
       }
 
-      #header-hero-subtitle {
+      .subtitle {
         @include mixin.typescale-style("headline-large", $font-size: 23rem, $line-height: 23rem);
       }
     }
@@ -177,13 +177,13 @@ header {
 }
 
 @media screen and (max-width: 600px) {
-  header {
+  .Header {
     grid-column: span 4;
 
-    #header-hero-container {
+    .container {
       padding: 30px;
 
-      #header-hero-headline {
+      .headline {
         @include mixin.typescale-style(
           "display-large",
           $font-size: 40rem,
@@ -194,7 +194,7 @@ header {
         word-break: break-word;
       }
 
-      #header-hero-subtitle {
+      .subtitle {
         @include mixin.typescale-style(
           "display-small",
           $font-size: 15rem,