Added scroll to top button

3 files changed, 33 insertions, 6 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 2e572d8..ba46305 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,23 @@
 <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">

+  <div style="position: fixed; bottom: 60px; margin: auto; width: 95%; max-width: 960px;">

+  <i

+    class="to-top-button"

+    onclick="toTop()"

+    style="

+      display: none;

+      transform: rotate(-90deg);

+      background-color: var(--bgLighter);

+      border-radius: 50%;

+      border: solid 2px var(--primaryColor);

+      padding: 10px;

+      position: absolute;

+      cursor: pointer;

+      right: 0;

+      font-size: 1.25em;

+    "

+    >{{ partial "icons/chevron" . }}</i

+  ></div>

+

   {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }} {{ end }}

   {{ if eq .Kind "section" }}

   <div>

@@ -24,7 +43,7 @@
       >

         <h3>About Me</h3>

         <img

-          style="max-width: 150px; border-radius: 50%; display: block; margin: auto;"

+          style="max-width: 100px; border-radius: 50%; display: block;"

           src="{{ .Site.Params.profileImage | relURL }}"

         />

         <p>

@@ -64,7 +83,7 @@
       >

         <h3>Recent Posts</h3>

         <ul style="padding: 0;">

-          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5}}

+          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5 }}

           <li style="list-style: none;">

             <a href="{{ .Permalink }}">{{ .Title | truncate 25 }}</a>

           </li>

@@ -72,7 +91,7 @@
         </ul>

       </div>

     </div>

-    <hr style="width: 50%; border-color: var(--textColor);">

+    <hr style="width: 50%; border-color: var(--textColor);" />

     <div style="text-align: center;">

       <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>

       <p style="margin: 0;">

@@ -82,3 +101,8 @@
     </div>

   </div>

 </footer>

+<script>

+  toTop = () => {

+    window.scrollTo({top: 0, behavior: 'smooth'});

+  }

+</script>

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7c11285..be7aba8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -42,6 +42,9 @@
     window.addEventListener("scroll", () => {

       let currentY = window.scrollY;

       let header = document.querySelector("header");

+      let toTop = document.querySelector(".to-top-button");

+

+      toTop.style.display = currentY < 500 ? "none" : "inline-flex";

 

       if (

         document.body.offsetHeight - (window.innerHeight + window.pageYOffset) < 10

@@ -59,7 +62,7 @@
       if (currentY - initialY < -5 || currentY < 60) {

         initialY = currentY;

         header.style.top = "0";

-      } 

+      }

     });

   </script>

 </head>

diff --git a/static/css/main.css b/static/css/main.css
index 80428dc..2071b89 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -250,12 +250,12 @@ li.page-item:nth-child(6) {
   border: solid 1px;

   border-color: var(--inactiveColor);

 }

-.fa-chevron-right {

+.show-more-info > svg {

   animation: blinkingText 1s infinite;

   transition: all 0.5s;

   color: var(--bgColor);

 }

-.fa-chevron-right:hover {

+.show-more-info > svg:hover {

   animation: none;

   transition: all 0.8s;

 }