Fix: Add back-to-top button

Correct button positioning for fixed and sticky footer
Add option to disable button in _config.yml
Add button transparency
Reduce button size
Add personal website 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>
-  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;