jekyll-theme-open-project 1.1.16 → 1.1.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a1320100ae5a96e549bdb9b421a9af5d93dbb67ea5790128c1541a5a41faca8
-  data.tar.gz: 73c8a7110c32350b2cf31624678403db40dfe56d465d683fed8929168b91502b
+  metadata.gz: 985058ab03cdc730f457234ab4c643e7b5c45cfe74fe8653fb9492913bb614e3
+  data.tar.gz: b3a54a0c5596163cd28d30f22d4f3101b9593cdbbfb719230b9b9c946d65d931
 SHA512:
-  metadata.gz: 5f47aa19b2424cc73734edbab536b2f00c0861522b4240da126a03bf9e102e4c4db43f71a691090bde6a0824fe3d47c038fd95a826744872c91f32e4f16bbbc6
-  data.tar.gz: fb71ddf8e0e7517c2d4a230c1fec18416ca224c3e122ab91746eaa965254a66b69e2f33d759791a23888154e037d27adf274eec5bbb3821be1448c306e0549d7
+  metadata.gz: 77ad5de68ffc78ee735e629f3d269bdd687b0d302d3fd8ed03bf0c916b0885ce07a40dafc7d6db02cc4dedc98e88a0b5753b2772879f21ea06d72f37e278beaf
+  data.tar.gz: 77ac7160156d7371abc6d0ba7f9fea277d710f3614ce7b35630b6948f74b6c007a19fec9ff596e9130a30a0e0a2c9a3b02f257eb81629dd2d7a462f5aaef039e

data/_includes/home-project.html

@@ -1,21 +1,21 @@
-{% assign software = site.software | where_exp: "item", "item.repo_url != nil" %}
-{% assign featured_software = software | where_exp: "item", "item.feature_with_priority != nil" | sort: 'feature_with_priority'  %}
-{% assign num_software = software | size %}
-{% assign num_featured_software = featured_software | size %}
+{% assign software = site.all_software %}
+{% assign featured_software = site.featured_software %}
+{% assign num_software = site.num_all_software %}
+{% assign num_featured_software = site.num_featured_software %}
 {% if num_featured_software > 0 %}
   {% assign software = featured_software %}
 {% endif %}
 
-{% assign specs = site.specs | where_exp: "item", "item.source_url != nil" %}
-{% assign featured_specs = specs  | where_exp: "item", "item.feature_with_priority != nil" | sort: 'feature_with_priority' %}
-{% assign num_specs = specs | size %}
-{% assign num_featured_specs = featured_specs | size %}
+{% assign specs = site.all_specs %}
+{% assign featured_specs = site.featured_specs %}
+{% assign num_specs = site.num_all_specs %}
+{% assign num_featured_specs = site.num_featured_specs %}
 {% if num_featured_specs > 0 %}
   {% assign specs = featured_specs %}
 {% endif %}
 
-{% assign posts = site.posts %}
-{% assign num_posts = site.posts | size %}
+{% assign posts = site.posts_combined %}
+{% assign num_posts = site.num_posts_combined %}
 
 {% assign num_top_items = num_software + num_posts %}
 
@@ -31,7 +31,7 @@
       <h2 class="title">Open Source Software</h2>
 
       <div class="items">
-        {% for item in software | limit: site.num_featured_software %}
+        {% for item in software | limit: site.max_featured_software %}
           <a class="item" href="{{ item.url }}" role="article">
             <div class="logo-container">
               {% include software-symbol.html item_id=item.id %}
@@ -57,6 +57,12 @@
           </a>
         {% endfor %}
       </div>
+
+      {% if num_featured_software < num_software %}
+      <footer>
+        <a class="more-link" href="/software/">See all {{ site.title }} software</a>
+      </footer>
+      {% endif %}
     </section>
   {% endif %}
 
@@ -65,7 +71,7 @@
       <h2 class="title">From the Blog</h2>
 
       <div class="items">
-        {% for item in posts | limit: site.num_featured_posts %}
+        {% for item in posts | limit: site.max_featured_posts %}
           {% include post-card.html post=item %}
         {% endfor %}
       </div>
@@ -78,7 +84,7 @@
     <h2 class="title">Open Specifications</h2>
 
     <div class="items">
