From e5cf15391495ee64d29d1dfa37e8ec8cc3bcd16a Mon Sep 17 00:00:00 2001
From: Anno Knierim <anno.knierim@tu-dortmund.de>
Date: Sat, 26 Aug 2023 18:35:08 +0200
Subject: [PATCH 1/4] Add reveal-on-scroll script

---
 js/reveal_on_scroll.min.js | 39 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 js/reveal_on_scroll.min.js

diff --git a/js/reveal_on_scroll.min.js b/js/reveal_on_scroll.min.js
new file mode 100644
index 00000000..e590dac4
--- /dev/null
+++ b/js/reveal_on_scroll.min.js
@@ -0,0 +1,39 @@
+$(function() {
+  // call revealOnScroll
+  $(window).on('scroll', revealOnScroll);
+
+  // Animate reveal on scroll
+  function revealOnScroll() {
+    var scrolled = $(window).scrollTop();
+    $(".revealOnScroll:not(.animated)").each(function() {
+      if (scrolled + win_height_padded > $(this).offset().top) {
+        if ($(this).data('timeout')) {
+          window.setTimeout(function() {
+            $(this).addClass('animated ' + $(this).data('animation'));
+          }, parseInt($(this).data('timeout'), 10));
+        } else {
+          $(this).addClass('animated ' + $(this).data('animation'));
+        }
+      }
+    });
+  }
+
+  // apply reveal on scroll to buttons
+  $(window).on("scroll", function() {
+    if ($(window).scrollTop() >= 300) {
+      $("#backtotop-button").addClass('visible');
+      $("#help-button").addClass('visible');
+    } else {
+      $("#backtotop-button").removeClass('visible');
+      $("#help-button").removeClass('visible');
+    }
+  });
+
+  // Scroll to top behaviour
+  $('#backtotop-button a').on('click', function() {
+    $('html, body').animate({
+      scrollTop: 0
+    }, 800, 'swing');
+    return false;
+  });
+})

From 716259ae3680c0a9380a281e5ff846721a9a991d Mon Sep 17 00:00:00 2001
From: Anno Knierim <anno.knierim@tu-dortmund.de>
Date: Sat, 26 Aug 2023 18:35:43 +0200
Subject: [PATCH 2/4] Include reveal-on-scroll script

---
 _includes/scripts.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/_includes/scripts.html b/_includes/scripts.html
index 0be27c64..427cae50 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,2 +1,3 @@
 <script src="/js/jquery.min.js"></script>
 <script src="/js/bootstrap.min.js"></script>
+<script src="/js/reveal_on_scroll.min.js"></script>

From 928c3a3aaa665c6ea1d22a9c2fa3dfed6977ebb8 Mon Sep 17 00:00:00 2001
From: Anno Knierim <anno.knierim@tu-dortmund.de>
Date: Sat, 26 Aug 2023 18:36:19 +0200
Subject: [PATCH 3/4] Add back to top button and modify help button

---
 css/custom.css | 97 ++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 79 insertions(+), 18 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index 86d058df..9ff8480e 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -163,33 +163,94 @@ pre.highlight {
   font-size: 34px;
 }
 
-.help-button-holder{
+#help-button {
   position: fixed;
-  width:  55px;
-  height: 55px;
-  bottom: 40px;
-  right:  40px;
-  color:  #fff;
+  right: 25px;
+  bottom: 25px;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.7);
+  transition: all ease 0.5s;
+}
+
+#help-button.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translate(-65px,0px);
+}
+
+#help-button a {
+  border: none;
+  border-radius: 50%;
+  display: block;
+  width:  50px;
+  height: 50px;
+  color: #fff;
   background-color: var(--pep-gray);
-  border-radius: 50px;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  opacity: 1;
+  transition: all ease 0.25s;
   text-align: center;
   text-decoration: none;
-  box-shadow: 2px 2px 3px #999;
-  transition: all ease 0.25s;
+  font-size: 25px;
 }
 
-.help-button-holder:hover {
-  color:            #fff;
+#help-button a:after {
+  outline: none;
+  content: "?";
+  position: relative;
+  display: block;
+  top: 55%;
+  transform: translate(0,-55%);
+}
+
+#help-button.visible a:hover {
+  color: #fff;
   background-color: var(--pep-yellow);
-  border-color:     var(--pep-yellow);
-  text-decoration:  none;
 }
 
-.help-button{
-  line-height: 55px;
-  font-size: 2em;
-  font-style: normal;
-  font-weight: bold;
+#backtotop-button {
+  position: fixed;
+  right: 25px;
+  bottom: 25px;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.7);
+  transition: all ease 0.5s;
+}
+
+#backtotop-button.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+#backtotop-button a {
+  border: none;
+  border-radius: 50%;
+  display: block;
+  width:  50px;
+  height: 50px;
+  color: #fff;
+  background-color: var(--pep-gray);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  opacity: 1;
+  transition: all ease 0.25s;
+  text-align: center;
   text-decoration: none;
+  font-size: 25px;
+}
+
+#backtotop-button a:after {
+  outline: none;
+  content: "🡑";
+  position: relative;
+  display: block;
+  top: 55%;
+  transform: translate(0,-55%);
 }
 
+#backtotop-button.visible a:hover {
+  color:            #fff;
+  background-color: var(--pep-yellow);
+}

From 544322ee0f90852ff9876274b6fc00a64f9b2eae Mon Sep 17 00:00:00 2001
From: Anno Knierim <anno.knierim@tu-dortmund.de>
Date: Sat, 26 Aug 2023 18:36:40 +0200
Subject: [PATCH 4/4] Add buttons to layouts

---
 _layouts/default.html | 6 +++++-
 _layouts/install.html | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/_layouts/default.html b/_layouts/default.html
index 161ff97f..a546b7cb 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -12,6 +12,10 @@ <h1>{{ page.title }}</h1>
     {{ content }}
   </div>
   {% include scripts.html %}
+
+  <div id="backtotop-button" title="Zurück zum Seitenanfang">
+    <a href="#"></a>
+  </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_layouts/install.html b/_layouts/install.html
index 822b42bc..5a836c2c 100644
--- a/_layouts/install.html
+++ b/_layouts/install.html
@@ -2,6 +2,6 @@
 layout: default
 ---
 {{ content }}
-<a href="/problem.html" class="help-button-holder">
-  <i class="help-button" title="Hilfe bei der Installation">?</i>
-</a>
+<div id="help-button" title="Hilfe bei der Installation">
+  <a href="/problem.html"></a>
+</div>