Add navigation structure for learn section

_data/fortran_guide.yml

@@ -0,0 +1,17 @@
+appendices: [~,A,B,C,D]
+
+chapters:
+  - title: Introduction
+    pages:
+      - title: Learn Fortran
+        url:  /learn/
+
+  - title: Getting started
+    pages:
+    - title: Quickstart tutorial
+      url: /learn/quickstart
+
+  - title: Appendices
+    pages:
+    - title: Fortran FAQ
+      url: /learn/faq

_includes/learn_nav_sidebar.html

@@ -0,0 +1,73 @@
+<div class="col-fixed" id="pagenav-sidebar">
+
+  <!-- Check if this page is part of the Fortran guide -->
+  {% for chapter in site.data.fortran_guide.chapters %}
+    {% for learn_page in chapter.pages %}
+      {% if learn_page.title == page.title %}
+        {% assign inGuide=1 %}
+      {% endif %}
+    {% endfor %}
+  {% endfor %}
+
+  {% if inGuide %}
+
+    <!-- If this page is part of the guide
+          print the contents of the guide -->
+
+    <h3>
+      <i data-feather="book"></i>
+      The Fortran Guide</h3>
+
+    <div class="content">
+    {% for chapter in site.data.fortran_guide.chapters %}
+
+      {% if chapter.title != 'Appendices' %}
+        {% assign chap_idx = forloop.index | append: "." %}
+      {% else %}
+        {% assign chap_idx = "" %}
+      {% endif %}
+
+      <b>{{chap_idx}} {{ chapter.title }}</b>
+
+      <ul>
+        {% for learn_page in chapter.pages %}
+
+          {% if chapter.title != 'Appendices' %}
+            {% assign page_idx = forloop.index %}
+          {% else %}
+            {% assign page_idx = site.data.fortran_guide.appendices[forloop.index] | append: "."  %}
+          {% endif %}
+
+          {% if learn_page.title == page.title %}
+            <li>
+              <b><a href="{{site.baseurl}}{{ learn_page.url }}">
+                {{chap_idx}}{{page_idx}} {{ learn_page.title }}</a></b>
+              <ul id="page-nav"></ul>
+            </li>
+
+          {% else %}
+            <li><a href="{{site.baseurl}}{{ learn_page.url }}">
+              {{chap_idx}}{{page_idx}}
+              {{ learn_page.title }}</a></li>
+          {% endif %}
+
+        {% endfor %}
+      </ul>
+
+    {% endfor %}
+    </div>
+
+  {% else %}
+
+    <!-- If this is a standalone page
+          just print the contents for this page -->
+
+    <h3>On this page:</h3>
+    <div class="content">
+    <ul id="page-nav"></ul>
+    </div>
+
+  {% endif %}
+
+</div>
+

_layouts/default.html

@@ -28,6 +28,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     {% include google_analytics.html %}
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/page_nav.js"></script>
     <script>
       feather.replace()
     </script>

_layouts/page_learn.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+{% include nav.html active=page.navbar %}
+
+<section class="front-section">
+  <div class="container">
+
+    {% include learn_nav_sidebar.html %}
+
+    <div class="newsletter col-right">
+
+      <h1>{{ page.title }}</h1>
+
+      <div style="margin-top: 0.5em; margin-bottom: 0.5em;">
+        <i>{{ page.date | date: "%B %d, %Y" }}</i>
+        {% if page.author != null %}
+          <p><i>Authors:</i> {{ page.author }}</p>
+        {% endif %}
+      </div>
+
+      {{ content }}
+
+    </div>
+
+
+
+  </div>
+</section>

assets/css/main.css

@@ -203,6 +203,35 @@ pre {
   }
 }
 
+.col-right,
+.col-fixed {
+  display: block;
+}
+
+@media (min-width: 568px) {
+  .col-right {
+    /* display: table-cell; */
+    width: 61.8%;
+    vertical-align: top;
+    margin-left: 380px;
+    min-height: 500px;
+  }
+  .col-fixed {
+    /* display: table-cell; */
+    position: fixed;
+    width: 350px;
+    height: 500px;
+    z-index: 1; /* Stay on top */
+  }
+  .col-fixed .content{
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 90%;
+    width: 100%;
+  }
+}
+
+
 .front-section {
   padding: 8px 0;
 }

assets/js/page_nav.js

@@ -0,0 +1,35 @@
+// If the current page contains an element with id="pagenav-sidebar"
+//  then this script will populate it with <li> elements
+//  containing links to all the <h2> elements on the current page
+if (!!document.getElementById("pagenav-sidebar")){
+
+    var headings = document.querySelectorAll("h2[id]");
+
+    for (var i = 0; i < headings.length; i++) {
+        document.getElementById("page-nav").innerHTML +=
+            '<li id="nav-' + headings[i].id + 
+                '"><a href="#' + headings[i].id + '">' +
+                headings[i].innerText +
+            '</a></li>';
+    }
+
+    $(document).ready(function() {
+    $(window).scroll(function() {
+
+        var found = false;
+        var scrollPos = $(window).scrollTop();
+        for (var i = 0; i < headings.length; i++) {
+
+        if (scrollPos >= headings[i].offsetTop){
+            found = true;
+            $("#nav-"+headings[i].id).addClass('current');
+        } else {
+            $("#nav-"+headings[i].id).removeClass('current');
+        }
+
+        }
+
+    });
+    });
+
+}

learn/faq.md

@@ -0,0 +1,13 @@
+---
+layout: page_learn
+title: Fortran FAQ
+permalink: /learn/faq
+navbar: Learn
+---
+
+## Heading 1
+
+
+## Heading 2
+
+## Heading 3