-      {% for item in specs | limit: site.num_featured_specs %}
+      {% for item in specs | limit: site.max_featured_specs %}
         <a class="item" href="{{ item.url }}" role="article">
           <header>
             <h3 class="title">{{ item.title }}</h3>
@@ -100,5 +106,11 @@
         </a>
       {% endfor %}
     </div>
+
+    {% if num_featured_specs < num_specs %}
+    <footer>
+      <a class="more-link" href="/specs/">See all {{ site.title }} specs</a>
+    </footer>
+    {% endif %}
   </section>
 {% endif %}

data/_includes/item-doc-page.html

@@ -14,7 +14,7 @@
 
   {% assign item_data = include.items | where_exp: "item", "item.url == product_base_url" | first %}
 
-  <nav class="nav-sidebar">
+  <nav class="docs-nav">
 
     {% if is_docs_landing == false %}
       <header class="sidebar-header">

data/_includes/software-card-hub.html

@@ -1,10 +1,10 @@
-{% if include.project_data != nil and include.project_name != nil %}
+{% if include.item.project_data != nil and include.item.project_name != nil %}
   {% if include.item.slug == 'index' %}
     {% assign item_slug = include.item.id | split: "/" | reverse | slice: 1 | first %}
   {% else %}
     {% assign item_slug = include.item.id | split: "/" | reverse | first %}
   {% endif %}
-  {% assign product_home_url = include.project_data.home_url | append: include.item_type | append: "/" | append: item_slug | append: "/" %}
+  {% assign product_home_url = include.item.project_data.home_url | append: include.item_type | append: "/" | append: item_slug | append: "/" %}
 {% else %}
   {% assign product_home_url = include.item.url | relative_url %}
 {% endif %}
@@ -17,12 +17,12 @@
   {% endif %}
 
   <header>
-    {% if include.project_data != nil and include.project_name != nil %}
-      {% assign project_symbol_path = include.project_name | append: "/assets/symbol.svg" %}
+    {% if include.item.project_data != nil and include.item.project_name != nil %}
+      {% assign project_symbol_path = include.item.project_name | append: "/assets/symbol.svg" %}
       {% assign relative_symbol_path = "/projects/" | append: project_symbol_path %}
       <div class="parent-project">
         <div class="project-logo"><img src="{{ relative_symbol_path }}"></div>
-        <h4 class="project-title">{{ include.project_data.title }}</h4>
+        <h4 class="project-title">{{ include.item.project_data.title }}</h4>
       </div>
     {% endif %}
     <h3 class="title">{{ include.item.title }}</h3>

data/_layouts/default.html

@@ -5,6 +5,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <link href="{{ "/assets/favicon.png" | relative_url }}" rel="shortcut icon" type="image/x-icon">
+  <link href="{{ "/assets/webclip.png" | relative_url }}" rel="apple-touch-icon">
+
   <link id="themeCSS" rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
   <script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-E5SpgaZcbSJx0Iabb3Jr2AfTRiFnrdOw1mhO19DzzrT9L+wCpDyHUG2q07aQdO6E" crossorigin="anonymous"></script>
 
@@ -69,7 +72,8 @@
     </footer>
   </div>
 
-  <script src="{{ "assets/js/menu.js" | relative_url }}"></script>
+  <script src="{{ "assets/js/headroom.min.js" | relative_url }}"></script>
+  <script src="{{ "assets/js/opf.js" | relative_url }}"></script>
 
   {% include scripts.html %}
 </body>

data/_layouts/software-index.html

@@ -6,22 +6,22 @@ layout: default
   {% include index-page-item-filter.html url_tag_prefix="/software/" items=site.all_software tag=page.tag %}
 {% endif %}
 
-{% assign items = page.items | default: site.all_software %}
-
 <section class="items">
   {% if site.is_hub %}
     {% include assets/symbol.svg %}
