refactor: 重構 header navbar 命名及架構

JarvisChao · Sep 10, 2024 · b75ff71 · b75ff71
1 parent d654d46
commit b75ff71
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 100 deletions.
diff --git a/404.html b/404.html
@@ -31,44 +31,46 @@
     <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <nav class="l-navbar"><a class="l-navbar__logo-mask" href="./"><img src="img/logo/logo.svg" alt="大港開唱"></a>
-      <div class="o-burger l-navbar__burger" onclick="toggleNavbar()">
-        <div class="o-burger__wrap">
-          <div class="o-burger__line"></div>
-          <div class="o-burger__line"></div>
-          <div class="o-burger__line"></div>
+    <header class="l-header"><a class="l-header__logo-mask" href="./"><img src="img/logo/logo.svg" alt="大港開唱"></a>
+      <div class="l-header__burger">
+        <div class="o-burger" onclick="toggleNav()">
+          <div class="o-burger__wrap">
+            <div class="o-burger__line"></div>
+            <div class="o-burger__line"></div>
+            <div class="o-burger__line"></div>
+          </div>
         </div>
       </div>
-      <div class="l-navbar__body">
-        <div class="l-navbar__menu">
-          <ul class="l-navbar__btn-box --link">
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">INFO</span><span>相關資訊</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">NEWS</span><span>最新消息</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">ARTISTS</span><span>藝人名單</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">TIMETABLE</span><span>節目表</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">TICKET</span><span>購票資訊</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="map.html"><span class="u-ff-en u-text-lg">MAP</span><span>地圖導覽</span></a></li>
+      <nav class="c-nav l-header__nav" data-lenis-prevent>
+        <div class="c-nav__menu">
+          <ul class="c-nav__btn-box --link">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#lineup"><span class="u-ff-en u-text-lg">LINEUP</span><span>演出陣容</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#news"><span class="u-ff-en u-text-lg">NEWS</span><span>最新消息</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#about"><span class="u-ff-en u-text-lg">ABOUT</span><span>關於大港</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="##"><span class="u-ff-en u-text-lg">TIMETABLE</span><span>節目表</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="##"><span class="u-ff-en u-text-lg">TICKET</span><span>購票資訊</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="map.html"><span class="u-ff-en u-text-lg">MAP</span><span>地圖導覽</span></a></li>
           </ul>
-          <ul class="l-navbar__btn-box --icon">
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.facebook.com/megaportfest/" target="_blank">
+          <ul class="c-nav__btn-box --icon">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.facebook.com/megaportfest/" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:facebook-fill"></iconify-icon></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.instagram.com/megaportfest/" target="_blank">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.instagram.com/megaportfest/" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:ins-fill"></iconify-icon></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.youtube.com/channel/UC7xWU14_GGYKVqoSLg1M8EQ/feed" target="_blank">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.youtube.com/channel/UC7xWU14_GGYKVqoSLg1M8EQ/feed" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:youtube-fill"></iconify-icon></a></li>
           </ul>
         </div>
-      </div>
-    </nav>
-    <header class="l-header-inner" data-aos="fade-down">
-      <div class="c-blockade l-header-inner__blockade">
+      </nav>
+    </header>
+    <div class="l-hero-inner" data-aos="fade-down">
+      <div class="c-blockade l-hero-inner__blockade">
         <div class="c-blockade__line"><span class="c-blockade__text">404 ERROR 找不到頁面</span></div>
         <div class="c-blockade__line"><span class="c-blockade__text">404 ERROR 找不到頁面</span></div>
         <div class="c-blockade__line"><span class="c-blockade__text">404 ERROR 找不到頁面</span></div>
         <div class="c-blockade__line"><span class="c-blockade__text">404 ERROR 找不到頁面</span></div>
       </div>
       <h2 class="u-text-3xl">404 ERROR</h2>
-    </header>
+    </div>
     <main class="l-main">
       <section class="l-error">
         <div class="container">

diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/css/swiper-bundle.min.css b/css/swiper-bundle.min.css
diff --git a/index.html b/index.html
@@ -31,52 +31,54 @@
     <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <nav class="l-navbar"><a class="l-navbar__logo-mask" href="./"><img src="img/logo/logo.svg" alt="大港開唱"></a>
-      <div class="o-burger l-navbar__burger" onclick="toggleNavbar()">
-        <div class="o-burger__wrap">
-          <div class="o-burger__line"></div>
-          <div class="o-burger__line"></div>
-          <div class="o-burger__line"></div>
+    <header class="l-header"><a class="l-header__logo-mask" href="./"><img src="img/logo/logo.svg" alt="大港開唱"></a>
+      <div class="l-header__burger">
+        <div class="o-burger" onclick="toggleNav()">
+          <div class="o-burger__wrap">
+            <div class="o-burger__line"></div>
+            <div class="o-burger__line"></div>
+            <div class="o-burger__line"></div>
+          </div>
         </div>
       </div>
