CHANGE scroll indicators to be interactive

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);
+}

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 {

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 }}

layouts/partials/components/image.html

@@ -21,7 +21,7 @@ caption: string
 {{ $ext := path.Ext $url }}
 {{ $name := path.Base (replace $url $ext "") }}
 {{ $dir := path.Dir $url }}
-{{ $mediaWidthControl := "(min-width: 1240px) 50px, 70vw" }}
+{{ $mediaWidthControl := "(min-width: 1240px) 50vw, 70vw" }}
 
 <a href="{{ $url }}">
   <picture>

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 }}