-  {% endif %}
-
-  {% for product in items %}
-    {% if site.is_hub %}
-      {% assign project_name = product.url | split: "/" | slice: 2 | first %}
-      {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
-      {% assign project = site.projects | where: "path", project_index_path | first %}
-
-      {% include software-card-hub.html item=product item_type='software' project_name=project_name project_data=project %}
-    {% else %}
+    {% assign items = page.items | default: site.all_software %}
+    {% for product in items %}
       {% include software-card-hub.html item=product item_type='software' %}
+    {% endfor %}
+  {% else %}
+    {% if site.num_featured_software > 0 %}
+      {% for product in site.featured_software %}
+        {% include software-card-hub.html item=product item_type='software' %}
+      {% endfor %}
+      <hr>
     {% endif %}
-  {% endfor %}
+    {% for product in site.non_featured_software %}
+      {% include software-card-hub.html item=product item_type='software' %}
+    {% endfor %}
+  {% endif %}
 </section>

data/_layouts/spec-index.html

@@ -7,21 +7,23 @@ layout: default
 {% endif %}
 
 {% assign items = page.items | default: site.all_specs %}
+{% assign num_items = items | size %}
 
-<section class="items">
+<section class="items {% if num_items < 3 %}one-row{% endif %}">
   {% if site.is_hub %}
     {% include assets/symbol.svg %}
-  {% endif %}
-
-  {% for spec in items %}
-    {% if site.is_hub %}
-      {% assign project_name = spec.url | split: "/" | slice: 2 | first %}
-      {% assign project_index_path = "_projects/" | append: project_name | append: "/index.md" %}
-      {% assign project = site.projects | where: "path", project_index_path | first %}
-
-      {% include software-card-hub.html item=spec item_type='specs' project_name=project_name project_data=project %}
-    {% else %}
+    {% for spec in items %}
       {% include software-card-hub.html item=spec item_type='specs' %}
+    {% endfor %}
+  {% else %}
+    {% if site.num_featured_specs > 0 %}
+      {% for spec in site.featured_specs %}
+        {% include software-card-hub.html item=spec item_type='specs' %}
+      {% endfor %}
+      <hr>
     {% endif %}
-  {% endfor %}
+    {% for spec in site.non_featured_specs %}
+      {% include software-card-hub.html item=spec item_type='specs' %}
+    {% endfor %}
+  {% endif %}
 </section>

data/_sass/headroom.scss

@@ -0,0 +1,22 @@
+.headroom {
+    will-change: transform;
+    transition: transform 200ms linear;
+}
+.headroom--pinned {
+    transform: translateY(0%);
+}
+.headroom--unpinned {
+    transform: translateY(-100%);
+}
+
+body.with-headroom {
+  &.layout--product {
+    .underlay.header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 6;
+    }
+  }
+}

data/_sass/jekyll-theme-open-project.scss

@@ -29,6 +29,7 @@ $bigscreen-breakpoint: 900px + $gutter * 2;
 
 @import "open-project-base";
 @import "open-project-header-footer";