-      <div class="l-navbar__body">
-        <div class="l-navbar__menu">
-          <ul class="l-navbar__btn-box --link">
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">INFO</span><span>相關資訊</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">NEWS</span><span>最新消息</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">ARTISTS</span><span>藝人名單</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">TIMETABLE</span><span>節目表</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="##"><span class="u-ff-en u-text-lg">TICKET</span><span>購票資訊</span></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="map.html"><span class="u-ff-en u-text-lg">MAP</span><span>地圖導覽</span></a></li>
+      <nav class="c-nav l-header__nav" data-lenis-prevent>
+        <div class="c-nav__menu">
+          <ul class="c-nav__btn-box --link">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#lineup"><span class="u-ff-en u-text-lg">LINEUP</span><span>演出陣容</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#news"><span class="u-ff-en u-text-lg">NEWS</span><span>最新消息</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="./#about"><span class="u-ff-en u-text-lg">ABOUT</span><span>關於大港</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="##"><span class="u-ff-en u-text-lg">TIMETABLE</span><span>節目表</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="##"><span class="u-ff-en u-text-lg">TICKET</span><span>購票資訊</span></a></li>
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="map.html"><span class="u-ff-en u-text-lg">MAP</span><span>地圖導覽</span></a></li>
           </ul>
-          <ul class="l-navbar__btn-box --icon">
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.facebook.com/megaportfest/" target="_blank">
+          <ul class="c-nav__btn-box --icon">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.facebook.com/megaportfest/" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:facebook-fill"></iconify-icon></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.instagram.com/megaportfest/" target="_blank">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.instagram.com/megaportfest/" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:ins-fill"></iconify-icon></a></li>
-            <li class="l-navbar__btn-wrap"><a class="l-navbar__btn" href="https://www.youtube.com/channel/UC7xWU14_GGYKVqoSLg1M8EQ/feed" target="_blank">
+            <li class="c-nav__btn-wrap"><a class="c-nav__btn" href="https://www.youtube.com/channel/UC7xWU14_GGYKVqoSLg1M8EQ/feed" target="_blank">
                 <iconify-icon class="u-icon --md" icon="mingcute:youtube-fill"></iconify-icon></a></li>
           </ul>
         </div>
-      </div>
-    </nav>
-    <header class="l-header" data-aos="fade">
-      <div class="swiper l-header__swiper">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide l-header__slide">
-            <div class="l-header__img-mask"><img class="u-object-fit" src="img/banner/banner-img01.jpg"></div>
-          </div>
-          <div class="swiper-slide l-header__slide">
-            <div class="l-header__img-mask"><img class="u-object-fit" src="img/banner/banner-img02.jpg"></div>
-          </div>
-          <div class="swiper-slide l-header__slide">
-            <div class="l-header__img-mask"><img class="u-object-fit" src="img/banner/banner-img03.jpg"></div>
+      </nav>
+    </header>
+    <main class="l-main">
+      <div class="l-hero" data-aos="fade">
+        <div class="swiper l-hero__swiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide l-hero__slide">
+              <div class="l-hero__img-mask"><img class="u-object-fit" src="img/banner/banner-img01.jpg"></div>
+            </div>
+            <div class="swiper-slide l-hero__slide">
+              <div class="l-hero__img-mask"><img class="u-object-fit" src="img/banner/banner-img02.jpg"></div>
+            </div>
+            <div class="swiper-slide l-hero__slide">
+              <div class="l-hero__img-mask"><img class="u-object-fit" src="img/banner/banner-img03.jpg"></div>
+            </div>
           </div>
         </div>
       </div>
-    </header>
-    <main class="l-main">
-      <section class="l-lineup u-pb-0 u-gradient">
+      <section class="l-lineup u-pb-0 u-gradient" id="lineup">
         <div class="c-blockade l-lineup__blockade">
           <div class="c-blockade__line"><span class="c-blockade__text">台灣最生猛海派的音樂祭 ——『 大港開唱 』</span></div>
           <div class="c-blockade__line"><span class="c-blockade__text">台灣最生猛海派的音樂祭 ——『 大港開唱 』</span></div>
@@ -138,7 +140,7 @@ <h3 class="u-text-xl c-artist-card__title">Da Wang</h3>
           </div>
         </div>
       </section>
-      <section class="l-news">
+      <section class="l-news" id="news">
         <div class="l-news__btn-swiper --prev">
           <iconify-icon class="u-icon" icon="fa-solid:arrow-left"></iconify-icon>
         </div>
@@ -221,7 +223,7 @@ <h3 class="u-text-md">大港線上直播 來囉！</h3>
           </div>
         </div>
       </section>
-      <section class="l-about u-gradient">
+      <section class="l-about u-gradient" id="about">
         <div class="container">
           <div class="u-mb-80" data-aos="fade-right">
             <h2 class="u-text-4xl u-color-secondary">ABOUT<span class="u-text-lg">MEGAPORT FESTIVAL</span></h2>
@@ -299,7 +301,7 @@ <h3 class="u-text-2xl u-mb-16">「人生」與「音樂」</h3>
     <script>
       //-- Swiper
       if (window.Swiper !== undefined) {
-        const headerSwiper = new Swiper('.l-header__swiper', {
+        const headerSwiper = new Swiper('.l-hero__swiper', {
           effect: 'fade',
           fadeEffect: {
             // crossFade: true,

diff --git a/js/main.min.js b/js/main.min.js
diff --git a/js/swiper-bundle.min.js b/js/swiper-bundle.min.js