修改: 變更標頭樣式

mc-cloud-town · Feb 19, 2024 · b90ab03 · b90ab03
1 parent 9d9601d
commit b90ab03
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/src/components/homePage/PageHeader.tsx b/src/components/homePage/PageHeader.tsx
@@ -30,15 +30,18 @@ const Mask = styled.div`
     opacity: 0.6;
 `;
 
-const HeaderText = styled.div`
-    font-weight: bolder;
+const HeaderTextContainer = styled.div`
     position: absolute;
-    color: white;
     text-align: center;
-    font-size: 2rem;
     z-index: 3;
 `;
 
+const HeaderText = styled.h1`
+    font-weight: bolder;
+    color: white;
+    font-size: 2rem;
+`;
+
 const BackgroundVideo = styled.iframe`
     position: absolute;
     top: 50%;
@@ -62,17 +65,19 @@ const PageHeader = ({ youtubeId, start = 0 }: {
     <VideoBackgroundHeader>
       <Mask>
       </Mask>
-      <HeaderText>
-        <ReactTyped
-          strings={['Welcome to Cloud Town Exquisite Craft', '歡迎來到雲鎮工藝 | CTEC', '欢迎来到云镇工艺 | CTEC']}
-          typeSpeed={40}
-          backSpeed={50}
-          loop={true}
-          showCursor={true}
-          cursorChar="|"
-          backDelay={1000}
-        />
-      </HeaderText>
+      <HeaderTextContainer>
+        <HeaderText>
+          <ReactTyped
+            strings={['Welcome to Cloud Town Exquisite Craft', '歡迎來到雲鎮工藝 | CTEC', '欢迎来到云镇工艺 | CTEC']}
+            typeSpeed={40}
+            backSpeed={50}
+            loop={true}
+            showCursor={true}
+            cursorChar="|"
+            backDelay={1000}
+          />
+        </HeaderText>
+      </HeaderTextContainer>
       <VideoBackgroundContainer>
         <BackgroundVideo
           src={videoSrc}