Add navigation structure for learn section

_data/learning.yml

@@ -0,0 +1,102 @@
+# Categories group mini-books on the 'Learn' landing page
+#
+#  'fa-icon' refers to the font-awesome icon to display
+#          next to the category on the landing page
+#
+categories:
+  - name: Getting started
+    fa-icon: fas fa-cubes
+  # - name: Advanced programming methods
+  #   fa-icon: fas fa-laptop-code
+
+
+
+# Mini-books are single-page or multi-page tutorials
+#
+# 'link' refers to the 'permalink' field of the corresponding page
+#
+books:
+  - title: Quickstart Fortran Tutorial
+    description: An introduction to the Fortran syntax and its capabilities
+    category: Getting started
+    link: /learn/quickstart
+    pages:
+      - link: /learn/quickstart/hello_world
+      - link: /learn/quickstart/variables
+      - link: /learn/quickstart/arrays_strings
+      - link: /learn/quickstart/operators_control_flow
+      - link: /learn/quickstart/organising_code
+
+
+
+# Web links listed at the bottom of the 'Learn' landing page
+#
+reference-links:
+  - name: Fortran wiki
+    url: http://fortranwiki.org/
+    description: A rich collection of Fortran articles and resources in an editable wiki format
+
+  - name: "Fortran 2018 Standard Interpretation Document"
+    url: https://j3-fortran.org/doc/year/18/18-007r1.pdf
+    description: "J3/18-007r1 F2018, specification of the base Fortran 2018 language"
+
+  - name: "J3 Fortran Proposals"
+    url: https://github.com/j3-fortran/fortran_proposals
+    description: a repository for community collaboration on proposals for the Fortran Standards Committee
+
+  - name: "J3: US Fortran Standards Committee"
+    url: https://j3-fortran.org/
+    description: J3 is the US National Body for the international Fortran standards committee
+
+  - name: "WG5: International Fortran Standards Committe"
+    url: https://wg5-fortran.org/
+    description: 
+
+  - name: "Scivision Fortran 2018 Examples"
+    url: https://github.com/scivision/fortran2018-examples
+    description: A github repository containing code samples for various Fortran 2018 features
+
+
+
+
+# Print books listed at the bottom of the 'Learn' landing page
+#
+reference-books:
+  - author: Metcalf, M., Reid, J. and Cohen M.
+    year: 2018
+    title: Modern Fortran Explained
+    url: https://global.oup.com/academic/product/modern-fortran-explained-9780198811893
+    edition: 5th ed
+    location: Oxford, UK
+    publisher: Oxford Universtiy Press
+
+  - author: Curcic, M.
+    year: 2020
+    title: "Modern Fortran: Building Efficient Parallel Applications"
+    url: https://www.manning.com/books/modern-fortran
+    edition: 1st ed
+    location: Shelter Island, NY
+    publisher: Manning Publications
+
+  - author: Markus, A.
+    year: 2012
+    title: "Modern Fortran in Practice"
+    url: https://www.cambridge.org/core/books/modern-fortran-in-practice/BC5BD23B2E478B4D457C5D6265BA9363
+    edition: 1st ed
+    location: Cambridge, UK
+    publisher: Cambridge University Press
+
+  - author: Chivers, I. and Sleightholme, J.
+    year: 2018
+    title: Introduction to Programming with Fortran
+    url: https://doi.org/10.1007/978-3-319-75502-1
+    edition: 4th ed
+    publisher: Springer International Publishing
+
+  - author: Chapman S. J.
+    year: 2018
+    title: Fortran for Scientists and Engineers
+    url: https://www.mheducation.com/highered/product/fortran-scientists-engineers-chapman/M9780073385891.html
+    edition: 4th ed
+    location: New York
+    publisher: McGraw-Hill Education

_includes/book_navbar.html

