Removed the outer div for indicator (blocked scroll)

inc/css/main.css

@@ -150,38 +150,24 @@ nav {
 
 /******************* SCROLL INDICATOR *******************/
 
-#overlay-arrow {
-    position: absolute;
-    width: 95vw;
-    height: 5vh;
-    left: 2.5vw;
-    bottom: calc((var(--h-ex) - 5vh) / 2 + 2.5vh);
-    visibility: hidden;
-}
-
 .arrow {
     position: absolute;
     line-height: 5vh;
     font-size: 12vh;
-    top: -0.5vh;
+    bottom: calc((var(--h-ex) - 5vh) / 2 + 2.0vh);
     color: var(--c1);
     background-color: var(--c3);
-    opacity: 0.7;
     width: 6vh;
     height: 6vh;
     border-radius: 50%;
     text-align: center;
     visibility: hidden;
-    animation: notice 3s;
+    animation: notice 4s;
     animation-delay: 2s;
 }
 
-.arrow:first-child {
-    left: 1vw;
-}
-
 .arrow:last-child {
-    right: 1vw;
+    right: 0;
 }
 
 @keyframes notice {

inc/js/main.js

@@ -15,7 +15,7 @@ function run() {
 function initialize() {
     let welcome = document.getElementById("welcome");
     let exhibit = document.getElementById("exhibition");
-    let notice = document.getElementById("overlay-arrow");
+    let notice = Array.from(document.getElementsByClassName("arrow"));
     flyingText(welcome);
     document.addEventListener("click", (e) => {
         let overlay = document.getElementById("info-box");
@@ -33,7 +33,8 @@ function initialize() {
 
     // remove the indicator on enter
     exhibit.addEventListener("mouseenter", () => {
-        notice.remove();
+        notice[0].remove();
+        notice[1].remove();
     }, {once: true});
 }
 

tmpl/gallery.html

@@ -16,8 +16,6 @@
     </div>
     {{end}}
 </section>
-<section id="overlay-arrow">
+<div class="arrow">&#x2039;</div>
-    <div class="arrow">&#x2039;</div>
+<div class="arrow">&#x203a;</div>
-    <div class="arrow">&#x203a;</div>
-</section>
 {{end}}