Change pager and tutorial

Tutorial :
* + pager
* + header
* + links

Author: Matthieu Oger

_includes/pager.html

@@ -1,5 +1,5 @@
 <!-- start pagination -->
-<div class="pager">
+<div class="pager bottom">
   <!-- start older -->
   <section class="pager__older">
   {% if paginator.next_page %}
@@ -11,7 +11,7 @@
   <!-- end older -->
 
   <!-- start archives -->
-  <section class="pager__archives">
+  <section class="pager__ref">
     <a href="/journal/archives" title="Archives">Archives</a>
   </section>
   <!-- end archives -->

_layouts/tutorial.html

@@ -10,24 +10,31 @@
 
     <!-- reduced header -->
     <header class="page-header">
+      <nav>
+        <!-- menu -->
+        <section class"page-back">
+          <a href="/">← Back to Pixelnest</a>
+        </section>
 
-      <!-- menu -->
-      <p class"page-back">
-        <a href="/">← Back to Pixelnest</a>
-      </p>
+        <section class="page-ref">
+          {% if page.home and page.tutorial %}
+          Tutorial : <a href="{{ page.home }}">{{ page.tutorial }}</a>
+          {% endif %}
+        </section>
 
-      <!-- twitter -->
-      <p class="page-link">
-        <a href="http://twitter.com/pixelnest">follow us on twitter</a>
-      </p>
+        <!-- twitter -->
+        <section class="page-link">
+          <a href="http://twitter.com/pixelnest">follow us on twitter</a>
+        </section>
+      </nav>
     </header>
 
     <div class="page-content">
 
       <!-- post layout -->
       <article class="entry">
         <h2 class="entry__title">
-          <a href="{{ page.url }}" title="{{ page.title }}">{{ page.title }}</a>
+          <a href="{{ page.url | remove: 'index.html' }}" title="{{ page.title }}">{{ page.title }}</a>
         </h2>
 
         <aside class="entry__metadata">
@@ -46,6 +53,26 @@ <h2 class="entry__title">
       </article>
       <!-- end post layout -->
 
+      <!-- start pagination -->
+      <div class="pager">
+        <section class="pager__older">
+        {% if page.previous %}
+          <a href="{{ page.previous }}" title="Previous chapter">← Previous</a>
+        {% endif %}
+        </section>
+
+        <section class="pager__ref">
+          <a href="{{ page.url | remove: 'index.html' }}" title="Summary">Summary</a>
+        </section>
+
+        <section class="pager__newer">
+        {% if page.next %}
+          <a href="{{ page.next }}" title="Next chapter">Next →</a>
+        {% endif %}
+        </section>
+      </div>
+      <!-- end pagination -->
+
     </div>
 
     <!-- reduced footer -->

_sources/ie.scss

@@ -108,7 +108,7 @@
       display: inline;
     }
 
-    .pager__archives {
+    .pager__ref {
       display: inline;
       margin: 0 100px;
     }

_sources/pager.scss

@@ -4,27 +4,30 @@
 
 .pager {
   position: relative;
-  bottom: -140px;
   display: table;
   margin: 0 auto;
   padding-top: 20px;
   width: 100%;
   border-top: 1px solid #eee;
 
   color: #bbb;
+
+  &.bottom {
+    bottom: -140px;
+  }
 }
 
 .pager a {
   @extend %link;
 }
 
-.pager__archives,
+.pager__ref,
 .pager__newer,
 .pager__older {
   display: table-cell;
 }
 
-.pager__archives {
+.pager__ref {
   width: 36%;
   text-align: center;
 }

_sources/tutorial.scss

@@ -6,29 +6,35 @@
 
   // Small header
   .page-header {
-    // Padding
-    $distance: 10px;
-
-    position: relative;
-
     margin-bottom: 60px;
-    padding: $distance;
+    padding: 12px 10px;
     background-color: rgba(240, 240, 240, 0.8);
 
     font-size: 0.8em;
 
-    p {
-      display: inline;
+    nav {
+      display: table;
+      width: 100%;
     }
 
-    // Put at the right end of the header
+    .page-back,
+    .page-ref,
     .page-link {
-      display: inline-block;
-      position: absolute;
-      top: $distance;
-      right: $distance;
-      margin: 0;
+      display: table-cell;
+      width: 25%;
+    }
+
+    .page-back {
+      text-align: left;
+    }
 
+    .page-ref {
+      text-align: center;
+      padding: 0 10px;
+      width: 50%;
+    }
+
+    .page-link {
       text-align: right;
     }
 
@@ -37,6 +43,9 @@
     }
   }
 
+  .entry {
+    margin-bottom: 40px;
+  }
 
   // Light footer
   .page-footer {

static/css/pixelnest.css

@@ -487,20 +487,21 @@ li {
     margin-top: 20px; } }
 .pager {
   position: relative;
-  bottom: -140px;
   display: table;
   margin: 0 auto;
   padding-top: 20px;
   width: 100%;
   border-top: 1px solid #eee;
   color: #bbb; }
+  .pager.bottom {
+    bottom: -140px; }
 
-.pager__archives,
+.pager__ref,
 .pager__newer,
 .pager__older {
   display: table-cell; }
 
-.pager__archives {
+.pager__ref {
   width: 36%;
   text-align: center; }
 
@@ -529,20 +530,28 @@ li {
   font-style: italic; }
 
 .tutorial .page-header {
-  position: relative;
   margin-bottom: 60px;
-  padding: 10px;
+  padding: 12px 10px;
   background-color: rgba(240, 240, 240, 0.8);
   font-size: 0.8em; }
-  .tutorial .page-header p {
-    display: inline; }
+  .tutorial .page-header nav {
+    display: table;
+    width: 100%; }
+  .tutorial .page-header .page-back,
+  .tutorial .page-header .page-ref,
+  .tutorial .page-header .page-link {
+    display: table-cell;
+    width: 25%; }
+  .tutorial .page-header .page-back {
+    text-align: left; }
+  .tutorial .page-header .page-ref {
+    text-align: center;
+    padding: 0 10px;
+    width: 50%; }
   .tutorial .page-header .page-link {
-    display: inline-block;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    margin: 0;
     text-align: right; }
+.tutorial .entry {
+  margin-bottom: 40px; }
 .tutorial .page-footer {
   background-color: transparent;
   color: #888888; }
@@ -606,7 +615,7 @@ li {
   text-align: center; }
   .ie .pager .pager__older {
     display: inline; }
-  .ie .pager .pager__archives {
+  .ie .pager .pager__ref {
     display: inline;
     margin: 0 100px; }
   .ie .pager .pager__newer {