jekyll-theme-open-project 1.3.4 → 2.0

data/_sass/open-project-mixins.scss

@@ -16,11 +16,11 @@
 
 @mixin wide-container() {
   @media screen and (min-width: $bigscreen-breakpoint) {
-    padding: 0;
-    width: $bigscreen-breakpoint - $gutter * 2;
+    padding: 0 2em;
+    width: $bigscreen-breakpoint - $gutter * 8;
   }
   @media screen and (min-width: $widescreen-breakpoint) {
-    width: $widescreen-breakpoint - $gutter * 2;
+    width: $widescreen-breakpoint - $gutter * 8;
   }
 }
 
@@ -319,6 +319,93 @@
   }
 }
 
+@mixin item-external-links($onDark: false) {
+  ul.nav-items {
+    @include reset-list();
+  }
+
+  > .nav-items > li {
+    flex-basis: 50%;
+    width: 50%;
+    max-width: 200px;
+
+    &:first-child {
+      a {
+        margin-left: 1px;
+      }
+    }
+
+    > a {
+      @if $onDark == true {
+        @include static-link-color(white);
+        background-color: rgba(black, 0.7);
+      } @else {
+        @include static-link-color(#444);
+        background-color: rgba(black, 0.08);
+      }
+
+      display: block;
+      font-weight: bold;
+      padding: .5em 1em .5em 1.5em;
+
+      margin: 1px 1px 1px 0;
+
+      display: flex;
+      flex-flow: row nowrap;
+
+      .lbl {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1;
+      }
+      .ico {
+        flex-shrink: 0;
+        width: 32px;
+      }
+      .ico-ext {
+        flex-shrink: 0;
+        text-align: right;
+        width: 32px;
+      }
+    }
+
+    &.featured {
+      > a {
+        @if $onDark == true {
+          @include static-link-color($primary-color);
+          background-color: white;
+        } @else {
+          @include static-link-color(white);
+          background-color: $primary-dark-color;
+        }
+      }
+    }
+  }
+}
+
+@mixin item-nav-toc() {
+  // Used for ToC on software item’s landing and elsewhere,
+  // (though not in docs sidebar)
+
+  ul.nav-items {
+    @include reset-list;
+    font-size: 15px;
+  }
+
+  > ul.nav-items > li {
+    > .item-title {
+      font-size: 18px;
+      font-weight: bold;
+      margin: 0;
+      line-height: 1.8;
+    }
+    ul {
+      line-height: 2;
+    }
+  }
+}
+
 @mixin docs-page($primary-dark-color) {
   > header.documentation-header,
   > section.documentation {
@@ -332,25 +419,11 @@
     align-items: center;
     padding: 0 0 0 2em;
     position: fixed;
-    left: 0;
     right: 0;
     z-index: 4;
 
     transition: background .1s linear, border-bottom .1s linear, transform .1s linear;
 
-    .section-title {
-      flex: 1;
-      flex-grow: 0;
-
-      flex-grow: 1;
-      transition: transform .2s ease-out;
-      opacity: 1;
-      overflow: hidden;
-
-      text-overflow: ellipsis;
-      font-weight: bold;
-    }
-
     .nav-header {
       padding: 10px 2em 10px 2em;
       display: flex;
@@ -416,13 +489,6 @@
       box-shadow: rbga(white, 0.9) 0 20px 30px;
     }
 
-    &.headroom--top {
-      .section-title {
-        transform: translateY(-5em);
-        transition: none; // To avoid flashing on initial page open
-      }
-    }
-
     &.unpinned {
       .item-type, .subsection {
         display: inline-block;
@@ -431,8 +497,6 @@
   }
 
   > section.documentation {
-    $external-links-side-margin: 16px;  // for external links
-
     flex: 1;
 
     @media screen and (min-width: $bigscreen-breakpoint) {
@@ -483,7 +547,7 @@
           max-width: calc(#{$navFlexShare} - #{$sidePadding});
         }
 
-        li.item {
+        li {
           font-size: 15px;
           font-weight: normal;
 
@@ -507,7 +571,7 @@
           a { @include static-link-color(#444); }
         }
 
-        > li.item {
+        > li {
           > .item-title {
             font-size: 20px;
             margin: 0;
@@ -537,7 +601,7 @@
             ul {
               padding: 0;
             }
-            li.item {
+            li {
               font-size: 13px;
               line-height: 1.5;
 
@@ -607,9 +671,7 @@
             flex-flow: row nowrap;
           }
 
-          border-bottom: 2px solid $primary-dark-color;
           padding-top: 70px;
-          padding-bottom: 20px;
 
           > .logo-container {
             margin-right: 22px;
@@ -642,67 +704,34 @@
     .docs-nav,
     &.docs-landing > article > header {
       .external-links {
-        margin-left: -$external-links-side-margin;
-
-        ul.nav-items {
-          @include reset-list();
-        }
-
-        > .nav-items > .item {
-          margin-bottom: 10px;
-          margin-right: 16px;
-
-          > a {
-            @include static-link-color(#444);
-            background-color: #F7F7F7;
-
-            display: block;
-            font-weight: bold;
-            padding: 4px 0 4px 0;
-            border-radius: 10px;
-
-            display: flex;
-            flex-flow: row wrap;
-
-            .lbl {
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-            }
-            .lbl:first-child {
-              // First child means no icon present
-              margin-left: 16px;
-            }
-            .ico {
-              flex-shrink: 0;
-              text-align: right;
-              width: 32px;
-              padding-right: 10px;
-            }
-            .ico-ext {
-              flex-shrink: 0;
-              text-align: right;
-              width: 32px;
-              padding-left: 10px;
-              padding-right: 10px;
-            }
-          }
-        }
+        @include item-external-links();
       }
     }
 
     .docs-nav {
       .external-links {
-        > .nav-items > .item {
-          margin-bottom: 0;
-          margin-right: -$external-links-side-margin;
+        margin-bottom: .5em;
+
+        > .nav-items > li {
+          flex-basis: unset;
+          width: 100%;
+          a {
+            padding: 0;
+            background: none;
+          }
+          &.featured {
+            a {
+              background: none;
+              @include static-link-color($main-font-color);
+            }
+          }
         }
       }
     }
 
     &.docs-landing > article {
       > header {
-        .external-links > .nav-items > .item  > a {
+        .external-links > .nav-items > li > a {
           @include static-link-color(#fff);
           background-color: $primary-dark-color;
         }
@@ -713,22 +742,7 @@
         }
       }
 
-      ul.nav-items {
-        @include reset-list;
-        font-size: 15px;
-      }
-
-      > ul.nav-items > li {
-        > .item-title {
-          font-size: 20px;
-          font-weight: bold;
-          margin: 0;
-          line-height: 1.8;
-        }
-        ul {
-          line-height: 2;
-        }
-      }
+      @include item-nav-toc();
     }
 
     @media screen and (min-width: $bigscreen-breakpoint) {

data/assets/css/style.scss

@@ -2,12 +2,9 @@
 ---
 
 $primary-color: #05C7DF;
-$primary-dark-color: #0446CC;
 $accent-color: #FF6357;
 
-$header-background: linear-gradient(135deg, #0446CC 0%, #2864DD 100%);
-$hero-background: linear-gradient(135deg, #0446CC 0%, #2864DD 100%);
-$superhero-background: linear-gradient(135deg, #0446CC 0%, #2864DD 100%);
+$main-background: linear-gradient(135deg, #0446CC 0%, #2864DD 100%);
 
 @import 'jekyll-theme-open-project';
 

data/assets/js/adoc-toc.js

@@ -2,6 +2,7 @@
 
   const HEADER_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
   const IN_PAGE_NAV_HTML_CLASS = 'in-page-toc';
+  const SCROLLABLE_NAV_CONTAINER_SELECTOR = 'ul.nav-items';
 
   /* Given a container of AsciiDoc .sectN elementss,
    * returns an object containing navigation structure like this:
@@ -47,10 +48,13 @@
   }
 
   function highlightSelected(headerId, itemPath) {
+    let selectedItemEl;
+
     for (const itemEl of document.querySelectorAll(`.${IN_PAGE_NAV_HTML_CLASS} li`)) {
       const link = (itemEl.firstChild || {}).firstChild;
       if (link && link.getAttribute('href') == itemPath) {
         itemEl.classList.add('highlighted');
+        selectedItemEl = itemEl;
       } else {
         itemEl.classList.remove('highlighted');
       }
@@ -62,6 +66,8 @@
     }
     const selectedHeaderEl = document.getElementById(headerId);
     selectedHeaderEl.classList.add('highlighted');
+
+    return selectedItemEl;
   }
 
   /* Given a list of navigation items, returns an <ul> containing items recursively
@@ -103,7 +109,7 @@
   }
 
   const articleBody = document.querySelector('main section article .body');
-  const selectedItem = document.querySelector('main .docs-nav .nav-items .item.selected');
+  const selectedItem = document.querySelector('main .docs-nav .nav-items li.selected');
 
   if (articleBody && selectedItem) {
     const items = getAdocTocItems(articleBody);
@@ -121,4 +127,49 @@
     }
   }
 
+  if (articleBody && window.location.hash) {
+    // Do things that need to be done if the page was opened
+    // with hash component in address bar.
+    // - After initial scroll to anchor, scroll up a bit
+    //   to ensure header is in view accounting for top bar.
+    // - Select in-page doc nav item corresponding to the hash.
+
+    const SCROLL_COMPENSATION_AMOUNT_PX = 0 - document.querySelector('body > .underlay.header > header').offsetHeight - 10;
+
+    function _scrollUp(evt) {
+      window.scrollBy(0, SCROLL_COMPENSATION_AMOUNT_PX);
+      window.removeEventListener('scroll', _scrollUp);
+    };
+
+    function _selectInitialItem() {
+      const hash = window.location.hash.substring(1);
+      const anchorEl = document.getElementById(hash);
+
+      var selectedLinkId;
+
+      if (anchorEl.tagName === 'A') {
+        // We were selected by <a> anchor, not by <hX[id]>.
+        // We want to highlight selected item in the nav
+        // according to the nearest header upwards from anchor.
+        var curEl = anchorEl;
+        while (true) {
+          var curEl = curEl.parentNode;
+          var nearestHeaderEl = curEl.querySelector('h2');
+          if (nearestHeaderEl && nearestHeaderEl.hasAttribute('id')) {
+            selectedLinkId = nearestHeaderEl.getAttribute('id');
+            break;
+          }
+        }
+      } else {
+        selectedLinkId = hash;
+      }
+
+      const selectedItemEl = highlightSelected(selectedLinkId, `./#${selectedLinkId}`);
+      window.setTimeout(function () { selectedItemEl.scrollIntoView(); }, 200);
+    };
+
+    _selectInitialItem();
+    window.addEventListener('scroll', _scrollUp);
+  }
+
 }());

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-open-project
 version: !ruby/object:Gem::Version
-  version: 1.3.4
+  version: '2.0'
 platform: ruby
 authors:
 - Ribose Inc.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-15 00:00:00.000000000 Z
+date: 2019-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -72,28 +72,28 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.3.4
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.3.4
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.16'
+        version: '2.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.16'
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -161,6 +161,10 @@ files:
 - README.md
 - _config.yml
 - _includes/_nav-item.html
+- _includes/external-link.html
+- _includes/featured_posts.html
+- _includes/featured_software.html
+- _includes/featured_specs.html
 - _includes/home-hero.html
 - _includes/home-hub.html
 - _includes/home-project.html
@@ -232,7 +236,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.6
+rubygems_version: 2.5.2.3
 signing_key: 
 specification_version: 4
 summary: Open Project Jekyll theme