Moving back to top icon and correcting paginationv0.162

The back to top icon has been moved from the navigation bar to the
bottom right of the screen. The pagination button css has been corrected
so that any long text fits within the screen.

4 files changed, 41 insertions, 5 deletions

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 44865cc..170a7c8 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
             </div>
-
+        <a id="back-to-top" href="#" class="fa fa-arrow-up fa-border fa-2x"></a>
         <!-- Scripts -->
         {{ $minFiles := .Site.Params.minifiedFilesJS }}
 
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index af3a262..19b91a5 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -20,10 +20,6 @@
     </nav>
     <nav class="main">
         <ul>
-            <li id="back-to-top" style="display:none;">
-                <!-- Put class reference for top icon using font awesome -->
-                <a class="fa-arrow-up" href="#">Top</a>
-            </li>
             {{ if $.Scratch.Get "shareNav" }}
             <li id="share-nav" class="share-menu" style="display:none;">
                 <a class="fa-share-alt" href="#share-menu">Share</a>
diff --git a/static/css/add-on.css b/static/css/add-on.css
index 1a2ce2f..4fb5e92 100644
--- a/static/css/add-on.css
+++ b/static/css/add-on.css
@@ -303,3 +303,36 @@ body.is-share-visible #wrapper {
 			}
 
 		}
+
+.post {
+    margin: 0 0 2em 0;
+}
+
+ul.pagination li {
+    padding-top: 1em;
+}
+
+    ul.pagination .button {
+        line-height: 2.5em;
+        height: auto;
+        white-space: normal;
+        padding-top: 1em;
+        padding-bottom: 1em;
+    }
+
+#back-to-top {
+    background-color: white;
+    bottom: 5px;
+    color: #aaaaaa;
+    display: none;
+    position: fixed;
+    right: 5px;
+}
+
+    #back-to-top.btt-fade-out {
+        /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
+        -webkit-transition: opacity .3s 0s, visibility 0s 0s;
+        -moz-transition: opacity .3s 0s, visibility 0s 0s;
+        transition: opacity .3s 0s, visibility 0s 0s;
+        opacity: .5;
+    }
diff --git a/static/js/backToTop.js b/static/js/backToTop.js
index 29bcb38..1019553 100644
--- a/static/js/backToTop.js
+++ b/static/js/backToTop.js
@@ -1,6 +1,8 @@
 $(function(){
     // browser window scroll (in pixels) after which the "back to top" link is shown
     var offset = 300,
+        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
+        offset_opacity = 1200,
         //duration of the top scrolling animation (in ms)
         scroll_top_duration = 700,
         //grab the "back to top" link
@@ -14,8 +16,13 @@ $(function(){
             $shareNav.fadeIn();
         } else {
             $backToTop.fadeOut();
+            $backToTop.removeClass('btt-fade-out');
             $shareNav.fadeOut();
         }
+
+        if($(this).scrollTop() > offset_opacity) {
+			$backToTop.addClass('btt-fade-out');
+		}
     });
 
     //smooth scroll to top