@@ -0,0 +1,90 @@
+<div class="col-fixed" id="pagenav-sidebar">
+
+  <!-- Find parent book using page.permalink -->
+  <!-- NB. This search is inefficient but simplifies
+        the definition of book pages in learning.yml -->
+  {% for book_i in site.data.learning.books %}
+    {% if book_i.link == page.permalink %}
+      {% assign book = book_i %}
+      {% break %}
+    {% endif %}
+    {% if book_i.pages %}
+      {% for bookPage in book_i.pages %}
+        {% if bookPage.link == page.permalink %}
+          {% assign book = book_i %}
+          {% break %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      {% if book_i.link == page.permalink %}
+        {% assign book = book_i %}
+        {% break %}
+      {% endif %}
+    {% endif %}
+  {% endfor  %}
+
+  <a href="{{site.baseurl}}/learn#book-index">
+    <i class="fas fa-arrow-circle-left"></i>
+    Back to Learn Fortran index 
+  </a>
+
+  <h3>
+  <i class="fas fa-book"></i>
+  {{ book.title }}</h3>
+
+  <div class="content">
+  {% if book.pages %} <!-- If this book has multiple pages -->
+
+    {% assign nPage = book.pages | size %}
+
+    <ul>
+
+    <!-- Add link to book introduction (index) -->
+    {% if page.permalink == book.link %}
+      <li><b><a href="{{site.baseurl}}{{ book.link }}">
+        Introduction</a></b></li>
+        <ul id="page-nav"></ul>
+        {% assign nextPage = 0 %}
+    {% else %}
+      <li><a href="{{site.baseurl}}{{ book.link }}">
+        Introduction</a></li>
+    {% endif %}
+
+    <!-- List pages in this book -->
+    {% for page_link in book.pages %}
+
+      <!-- Get page title from page metadata -->
+      {% for sitePage in site.pages %}
+        {% if sitePage.permalink == page_link.link %}
+          {% assign bookPage = sitePage %}
+          {% break %}
+        {% endif %}
+      {% endfor %}
+
+      {% if bookPage.permalink == page.permalink %}
+        <li>
+          <b><a href="{{site.baseurl}}{{ bookPage.url }}">
+            {{ bookPage.title }}</a></b>
+          <ul id="page-nav"></ul>
+        </li>
+        {% assign prevPage = forloop.index | minus: 2 %}
+        {% assign nextPage = forloop.index %}
+
+      {% else %}
+        <li><a href="{{site.baseurl}}{{ bookPage.url }}">
+          {{ bookPage.title }}</a></li>
+      {% endif %}
+
+    {% endfor %}
+    </ul>
+
+  {% else %}
+
+    <!-- If this book is single-page -->
+    <ul id="page-nav"></ul>
+
+  {% endif %}
+</div>
+
+</div>
+

_layouts/book.html

@@ -0,0 +1,56 @@
+---
+layout: default
+---
+
+{% include nav.html active="Learn" %}
+
+<section class="front-section">
+  <div class="container">
+
+    {% include book_navbar.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 class="container-flex">
+
+        {% if prevPage %}
+          {% if prevPage < 0 %}
+            <a href="{{ site.baseurl }}{{ book.link }}" style="margin-right: auto;">
+          {% else %}
+            <a href="{{ site.baseurl }}{{ book.pages[prevPage].link }}" style="margin-right: auto;">
+          {% endif %}
+            <h3><i class="fas fa-arrow-circle-left"></i>
+              Back
+            </h3>
+          </a>
+        {% endif %}
+
+        {% if nextPage %}
+          {% if nextPage < nPage %}
+          <a href="{{ site.baseurl }}{{ book.pages[nextPage].link }}"
+          style="margin-left: auto;">
+            <h3>
+              Next
+              <i class="fas fa-arrow-circle-right"></i>
+            </h3>
+          </a>
+          {% endif %}
+        {% endif %}
+
+      </div>
+
+    </div>
+
+  </div>
+</section>

_layouts/default.html

@@ -29,6 +29,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>

assets/css/main.css

@@ -25,6 +25,42 @@ a {
   font-weight: bold;
 }
 
+.button {
+  background-color: #734f96;
+  border: none;
+  color: white;
+  padding: 10px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  border-radius: 8px;
+}
+
+.button.center {
+  display: block;
+  margin: 0 auto;
+  width: fit-content;
+}
+
+.button:hover {
+  background-color: #777;
+  color: white;
+  text-decoration: none;
+}
+
+.button.blue{
+  background-color: #008CBA;
+}
+
+.button.blue:hover{
+  background-color: #777;
+}
+
+#page-nav {
+  padding-left: 20px;
+}
+
 h1,
 h2,
 h3 {
@@ -55,11 +91,15 @@ a[target="_blank"]:after {
   margin: 0 3px 0 5px;
 }
 
-/* " except in the navbar */
+/* " except in the navbar and buttons*/
 .navbar a[target="_blank"]:after {
   content:'';
   margin: 0px;
 }
+.button[target="_blank"]:after {
+  content:'';
+  margin: 0px;
+}
 
 /* Hide text for social navbar icons 
     if not on mobile device*/
@@ -106,7 +146,8 @@ pre {
 }
 
 .container-flex{
-  margin: 0 15px;
+  margin: 0 auto;
+  width: 90%;
   display: flex;
   flex-wrap: wrap;
 }
@@ -217,6 +258,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;
 }