+@import "headroom";
 
 
 main {
@@ -188,10 +189,6 @@ main {
       @extend .item-grid;
       @extend .index-item-grid;
 
-      .items.one-row {
-        justify-content: center;
-      }
-
       .item {
         @extend .item-card;
         @extend .post-card;
@@ -213,6 +210,10 @@ main {
         }
       }
     }
+
+    > .items.one-row {
+      justify-content: center;
+    }
   }
 
   .layout--post > & {
@@ -438,6 +439,17 @@ main {
   &.layout--software-index > main,
   &.layout--spec-index > main {
     > .items {
+      > hr {
+        // Separates featured items, listed initially, from the rest
+        width: 10em;
+        margin: 40px auto;
+        border-style: solid;
+        border-color: $primary-color;
+        background-color: $primary-color;
+        color: $primary-color;
+        box-shadow: 2px 2px 0 3px $primary-color;
+      }
+
       .item {
         @extend .item-card;
         @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));

data/_sass/open-project-base.scss

@@ -95,6 +95,16 @@ a {
   > .items {
     align-self: stretch;
   }
+
+  > footer {
+    text-align: center;
+
+    .more-link {
+      @include cta-button-mini(white, $primary-color);
+      border-radius: 25px;
+      border: 1px solid $primary-color;
+    }
+  }
 }
 
 .with-symbol-background {
@@ -305,12 +315,34 @@ a {
       @include code-snippet-container();
     }
 
+    dl {
+      dd {
+        margin-left: 1.25em;
+      }
+    }
     ul, ol {
+      padding-left: 1.25em;
+
       li > p:only-child {
         // Keep list items visually together
         margin: 0;
       }
     }
+    blockquote {
+      margin-left: 1.25em;
+    }
+
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      dl dd {
+        margin-left: 2em;
+      }
+      blockquote {
+        margin-left: 2em;
+      }
+      ul, ol {
+        padding-left: 2em;
+      }
+    }
 
     table {
       $border-color: lighten($main-font-color, 80);

data/_sass/open-project-header-footer.scss

@@ -215,7 +215,7 @@ body > .underlay > header {
     left: 0;
     right: 0;
     transform: translateY(-100%);
-    transition: transform .2s ease-out;
+    transition: transform .8s cubic-bezier(0.23, 1, 0.32, 1);
 
     height: 100vh;
     overflow: hidden;

data/_sass/open-project-mixins.scss

@@ -54,7 +54,6 @@
 }
 
 @mixin code-snippet() {
-  white-space: pre-wrap;
   color: lighten($main-font-color, 24);
 
   @include padded-code-snippet();
@@ -71,7 +70,7 @@
 @mixin cta-button($bgcolor, $color) {
   font-weight: 800;
   font-size: 18px;
-  padding: 12px 18px;
+  padding: 12px 22px;
   display: inline-block;
 
   .icon {
@@ -96,6 +95,12 @@
   }
 }
 
+@mixin cta-button-mini($bgcolor, $color) {
+  @include cta-button($bgcolor, $color);
+  font-size: 14px;
+  padding: 6px 16px;
+}
+
 @mixin hoverable-card($base-y, $base-blur, $color) {
   $hovered-y: $base-y * 2;
   $hovered-blur: $base-blur * 2;
@@ -175,7 +180,7 @@
     }
   }
 
-  > .nav-sidebar {
+  > .docs-nav {
     padding-top: 50px;
 
     > .sidebar-header, > section {
@@ -258,11 +263,14 @@
 
     background: white;
     z-index: 1;
+    overflow-x: hidden;
 
     > header {
       > .title {
-        display: flex;
-        flex-flow: row nowrap;
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          display: flex;
+          flex-flow: row nowrap;
+        }
 
         border-bottom: 2px solid $primary-dark-color;
         padding-top: 70px;
@@ -305,6 +313,15 @@
 
       // Used for tip block labels
       .admonitionblock {
+        overflow-x: scroll;
+
+        table:first-child {
+          margin-top: 0;
+        }
+        table:last-child {
+          margin-bottom: 0;
+        }
+
         td.icon {
           vertical-align: top;
           padding-left: 0;
@@ -347,7 +364,7 @@
       }
     }
 
-    > .nav-sidebar {
+    > .docs-nav {
       padding-top: 0;
     }
 
@@ -364,7 +381,7 @@
   @media screen and (min-width: $bigscreen-breakpoint) {
     flex-flow: row nowrap;
 
-    > .nav-sidebar {
+    > .docs-nav {
       flex: 1;
       flex-grow: 1;
       padding-top: 70px;

data/assets/js/headroom.min.js

@@ -0,0 +1,7 @@
+/*!
+ * headroom.js v0.9.4 - Give your page some headroom. Hide your header until you need it
+ * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/headroom.js
+ * License: MIT
+ */
+
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.Headroom=b()}(this,function(){"use strict";function a(a){this.callback=a,this.ticking=!1}function b(a){return a&&"undefined"!=typeof window&&(a===window||a.nodeType)}function c(a){if(arguments.length<=0)throw new Error("Missing arguments in extend function");var d,e,f=a||{};for(e=1;e<arguments.length;e++){var g=arguments[e]||{};for(d in g)"object"!=typeof f[d]||b(f[d])?f[d]=f[d]||g[d]:f[d]=c(f[d],g[d])}return f}function d(a){return a===Object(a)?a:{down:a,up:a}}function e(a,b){b=c(b,e.options),this.lastKnownScrollY=0,this.elem=a,this.tolerance=d(b.tolerance),this.classes=b.classes,this.offset=b.offset,this.scroller=b.scroller,this.initialised=!1,this.onPin=b.onPin,this.onUnpin=b.onUnpin,this.onTop=b.onTop,this.onNotTop=b.onNotTop,this.onBottom=b.onBottom,this.onNotBottom=b.onNotBottom}var f={bind:!!function(){}.bind,classList:"classList"in document.documentElement,rAF:!!(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame)};return window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame,a.prototype={constructor:a,update:function(){this.callback&&this.callback(),this.ticking=!1},requestTick:function(){this.ticking||(requestAnimationFrame(this.rafCallback||(this.rafCallback=this.update.bind(this))),this.ticking=!0)},handleEvent:function(){this.requestTick()}},e.prototype={constructor:e,init:function(){if(e.cutsTheMustard)return this.debouncer=new a(this.update.bind(this)),this.elem.classList.add(this.classes.initial),setTimeout(this.attachEvent.bind(this),100),this},destroy:function(){var a=this.classes;this.initialised=!1;for(var b in a)a.hasOwnProperty(b)&&this.elem.classList.remove(a[b]);this.scroller.removeEventListener("scroll",this.debouncer,!1)},attachEvent:function(){this.initialised||(this.lastKnownScrollY=this.getScrollY(),this.initialised=!0,this.scroller.addEventListener("scroll",this.debouncer,!1),this.debouncer.handleEvent())},unpin:function(){var a=this.elem.classList,b=this.classes;!a.contains(b.pinned)&&a.contains(b.unpinned)||(a.add(b.unpinned),a.remove(b.pinned),this.onUnpin&&this.onUnpin.call(this))},pin:function(){var a=this.elem.classList,b=this.classes;a.contains(b.unpinned)&&(a.remove(b.unpinned),a.add(b.pinned),this.onPin&&this.onPin.call(this))},top:function(){var a=this.elem.classList,b=this.classes;a.contains(b.top)||(a.add(b.top),a.remove(b.notTop),this.onTop&&this.onTop.call(this))},notTop:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notTop)||(a.add(b.notTop),a.remove(b.top),this.onNotTop&&this.onNotTop.call(this))},bottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.bottom)||(a.add(b.bottom),a.remove(b.notBottom),this.onBottom&&this.onBottom.call(this))},notBottom:function(){var a=this.elem.classList,b=this.classes;a.contains(b.notBottom)||(a.add(b.notBottom),a.remove(b.bottom),this.onNotBottom&&this.onNotBottom.call(this))},getScrollY:function(){return void 0!==this.scroller.pageYOffset?this.scroller.pageYOffset:void 0!==this.scroller.scrollTop?this.scroller.scrollTop:(document.documentElement||document.body.parentNode||document.body).scrollTop},getViewportHeight:function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},getElementPhysicalHeight:function(a){return Math.max(a.offsetHeight,a.clientHeight)},getScrollerPhysicalHeight:function(){return this.scroller===window||this.scroller===document.body?this.getViewportHeight():this.getElementPhysicalHeight(this.scroller)},getDocumentHeight:function(){var a=document.body,b=document.documentElement;return Math.max(a.scrollHeight,b.scrollHeight,a.offsetHeight,b.offsetHeight,a.clientHeight,b.clientHeight)},getElementHeight:function(a){return Math.max(a.scrollHeight,a.offsetHeight,a.clientHeight)},getScrollerHeight:function(){return this.scroller===window||this.scroller===document.body?this.getDocumentHeight():this.getElementHeight(this.scroller)},isOutOfBounds:function(a){var b=a<0,c=a+this.getScrollerPhysicalHeight()>this.getScrollerHeight();return b||c},toleranceExceeded:function(a,b){return Math.abs(a-this.lastKnownScrollY)>=this.tolerance[b]},shouldUnpin:function(a,b){var c=a>this.lastKnownScrollY,d=a>=this.offset;return c&&d&&b},shouldPin:function(a,b){var c=a<this.lastKnownScrollY,d=a<=this.offset;return c&&b||d},update:function(){var a=this.getScrollY(),b=a>this.lastKnownScrollY?"down":"up",c=this.toleranceExceeded(a,b);this.isOutOfBounds(a)||(a<=this.offset?this.top():this.notTop(),a+this.getViewportHeight()>=this.getScrollerHeight()?this.bottom():this.notBottom(),this.shouldUnpin(a,c)?this.unpin():this.shouldPin(a,c)&&this.pin(),this.lastKnownScrollY=a)}},e.options={tolerance:{up:0,down:0},offset:0,scroller:window,classes:{pinned:"headroom--pinned",unpinned:"headroom--unpinned",top:"headroom--top",notTop:"headroom--not-top",bottom:"headroom--bottom",notBottom:"headroom--not-bottom",initial:"headroom"}},e.cutsTheMustard="undefined"!=typeof f&&f.rAF&&f.bind&&f.classList,e});

data/assets/js/opf.js

@@ -0,0 +1,217 @@
+(function () {
+  'use strict';
+
+
+  var body = document.querySelector('body');
+
+
+
+  /* Topmost hamburger menu */
+
+  var initCollapsibleMenu = function(triggerEl, menuEl) {
+    var hasOpened = false;
+
+    if (triggerEl != null && menuEl != null) {
+      triggerEl.addEventListener('click', function (evt) {
+        hasOpened = menuEl.classList.toggle('expanded');
+        if (hasOpened) {
+          triggerEl.setAttribute('aria-expanded', true);
+          menuEl.setAttribute('aria-hidden', false);
+        }
+      });
+    }
+
+    return {
+      hasOpened: function() {
+        return hasOpened;
+      },
+    };
+  };
+
+  var hamburgerMenu = initCollapsibleMenu(
+    document.getElementById('hamburgerButton'),
+    document.getElementById('hamburgerMenu'));
+
+
+
+  /* Collapsible header */
+
+  var initCollapsibleHeader = function(headerEl, hamburgerMenu) {
+    var collapsibleDocsMenu;
+    var body = document.querySelector('body');
+    var headerElH = headerEl.offsetHeight;
+    var isPinned;
+
+    body.style.paddingTop = '' + headerElH + 'px';
+
+    var headroom = new Headroom(headerEl, {
+      onUnpin: function() {
+        if (hamburgerMenu.hasOpened() || (collapsibleDocsMenu && collapsibleDocsMenu.hasOpened())) {
+          this.pin();
+        } else {
+          isPinned = false;
+        }
+      },
+      onPin: function() {
+        isPinned = true;
+      },
+    });
+
+    headroom.init();
+
+    body.style.paddingTop = '' + headerElH + 'px';
+    body.classList.add('with-headroom');
+
+    return {
+      getHeaderHeight: function () {
+        return headerElH;
+      },
+      assignCollapsibleDocsNav: function (nav) {
+        collapsibleDocsMenu = nav;
+      },
+      isPinned: function () {
+        return isPinned;
+      },
+    }
+  };
+
+  var collapsibleHeader;
+
+  if (document.querySelector('body.layout--product .documentation:not(.docs-landing)') != null) {
+    collapsibleHeader = initCollapsibleHeader(
+      document.querySelector('.underlay.header'),
+      hamburgerMenu);
+  }
+
+
+
+  /* Collapsible docs nav */
+
+  var initCollapsibleDocsNav = function(docsRoot, collapsibleHeader) {
+    var article = docsRoot.querySelector('article');
+    var articleHeader = article.querySelector('header:first-child');
+    var docsNav = docsRoot.querySelector('.docs-nav');
+    var docsNavHeader = docsNav.querySelector('.sidebar-header');
+    var docsNavHeaderLink = docsNavHeader.querySelector('a');
+    var docsNavHeaderH = docsNavHeader.offsetHeight + 20; // 20px is padding, below
+    var docsNavH = docsNav.offsetHeight;
+    var docsNavSections = docsNav.querySelectorAll('section');
+
+    // Offet represents the top header height; meaning it is offset
+    // of documentation menu from the topmost edge of viewport
+    var offset = collapsibleHeader.getHeaderHeight();
+
+    article.style.paddingTop = '2em';
+    docsNav.style.zIndex = '4';
+    docsNav.style.position = 'fixed';
+    docsNav.style.top = '' + offset + 'px';
+    docsNav.style.left = '0';
+    docsNav.style.right = '0';
+    docsNav.style.paddingTop = '0';
+    docsNav.style.paddingLeft = '2em';
+    docsNav.style.paddingRight = '2em';
+    docsNav.style.transition = 'background 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms linear';
+    docsNav.style.background = 'transparent';
+    docsNav.style.overflow = 'hidden';
+
+    docsNavHeader.style.background = 'white';
+    docsNavHeader.style.paddingTop = '10px';
+    docsNavHeader.style.paddingBottom = '10px';
+    docsNavHeader.style.cursor = 'pointer';
+
+    docsNavHeader.innerHTML = docsNavHeader.innerHTML + ' ▼';
+
+    docsNavSections.forEach(function (el) {
+      el.style.transition = 'opacity .2s cubic-bezier(0.23, 1, 0.32, 1)';
+    });
+
+    // Triggering opening via header link itself
+
+    var hasOpened = false;
+    var closingTransition;
+
+    var collapse = function (docsNav) {
+      hasOpened = false;
+      docsNav.style.background = 'transparent';
+      docsNavSections.forEach(function (el) {
+        el.style.opacity = '0';
+      });
+
+      closingTransition = window.setTimeout(function () {
+        docsNav.style.overflowY = 'hidden';
+        docsNav.style.height = '' + docsNavHeaderH + 'px';
+        docsNav.style.bottom = 'unset';
+        docsNav.scrollTop = 0;
+        docsNav.style.borderBottom = '1px solid silver';
+      }, 2);
+    };
+    var open = function (docsNav) {
+      hasOpened = true;
+      window.clearTimeout(closingTransition);
+
+      docsNav.style.overflowY = 'scroll';
+      docsNav.style.height = 'auto';
+
+      if (collapsibleHeader.isPinned()) {
+        docsNav.style.bottom = '0';
+      } else {
+        docsNav.style.bottom = '-' + offset + 'px';
+      }
+
+      docsNav.style.background = 'white';
+      docsNav.style.borderBottom = 'none';
+      docsNavSections.forEach(function (el) {
+        el.style.opacity = '1';
+      });
+    };
+    var toggle = function () {
+      if (hasOpened) { collapse(docsNav); }
+      else { open(docsNav); }
+    };
+    docsNavHeader.addEventListener('click', toggle);
+
+    collapse(docsNav);
+
+    // Hiding docs nav
+
+    // TODO: Replace with moving this to the top
+    // in top header’s headroom hook?
+    var headroom = new Headroom(docsNavHeader, {
+      classes: {
+        pinned: 'pinned',
+        unpinned: 'unpinned',
+      },
+      onUnpin: function () {
+        if (hasOpened) {
+          this.pin();
+        } else {
+          docsNav.style.transform = 'translateY(-' + offset + 'px)';
+        }
+      },
+      onPin: function () {
+        docsNav.style.top = '' + offset + 'px';
+        docsNav.style.zIndex = '4';
+        docsNav.style.transform = 'translateY(0)';
+        docsNav.style.borderBottom = '1px solid silver';
+      },
+    });
+
+    headroom.init();
+
+    return {
+      hasOpened: function () {
+        return hasOpened;
+      },
+    }
+  };
+
+  var docsRoot = body.querySelector('body.layout--product .documentation:not(.docs-landing)');
+  var collapsibleDocsNav;
+
+  if (docsRoot !== null) {
+    collapsibleDocsNav = initCollapsibleDocsNav(docsRoot, collapsibleHeader);
+    collapsibleHeader.assignCollapsibleDocsNav(collapsibleDocsNav);
+  }
+
+
+}());

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-open-project
 version: !ruby/object:Gem::Version
-  version: 1.1.16
+  version: 1.1.17
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-10-07 00:00:00.000000000 Z
+date: 2018-10-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.1.16
+        version: 1.1.17
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.1.16
+        version: 1.1.17
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -193,6 +193,7 @@ files:
 - _pages/blog.html
 - _pages/software.html
 - _pages/specs.html
+- _sass/headroom.scss
 - _sass/jekyll-theme-open-project.scss
 - _sass/normalize.scss
 - _sass/open-project-base.scss
@@ -203,7 +204,8 @@ files:
 - assets/fa/fa-solid.js
 - assets/fa/fontawesome.js
 - assets/img/external-link.svg
-- assets/js/menu.js
+- assets/js/headroom.min.js
+- assets/js/opf.js
 homepage: https://github.com/riboseinc/jekyll-theme-open-project/
 licenses:
 - MIT

data/assets/js/menu.js

@@ -1,15 +0,0 @@
-(function () {
-  'use strict';
-
-  var hamBtn = document.getElementById('hamburgerButton');
-  var hamMnu = document.getElementById('hamburgerMenu');
-  var hasOpened = false;
-
-  hamBtn.addEventListener('click', function (evt) {
-    hasOpened = hamMnu.classList.toggle('expanded');
-    if (hasOpened) {
-      hamBtn.setAttribute('aria-expanded', true);
-      hamMnu.setAttribute('aria-hidden', false);
-    }
-  });
-}());