jekyll-theme-open-project 1.1.27 → 1.2

data/_layouts/product.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+html-class: docs-page
 ---
 
 {% include item-doc-page.html items=site.software item_type='software' %}

data/_sass/headroom.scss

@@ -1,6 +1,6 @@
 .headroom {
     will-change: transform;
-    transition: transform 200ms linear;
+    transition: transform .1s linear;
 }
 .headroom--pinned {
     transform: translateY(0%);
@@ -10,7 +10,7 @@
 }
 
 body.with-headroom {
-  &.layout--docs, &.layout--product, &.layout--spec {
+  &.docs-page {
     .underlay.header {
       position: fixed;
       top: 0;

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

@@ -665,11 +665,7 @@ main {
   &.layout--spec > main > article {
     @extend .main-article;
   }
-  &.layout--spec > main,
-  &.layout--product > main,
-  &.layout--docs > main {
-    > .documentation:only-child {
-      @include docs-page($primary-dark-color);
-    }
+  &.docs-page > main {
+    @include docs-page($primary-dark-color);
   }
 }

data/_sass/open-project-base.scss

@@ -1,5 +1,7 @@
 @import 'open-project-mixins';
 
+$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
+
 body {
   font-family: $font-family;
   font-size: 15px;
@@ -32,14 +34,13 @@ a {
 
     > .item {
       margin-right: $gutter;
-      flex: 1;
 
       &.featured-item::before {
         // Reposition featured item label for grid layout
         // !important overrides .item-card which ends up with higher specificity
-        top: -1em !important;
-        left: 30px !important; // Matches corresponding item card padding
-        right: auto !important;
+        top: 0 !important;
+        right: 0 !important;
+        left: auto !important;
         bottom: auto !important;
       }
     }

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

@@ -168,6 +168,7 @@ body > .underlay > footer {
 
 body > .underlay.footer {
   background: #2E333B;
+  z-index: 5;
 }
 
 body > .underlay > header {

data/_sass/open-project-mixins.scss

@@ -188,73 +188,47 @@
 }
 
 @mixin docs-page($primary-dark-color) {
-  $side-margin: 16px;  // for external links
-
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-
-  .external-links {
-    margin-left: -$side-margin;
-
-    ul.section-items {
-      @include reset-list();
-    }
-
-    > .section-items > .item {
-      margin-bottom: 10px;
-      margin-right: -$side-margin;
+  > header.documentation-header,
+  > section.documentation {
+    align-self: stretch;
+    width: auto;
+  }
 
-      > a {
-        @include static-link-color(#444);
-        background-color: #F7F7F7;
+  > header.documentation-header {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 0 0 0 2em;
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 4;
 
-        display: block;
-        font-weight: bold;
-        padding: 4px $side-margin 4px $side-margin;
-        border-radius: 10px;
+    transition: background .1s linear, border-bottom .1s linear, transform .1s linear;
 
-        display: flex;
-        flex-flow: row nowrap;
+    cursor: pointer;
 
-        .lbl {
-          flex: 1;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .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;
-        }
-      }
-    }
-  }
+    .section-title {
+      flex: 1;
+      flex-grow: 0;
 
-  > .docs-nav {
-    padding-top: 50px;
-    background: transparent;
+      flex-grow: 1;
+      transition: transform .2s ease-out;
+      opacity: 1;
+      overflow: hidden;
 
-    > .sidebar-header, > section {
-      margin-bottom: 15px;
+      text-overflow: ellipsis;
+      font-weight: bold;
     }
 
-    > .sidebar-header {
+    .nav-header {
+      padding: 10px 2em 10px 2em;
       display: flex;
       flex-flow: row nowrap;
       align-items: center;
+      transition: background .6s $easeOutCirc;
 
       .title {
-        flex: 1;
         white-space: nowrap;
         line-height: 1;
         font-weight: normal;
@@ -264,300 +238,376 @@
 
         a { @include static-link-color(#444); }
       }
+
       .logo-container {
+        $logoSize: 32px;
+
         margin-right: 10px;
+        height: $logoSize;
+        width: $logoSize;
 
         .logo > :only-child {
-          width: 32px;
-          height: 32px;
+          width: $logoSize;
+          height: $logoSize;
         }
       }
+
+      .nav-toggle-icon {
+        margin-left: 1em;
+
+        > .close { display: none; }
+        > .open { display: block; }
+      }
     }
 
-    > section {
-      > .section-title {
-        font-size: 20px;
-        font-weight: bold;
-        margin: 0;
-        line-height: 1.8;
+    &.nav-expanded {
+      .nav-header {
+        background-color: #f7f7f7;
       }
+      .nav-header .nav-toggle-icon {
+        > .open { display: none; }
+        > .close { display: block; }
+      }
+    }
 
-      > .section-items {
-        @include reset-list;
+    .item-type {
+      display: none;
+      margin-right: 10px;
+    }
 
-        line-height: 2;
+    &.headroom--not-top {
+      background: rgba(white, 0.9);
+      box-shadow: rbga(white, 0.9) 0 20px 30px;
+    }
 
-        > .item {
-          font-size: 15px;
-          font-weight: normal;
+    &.headroom--top {
+      .section-title {
+        transform: translateY(-5em);
+        transition: none; // To avoid flashing on initial page open
+      }
+    }
 
-          &.selected {
-            span {
-              font-weight: bold;
-              color: $primary-dark-color;
-            }
-          }
-          a { @include static-link-color(#444); }
-        }
+    &.unpinned {
+      .item-type, .subsection {
+        display: inline-block;
       }
     }
   }
 
-  > article {
-    @extend .main-article;
+  > section.documentation {
+    $external-links-side-margin: 16px;  // for external links
+
     flex: 1;
+    display: flex;
+    flex-flow: column nowrap;
+
+    overflow-x: auto; // on narrow screens, code snippets & tables may overflow width
 
-    background: white;
-    z-index: 1;
+    .docs-nav {
+      $navFlexShare: 20%;
 
-    > header > nav,
-    > footer > nav {
-      line-height: 1;
+      background: transparent;
+      flex-basis: 20%;
 
-      button, a {
-        border: 0;
-        padding: 0;
-        margin-right: 1em;
+      transition: flex-basis .6s $easeOutCirc;
 
-        font-family: inherit;
-        font-size: 80%;
-        font-weight: bold;
+      > section {
+        margin-bottom: 15px;
+      }
 
-        background: white;
-        color: $primary-dark-color;
-        cursor: pointer;
+      // New style: Nav with nested items
+      > ul.nav-items {
+        $sidePadding: 2em;
 
-        text-decoration: none;
+        @include reset-list;
 
-        &:last-child {
-          margin-right: 0;
-        }
+        position: fixed;
+        overflow-y: auto;
+        bottom: 0;
+        right: 0;
 
-        .ico-ext {
-          margin-left: .5em;
-        }
-      }
-    }
+        padding: 0 $sidePadding;
 
-    > header > nav {
-      margin-top: -2em;
-      margin-bottom: 4em;
-    }
+        z-index: 5;
+        background: #f7f7f7;
+        box-shadow: black -20px 0px 60px -45px;
 
-    > footer > nav {
-      margin-top: 2em;
-      @media screen and (min-width: $bigscreen-breakpoint) {
-        margin-left: 2em;
-      }
-    }
+        transition:
+          // Collapsing of header when scrolling (w/headroom):
+          top .1s linear,
+          // Toggling sidebar open/closed
+          transform .6s $easeOutCirc,
+          opacity .6s $easeOutCirc,
+          box-shadow .6s $easeOutCirc;
 
-    > header {
-      > .title {
         @media screen and (min-width: $bigscreen-breakpoint) {
-          display: flex;
-          flex-flow: row nowrap;
+          max-width: calc(#{$navFlexShare} - #{$sidePadding});
         }
 
-        border-bottom: 2px solid $primary-dark-color;
-        padding-top: 70px;
-        padding-bottom: 20px;
-
-        > .logo-container {
-          margin-right: 22px;
+        li.item {
+          font-size: 15px;
+          font-weight: normal;
 
-          > :only-child {
-            width: 58px;
-            height: 58px;
+          &.selected {
+            span {
+              font-weight: bold;
+              color: $primary-dark-color;
+            }
           }
+          a { @include static-link-color(#444); }
         }
 
-        .text {
-          flex: 1;
-          font-size: 36px;
-
-          margin: 0;
-          font-weight: 500;
+        > li.item {
+          > .item-title {
+            font-size: 20px;
+            font-weight: bold;
+            margin: 0;
+            line-height: 1.8;
+          }
+          > ul {
+            @include reset-list;
+            line-height: 2;
+          }
         }
       }
-      .lead {
-        font-weight: normal;
-        font-size: 20px;
-      }
     }
 
-    > .body {
-      @include asciidoc-markup($primary-dark-color);
-    }
-  }
+    > article {
+      @extend .main-article;
 
-  &.docs-landing {
-    flex-direction: column-reverse;
+      margin: 0 auto;
+      flex: 1;
 
-    .external-links > .section-items > .item {
-      margin: 0 $side-margin $side-margin $side-margin;
+      background: white;
+      z-index: 1;
 
-      > a {
-        @include static-link-color(#fff);
-        background-color: $primary-dark-color;
-      }
-    }
+      > header, > footer {
+        nav {
+          line-height: 1;
 
-    > .docs-nav {
-      padding-top: 0;
-    }
+          button, a {
+            border: 0;
+            padding: 0;
+            margin-right: 1em;
 
-    > article {
-      max-width: none;  // Overrides .main-article base style
+            font-family: inherit;
+            font-size: 80%;
+            font-weight: bold;
+
+            background: white;
+            color: $primary-dark-color;
+            cursor: pointer;
+
+            text-decoration: none;
+
+            &:last-child {
+              margin-right: 0;
+            }
 
-      > header > .title {
-        border-bottom-width: 0;
-        padding-bottom: 0;
+            .ico-ext {
+              margin-left: .5em;
+            }
+          }
+        }
       }
-    }
-  }
 
-  &.specs {
-    > article {
-      max-width: none;
-    }
-  }
+      > header {
+        > nav {
+          margin-top: -2em;
+          margin-bottom: 4em;
+        }
+        > .title {
+          @media screen and (min-width: $bigscreen-breakpoint) {
+            display: flex;
+            flex-flow: row nowrap;
+          }
 
-  @media screen and (min-width: $bigscreen-breakpoint) {
-    flex-flow: row nowrap;
+          border-bottom: 2px solid $primary-dark-color;
+          padding-top: 70px;
+          padding-bottom: 20px;
 
-    > .docs-nav {
-      flex: 1;
-      flex-grow: 1;
-      padding-top: 70px;
+          > .logo-container {
+            margin-right: 22px;
 
-      > section > .section-items {
-        padding-right: 40px;
-      }
-    }
+            > :only-child {
+              width: 58px;
+              height: 58px;
+            }
+          }
 
-    > article {
-      flex: 2;
-      border-left: #F7F7F7 2px solid;
+          .text {
+            flex: 1;
+            font-size: 36px;
+
+            margin: 0;
+            font-weight: 500;
+          }
+        }
+        .lead {
+          font-weight: normal;
+          font-size: 20px;
+        }
+      }
 
-      > header,
       > .body {
-        margin-left: 60px;
+        @include asciidoc-markup($primary-dark-color);
+      }
+
+      > footer > nav {
+        margin-top: 2em;
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          margin-left: 2em;
+        }
       }
     }
 
-    &.docs-landing {
-      flex-direction: column-reverse;
+    .docs-nav,
+    &.docs-landing > article > header {
+      .external-links {
+        margin-left: -$external-links-side-margin;
 
-      > article {
-        border-left-width: 0;
+        ul.nav-items {
+          @include reset-list();
+        }
+
+        > .nav-items > .item {
+          margin-bottom: 10px;
+          margin-right: -$external-links-side-margin;
+
+          > a {
+            @include static-link-color(#444);
+            background-color: #F7F7F7;
+
+            display: block;
+            font-weight: bold;
+            padding: 4px 0 4px 0;
+            border-radius: 10px;
 
-        .external-links {
-          > .section-items {
             display: flex;
             flex-flow: row nowrap;
-            justify-content: space-between;
 
-            > * {
+            .lbl {
               flex: 1;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+            .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;
             }
           }
         }
+      }
+    }
 
-        > header,
-        > .body {
-          margin-left: 0;
+    &.docs-landing > article {
+      max-width: none;  // Overrides .main-article base style
+
+      > header {
+        .external-links > .nav-items > .item  > a {
+          @include static-link-color(#fff);
+          background-color: $primary-dark-color;
         }
 
-        @media screen and (min-width: $bigscreen-breakpoint) {
-          > .body {
-            padding-top: 70px;
-          }
+        > .title {
+          border-bottom-width: 0;
+          padding-bottom: 0;
         }
       }
-    }
-  }
-
-  &.with-expandable-toc {
-    // Is enabled by a script.
 
-    position: relative;
-
-    > article {
-      border-left-width: 0;
-      padding-top: 2em;
+      ul.nav-items {
+        @include reset-list;
+        font-size: 15px;
+      }
 
-      > header, > .body {
-        margin-left: 0;
+      > ul.nav-items > li {
+        > .item-title {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 0;
+          line-height: 1.8;
+        }
+        ul {
+          line-height: 2;
+        }
       }
     }
 
-    > .docs-nav {
-      z-index: 4;
+    &.specs > article {
+      max-width: none;  // Overrides .main-article base style
+    }
 
-      &.top-expandable {
-        border-bottom: 1px solid silver;
-        z-index: 4;
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      flex-flow: row nowrap;
+      flex-direction: row-reverse;
 
-        position: fixed;
-        left: 0;
-        right: 0;
+      > article {
+        flex: 2;
+      }
 
-        padding-top: 0;
-        padding-left: 2em;
-        padding-right: 2em;
+      > .docs-nav {
+        padding: 70px 0 0 0;
+      }
 
-        transition:
-          background 200ms cubic-bezier(0.23, 1, 0.32, 1),
-          transform 200ms linear;
+      &.docs-landing {
+        flex-direction: column-reverse;
 
-        overflow: hidden;
+        > article {
+          border-left-width: 0;
 
-        .sidebar-header {
-          background: white;
-          cursor: pointer;
-          padding-top: 10px;
-          padding-bottom: 10px;
+          .external-links {
+            > .nav-items {
+              display: flex;
+              flex-flow: row nowrap;
+              justify-content: space-between;
 
-          &:after {
-            content: "▼";
+              > * {
+                flex: 1;
+              }
+            }
           }
 
-          .item-type {
-            display: none;
-            margin-right: 10px;
-          }
-          .title {
-            flex-grow: 0;
-          }
-          .section-title {
-            margin-left: 10px;
-            margin-right: 10px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            flex-grow: 1;
-            transition: transform .2s ease-out;
+          > header,
+          > .body {
+            margin-left: 0;
           }
 
-          &.headroom--top {
-            .section-title {
-              transform: translateY(-5em);
-              transition: none;
+          @media screen and (min-width: $bigscreen-breakpoint) {
+            > .body {
+              padding-top: 70px;
             }
           }
+        }
+      }
 
-          &.unpinned {
-            .item-type, .subsection {
-              display: inline-block;
-            }
+      &.with-collapsed-toc {
+        > article {
+          > header, > .body {
+            margin-right: 0;
           }
         }
+      }
+    }
+
+    &.with-collapsed-toc {
+      position: relative;
+
+      > .docs-nav {
+        flex-basis: 0;
 
-        &.expanded {
-          box-shadow: 0px -5px 20px 0 rgba(black, 0.4);
-          z-index: 6;
-          overflow-y: scroll;
-          background: white;
-          border-bottom: none;
+        .nav-items {
+          transform: translateX(100%);
+          opacity: 0;
         }
       }
     }