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](alshedivat/al-folio#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`

_config.yml

@@ -20,6 +20,7 @@ url: https://h2o64.github.io # the base hostname & protocol for your site
 baseurl: # the subpath of your site, e.g. /blog/. Leave blank for root
 last_updated: true # 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-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-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;