From aee652e0456fcadeea76c3113f946bd556ccb585 Mon Sep 17 00:00:00 2001
From: Hoernschen <julian.hoernschemeyer@mailbox.org>
Date: Thu, 20 Jun 2024 12:36:59 +0200
Subject: [PATCH] CHANGE scroll indicators to be interactive

---
 assets/js/main.js             | 11 +++++++++++
 assets/scss/main.scss         | 22 +++++++++++++++++++++-
 layouts/_default/home.html    | 23 +++++++++++------------
 layouts/partials/head/js.html | 13 ++-----------
 4 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index e69de29..7c2fdbd 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,11 @@
+function scrollDown() {
+  var scroller = document.getElementById("scroller");
+  var height = scroller.offsetHeight;
+  scroller.scrollBy(0, height);
+}
+
+function scrollUp() {
+  var scroller = document.getElementById("scroller");
+  var height = scroller.offsetHeight;
+  scroller.scrollBy(0, -1 * height);
+}
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 674bb4c..1b34c7b 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -153,9 +153,21 @@ header {
   justify-content: center;
   position: relative;
   width: 100%;
-  bottom: 0;
   padding: 2rem;
   font-size: x-large;
+
+  .down {
+    bottom: 0;
+  }
+
+  .up {
+    top: 0;
+  }
+
+  i {
+    color: {{ .Site.Params.color.secondary }};
+    cursor: pointer;
+  }
 }
 
 .totop {
@@ -297,6 +309,14 @@ header {
       }
     }
   }
+
+  :last-child {
+    
+    .scroll-indicator.down {
+      display: none;
+    }
+
+  }
 }
 
 article {
diff --git a/layouts/_default/home.html b/layouts/_default/home.html
index 3fd2c9c..84e937a 100644
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<div class="scroller">
+<div id="scroller" class="scroller">
   <section>
     <div class="profile card">
       {{ if .Params.image }}
@@ -13,22 +13,23 @@
         <h1>{{ .Title }}</h1>
         {{ .Content }}
         {{ if .Params.social }}
-          <div class="social">
+        <div class="social">
           {{ range .Params.social }}
-            {{ partial "components/icon.html" . }}
+          {{ partial "components/icon.html" . }}
           {{ end }}
-          </div>
+        </div>
         {{ end }}
       </div>
     </div>
-    <div class="scroll-indicator">
-      <a href="#">
-        <i class="icon-angle-down"></i>
-      </a>
+    <div class="scroll-indicator down">
+      <i class="icon-angle-down" onclick="scrollDown()"></i>
     </div>
   </section>
   {{ range where .Site.RegularPages "Section" "projects"}}
   <section>
+    <div class="scroll-indicator up">
+      <i class="icon-angle-up" onclick="scrollUp()"></i>
+    </div>
     <div class="card">
       {{ if .Params.image }}
       <div class="image">
@@ -49,10 +50,8 @@
         </div>
       </div>
     </div>
-    <div class="scroll-indicator">
-      <a href="#">
-        <i class="icon-angle-down"></i>
-      </a>
+    <div class="scroll-indicator down">
+      <i class="icon-angle-down" onclick="scrollDown()"></i>
     </div>
   </section>
   {{ end }}
diff --git a/layouts/partials/head/js.html b/layouts/partials/head/js.html
index 18fe842..2f01637 100644
--- a/layouts/partials/head/js.html
+++ b/layouts/partials/head/js.html
@@ -1,12 +1,3 @@
-{{- with resources.Get "js/main.js" }}
-  {{- if eq hugo.Environment "development" }}
-    {{- with . | js.Build }}
-      <script src="{{ .RelPermalink }}"></script>
-    {{- end }}
-  {{- else }}
-    {{- $opts := dict "minify" true }}
-    {{- with . | js.Build $opts | fingerprint }}
-      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
-    {{- end }}
-  {{- end }}
+{{- with resources.Get "js/main.js" | minify | fingerprint }}
+  <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
 {{- end }}