Add new lateral navigations

theme/stylesheets/book/body.less

@@ -5,7 +5,15 @@
         right: 0px;
         left: 0px;
         bottom: 0px;
-        overflow-y: auto;
+
+        .body-inner {
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            left: 0px;
+            bottom: 0px;
+            overflow-y: auto;
+        }
 
         .transition(left 0.5s ease);
 
@@ -14,7 +22,6 @@
         .page-wrapper {
             position: relative;
             min-height: 100%;
-            padding-bottom: 100px;
 
             .page-inner {
                 max-width: 800px;

theme/stylesheets/book/footer.less

@@ -1,42 +0,0 @@
-.book {
-    .page-footer {
-        position: absolute;
-        bottom: 0px;
-
-        width: 100%;
-        height: 80px;
-
-        padding: 10px;
-
-        overflow: hidden;
-        
-        color: #fff;
-
-        .navigation-link {
-            display: inline-block;
-            text-align: center;
-            width: 100%;
-            height: 100%;
-            font-size: 24px;
-            line-height: 60px;
-            border-radius: 2px;
-
-            background: @brand-success;
-            color: inherit;
-
-            text-transform: uppercase;
-
-            &:hover {
-                background: darken(@btn-success-bg, 5%);
-                text-decoration: none;
-            }
-
-            &.coming-soon, &.coming-soon:hover {
-                background: #f0ad4e;
-            }
-            &.finished, &.finished:hover {
-                background: darken(@btn-success-bg, 5%);
-            }
-        }
-    }
-}

theme/stylesheets/book/navigation.less

@@ -0,0 +1,34 @@
+.book .book-body  {
+    .navigation {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        margin: 0;
+        max-width: 150px;
+        min-width: 90px;
+
+        display: flex;
+        justify-content:center;
+        align-content:center;
+        flex-direction:column;
+
+        font-size: 40px;
+        color: rgba(0,0,0, 0.5);
+
+        text-align: center;
+
+        .transition(all 350ms ease);
+
+        &:hover {
+            background-color: rgba(0,0,0, 0.06);
+            text-decoration: none;
+        } 
+
+        &.navigation-next {
+            right: 0px;
+        }
+        &.navigation-prev {
+            left: 0px;
+        }
+    }
+}

theme/stylesheets/book/progress.less

@@ -23,6 +23,7 @@
         position: relative;
         background: #fff;
         margin-bottom: 20px;
+        z-index: 10;
 
         .bar {
             height: 8px;

theme/stylesheets/main.less

@@ -11,10 +11,10 @@
 @import "book/header.less";
 @import "book/summary.less";
 @import "book/body.less";
-@import "book/footer.less";
 @import "book/exercise.less";
 @import "book/markdown.less";
 @import "book/progress.less";
+@import "book/navigation.less";
 
 * {
     -webkit-overflow-scrolling: touch;

theme/templates/includes/book/footer.html

@@ -1,17 +0,0 @@
-<div class="page-footer">
-    {% if progress.current.next %}
-        {% if progress.current.next.path %}
-        <a href="{{ basePath }}/{{ progress.current.next.path|mdLink }}" class="navigation-link next">
-            {% if _input == "README.md" %}
-            Start
-            {% else %}
-            Next
-            {% endif %}
-        </a>
-        {% else %}
-        <div class="navigation-link coming-soon">Coming soon</div>
-        {% endif %}
-    {% else %}
-    <div class="navigation-link finished">Finished!</div>
-    {% endif %}
-</div>

theme/templates/site.html

@@ -6,23 +6,30 @@
     {% include "includes/book/header.html" %}
     {% include "includes/book/summary.html" %}
     <div class="book-body" tabindex="-1">
-        <div class="page-wrapper">
-            {% include "includes/book/progress.html" %}
+        <div class="body-inner">
+            <div class="page-wrapper">
+                {% include "includes/book/progress.html" %}
 
-            <div class="page-inner">
-            {% for section in content %}
-                <section class="{{ section.type }}" id="section-{{ section.id }}">
-                {% if section.type == "normal" %}
-                    {% autoescape false %}{{ section.content }}{% endautoescape %}
-                {% elif section.type == "exercise" %}
-                    {% include "./includes/book/exercise.html" with {section: section} %}
-                {% endif %}
-                </section>
-            {% endfor %}
+                <div class="page-inner">
+                {% for section in content %}
+                    <section class="{{ section.type }}" id="section-{{ section.id }}">
+                    {% if section.type == "normal" %}
+                        {% autoescape false %}{{ section.content }}{% endautoescape %}
+                    {% elif section.type == "exercise" %}
+                        {% include "./includes/book/exercise.html" with {section: section} %}
+                    {% endif %}
+                    </section>
+                {% endfor %}
+                </div>
             </div>
-
-            {% include "includes/book/footer.html" %}
         </div>
+
+        {% if progress.current.prev and progress.current.prev.path %}
+        <a href="{{ basePath }}/{{ progress.current.prev.path|mdLink }}" class="navigation navigation-prev"><i class="fa fa-angle-left"></i></a>
+        {% endif %}
+        {% if progress.current.next and progress.current.next.path %}
+        <a href="{{ basePath }}/{{ progress.current.next.path|mdLink }}" class="navigation navigation-next"><i class="fa fa-angle-right"></i></a>
+        {% endif %}
     </div>
 </div>
 {% endblock %}