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

Fixes alshedivat#2425

PR alshedivat#2427 adds a back-to-top button, however the button overlaps with the
footer when `footer_fixed: false` and [has inadequate
spacing](alshedivat#2425 (comment))
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

@@ -134,6 +134,11 @@ Feel free to add your own page(s) by sending a PR.
 <a href="https://www.zla.app/" target="_blank">★</a>
 <a href="https://stavros.github.io" target="_blank">★</a>
 <a href="https://ericslyman.com" target="_blank">★</a>
+<a href="https://ztjona.github.io/" target="_blank">★</a>
+<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

@@ -20,6 +20,7 @@ url: https://YifanJiang233.github.io # the base hostname & protocol for your sit
 baseurl: # the subpath of your site, e.g. /blog/
 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>
-  addBackToTop();
+  {% 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-underline-color: #{$grey-color};
-  --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};
 
   .fa-sun {
@@ -61,7 +61,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-underline-color: #{$white-color};
 

_sass/_variables.scss

@@ -39,8 +39,8 @@ $code-bg-color-dark: #2c3237 !default;
 
 // Back To Top button config
 $back-to-top-z-index: 10;
-$back-to-top-bottom: 50px;
-$back-to-top-right: 50px;
-$back-to-top-diameter: 56px;
+$back-to-top-bottom: 30px;
+$back-to-top-right: 30px;
+$back-to-top-diameter: 40px;
 $back-to-top-height: $back-to-top-diameter;
 $back-to-top-width: $back-to-top-diameter;