Fix: Add back-to-top button (#2433)

Fixes #2425 

PR #2427 adds a back-to-top button, however the button overlaps with the
footer when `footer_fixed: false` and [has inadequate
spacing](https://github.com/alshedivat/al-folio/issues/2425#issuecomment-2121670658)
with `footer_fixed: true`

Changes in this PR:
- Fix positioning of button on fixed and sticky footer layouts 
- Add option to disable back-to-top button by setting `back_to_top:
false` in `_config.yml`
- Add button transparency to avoid button blocking content view
- Reduce size of button

Demo - 

| Device | Fixed footer | Sticky footer |
| :-----------: | :-------------: | :-----------: |
| Mobile |
![fixed_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/2e17be04-1fa7-40c5-b691-829e92055367)
|
![sticky_footer_mobile](https://github.com/alshedivat/al-folio/assets/2447878/f5567e43-e6fe-442d-9a7f-99e0577e220b)
|
| Desktop |
![fixed_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/fc755839-841a-4e6b-b249-2c75bc552ad8)
|
![sticky_footer_desktop](https://github.com/alshedivat/al-folio/assets/2447878/ef9a4c99-ce4c-4ac3-8fbb-207af9be245a)
|

Miscellaneous change - Added personal website under `Academics` to
`README.md`

README.md

@@ -138,6 +138,7 @@ Feel free to add your own page(s) by sending a PR.
 <a href="https://chrischoi314.github.io" target="_blank">★</a>
 <a href="https://riccobelli.faculty.polimi.it" target="_blank">★</a>
 <a href="https://kishanved.tech/" target="_blank">★</a>
+<a href="https://abhilesh.github.io/" target="_blank">★</a>
 </td>
 </tr>
 <tr>

_config.yml

@@ -21,6 +21,7 @@ url: https://alshedivat.github.io # the base hostname & protocol for your site
 baseurl: /al-folio # the subpath of your site, e.g. /blog/. Leave blank for root
 last_updated: false # set to true if you want to display last updated in the footer
 impressum_path: # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
+back_to_top: true # set to false to disable the back to top button
 
 # -----------------------------------------------------------------------------
 # Theme

_includes/scripts/back_to_top.liquid

@@ -1,4 +1,6 @@
 <script src="{{ '/assets/js/vanilla-back-to-top.min.js' | relative_url | bust_file_cache }}"></script>
 <script>
+  {% if site.back_to_top %}
     addBackToTop();
+  {% endif %}
 </script>

_sass/_themes.scss

@@ -17,7 +17,7 @@
   --global-divider-color: rgba(0, 0, 0, 0.1);
   --global-card-bg-color: #{$white-color};
   --global-highlight-color: #{$red-color-dark};
-  --global-back-to-top-bg-color: #{$black-color};
+  --global-back-to-top-bg-color: rgba(#{red($black-color)}, #{green($black-color)}, #{blue($black-color)}, 0.4);
   --global-back-to-top-text-color: #{$white-color};
 
   --global-tip-block: #42b983;
@@ -79,7 +79,7 @@ html[data-theme="dark"] {
   --global-distill-app-color: #{$grey-color-light};
   --global-divider-color: #424246;
   --global-card-bg-color: #{$grey-900};
-  --global-back-to-top-bg-color: #{$white-color};
+  --global-back-to-top-bg-color: rgba(#{red($white-color)}, #{green($white-color)}, #{blue($white-color)}, 0.5);
   --global-back-to-top-text-color: #{$black-color};
 
   --global-tip-block: #42b983;

_sass/_variables.scss

@@ -43,8 +43,8 @@ $ti-font-path: "../fonts";
 
 // Back To Top button config
 $back-to-top-z-index: 10;
-$back-to-top-bottom: 50px;
+$back-to-top-bottom: 30px;
-$back-to-top-right: 50px;
+$back-to-top-right: 30px;
-$back-to-top-diameter: 56px;
+$back-to-top-diameter: 40px;
 $back-to-top-height: $back-to-top-diameter;
 $back-to-top-width: $back-to-top-diameter;

assets/js/vanilla-back-to-top.min.js

@@ -1 +1 @@
-"use strict";function addBackToTop(){var o,t,e,n,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=i.backgroundColor,d=void 0===r?"#000":r,a=i.cornerOffset,c=void 0===a?20:a,s=i.diameter,l=void 0===s?56:s,u=i.ease,p=void 0===u?function(o){return.5*(1-Math.cos(Math.PI*o))}:u,m=i.id,h=void 0===m?"back-to-top":m,b=i.innerHTML,v=void 0===b?'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>':b,f=i.onClickScrollTo,x=void 0===f?0:f,w=i.scrollContainer,g=void 0===w?document.body:w,k=i.scrollDuration,y=void 0===k?100:k,T=i.showWhenScrollTopIs,M=void 0===T?1:T,z=i.size,E=void 0===z?l:z,C=i.textColor,L=void 0===C?"#fff":C,N=i.zIndex,I=void 0===N?1:N,A=g===document.body,B=A&&document.documentElement;o=Math.round(.43*E),t=Math.round(.29*E),e="#"+h+"{background:"+d+";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:"+c+"px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:"+L+";cursor:pointer;display:block;height:"+E+"px;opacity:1;outline:0;position:fixed;right:"+c+"px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:"+E+"px;z-index:"+I+"}#"+h+" svg{display:block;fill:currentColor;height:"+o+"px;margin:"+t+"px auto 0;width:"+o+"px}#"+h+".hidden{bottom:-"+E+"px;opacity:0}",(n=document.createElement("style")).appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",n);var D=function(){var o=document.createElement("div");return o.id=h,o.className="hidden",o.innerHTML=v,o.addEventListener("click",function(o){o.preventDefault(),function(){var o="function"==typeof x?x():x,t=window,e=t.performance,n=t.requestAnimationFrame;if(y<=0||void 0===e||void 0===n)return q(o);var i=e.now(),r=j(),d=r-o;n(function o(t){var e=Math.min((t-i)/y,1);q(r-Math.round(p(e)*d)),e<1&&n(o)})}()}),document.body.appendChild(o),o}(),H=!0;function S(){j()>=M?function(){if(!H)return;D.className="",H=!1}():function(){if(H)return;D.className="hidden",H=!0}()}function j(){return g.scrollTop||B&&document.documentElement.scrollTop||0}function q(o){g.scrollTop=o,B&&(document.documentElement.scrollTop=o)}(A?window:g).addEventListener("scroll",S),S()}
+"use strict";function addBackToTop(){function o(){t()>=z?R&&(D.className="",R=!1):R||(D.className="hidden",R=!0)}function t(){return E.scrollTop||A&&document.documentElement.scrollTop||0}function e(o){E.scrollTop=o,A&&(document.documentElement.scrollTop=o)}var n,i,d,r,c=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=c.backgroundColor,s=void 0===a?"#000":a,l=c.cornerOffset,u=void 0===l?20:l,m=c.diameter,p=void 0===m?56:m,h=c.ease,b=void 0===h?function(o){return.5*(1-Math.cos(Math.PI*o))}:h,v=c.id,f=void 0===v?"back-to-top":v,x=c.innerHTML,g=void 0===x?'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>':x,w=c.onClickScrollTo,y=void 0===w?0:w,k=c.scrollContainer,E=void 0===k?document.body:k,T=c.scrollDuration,C=void 0===T?100:T,M=c.showWhenScrollTopIs,z=void 0===M?1:M,L=c.size,B=void 0===L?p:L,H=c.textColor,I=void 0===H?"#fff":H,N=c.zIndex,S=void 0===N?1:N,q=E===document.body,A=q&&document.documentElement;n=Math.round(.35*B),i=Math.round(.2*B),d="#"+f+"{background:"+s+";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:"+u+"px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:"+I+";cursor:pointer;display:block;height:"+B+"px;opacity:1;outline:0;position:fixed;right:"+u+"px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:"+B+"px;z-index:"+S+"}#"+f+" svg{display:block;fill:currentColor;height:"+n+"px;margin:"+i+"px auto 0;width:"+n+"px}#"+f+".hidden{bottom:-"+B+"px;opacity:0}",(r=document.createElement("style")).appendChild(document.createTextNode(d)),document.head.insertAdjacentElement("afterbegin",r);var D=function(){var o=document.createElement("div");return o.id=f,o.className="hidden",o.innerHTML=g,o.addEventListener("click",function(o){o.preventDefault(),function(){var o="function"==typeof y?y():y,n=window,i=n.performance,d=n.requestAnimationFrame;if(C<=0||void 0===i||void 0===d)return e(o);var r=i.now(),c=t(),a=c-o;d(function o(t){var n=Math.min((t-r)/C,1);e(c-Math.round(b(n)*a)),n<1&&d(o)})}()}),document.body.appendChild(o),o}(),R=!0;(q?window:E).addEventListener("scroll",o),o()}window.addEventListener("load",function(){var o=document.getElementById("back-to-top"),t=document.querySelector(".sticky-bottom"),e=document.querySelector(".fixed-bottom");o&&window.addEventListener("scroll",function(){if(t){var n=t.getBoundingClientRect();window.scrollY+window.innerHeight>document.body.scrollHeight-n.height?(o.style.position="fixed",o.style.bottom=n.height+15+"px"):(o.style.position="fixed",o.style.bottom="15px")}if(e){var i=e.getBoundingClientRect();o.style.position="fixed",o.style.bottom=i.height+15+"px"}})});