Merge branch 'main' into add_mambaforge

_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>

_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>
+</html>

_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>

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);
+}

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;
+  });
+})