[edit] add zindex effect

Joy-port · Aug 18, 2021 · e557c79 · e557c79
1 parent 689aa36
commit e557c79
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 28 deletions.
diff --git a/app/assets/js/all.js b/app/assets/js/all.js
@@ -1,3 +1,6 @@
+//Aos
+AOS.init();
+
 //swipers
 //https://swiperjs.com/demos
 //https://github.com/Hsuan777/2021SlicesWeek6/blob/develop/app/assets/js/all.js

diff --git a/app/assets/style/all.css b/app/assets/style/all.css
diff --git a/app/assets/style/all.css.map b/app/assets/style/all.css.map
diff --git a/app/assets/style/utilities/_utilities.scss b/app/assets/style/utilities/_utilities.scss
@@ -26,4 +26,9 @@
 /* text-indent */
 .text-indent-101{
   text-indent: 101%;
+}
+
+/* z-index */
+.z-index-1080{
+  z-index: 1080;
 }
diff --git a/app/index.html b/app/index.html
@@ -21,10 +21,8 @@
         flex-column
         justify-content-end
         h-100
-        |
         justify-content-md-center
         pb-md-0
-        |
         offset-md-1
       "
     >
@@ -47,22 +45,19 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
 </div>
 
 <!-- menu navbar  -->
-<nav class="border-bottom | border-md mb-6 mb-md-13">
-  <div class="container-lg | overflow-y-hidden menu-list">
+<nav class="border-bottom | border-md mb-6 mb-md-13 | ">
+  <div class="container-lg | overflow-y-hidden menu-list | h-325r">
     <ul
       class="
         nav
         justify-content-start
         flex-nowrap
         text-nowrap
-        |
         overflow-x-scroll
         position-sticky
         top-0
-        |
         overflow-md-auto
         justify-content-sm-center
-        |
         py-4
       "
     >
@@ -138,7 +133,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
   <!-- 熱門特展 -->
   <section>
     <div class="container-md mb-7 mb-md-13">
-      <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
+      <h3 class="h3 fw-bold mb-2 mb-md-7 | aos-init aos-animate"  data-aos="fade-right" data-aos-duration="1200">熱門特展</h3>
       <ul class="ps-0">
         <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">
           <div class="row g-0 gx-7">
@@ -177,9 +172,7 @@ <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
                       d-flex
                       justify-content-between
                       align-items-center
-                      |
                       mb-2
-                      |
                       mb-md-1
                     "
                   >
@@ -210,13 +203,10 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
             <div
               class="
                 h-md-350
-                |
                 d-none
-                |
                 d-md-block
                 offset-md-1
                 col-md-1
-                |
                 py-12
               "
             >
@@ -253,9 +243,7 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                       d-flex
                       justify-content-between
                       align-items-center
-                      |
                       mb-2
-                      |
                       mb-md-1
                     "
                   >
@@ -286,13 +274,10 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
             <div
               class="
                 h-md-350
-                |
                 d-none
-                |
                 d-md-block
                 offset-md-1
                 col-md-1
-                |
                 py-12
               "
             >
@@ -328,9 +313,7 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                       d-flex
                       justify-content-between
                       align-items-center
-                      |
                       mb-2
-                      |
                       mb-md-1
                     "
                   >
@@ -361,13 +344,10 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
             <div
               class="
                 h-md-350
-                |
                 d-none
-                |
                 d-md-block
                 offset-md-1
                 col-md-1
-                |
                 py-12
               "
             >
@@ -393,7 +373,7 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
   <!-- 直播回顧 -->
   <section>
     <div class="container-md mb-7 mb-md-13">
-      <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
+      <h3 class="fw-bold mb-2 mb-md-7 aos-init aos-animate"  data-aos="fade-right" data-aos-duration="1200">直播回顧</h3>
       <div
         class="bg-img | card border-0"
         style="

diff --git a/app/layout.ejs b/app/layout.ejs
@@ -39,10 +39,11 @@
     <nav
       class="
         navbar navbar-expand-lg navbar-light
-        w-100
-        py-0
+        bg-white
         border-bottom
+        py-0
         align-items-center
+        z-index-1080
       "
     >
       <div class="container">
@@ -211,7 +212,7 @@
     <!-- 猜你也喜歡 -->
     <section>
       <div class="container-md mb-7 mb-md-13 <%- display %>">
-        <h2 class="h3 fw-bold mb-2 mb-md-7">猜你也喜歡...</h2>
+        <h2 class="h3 fw-bold mb-2 mb-md-7 | aos-init aos-animate"  data-aos="fade-right" data-aos-duration="1200">猜你也喜歡...</h2>
         <!-- Swiper for PC-->
         <div class="swiper-container swiper | swiper-js | offset-md-1">
           <ul