jekyll-theme-rop 2.1.15

data/_sass/jekyll-theme-rop.scss

@@ -0,0 +1,798 @@
+@import url('https://fonts.googleapis.com/css?family=Inconsolata');
+
+$font-family: Helvetica, Arial, sans-serif !default;
+$font-family-source: Inconsolata, monospace;
+
+$main-font-color: #000;
+
+$code-listing-background-color: rgba($main-font-color, 0.03);
+$code-listing-border-color: lighten($main-font-color, 70);
+
+$primary-color: lightblue !default;
+$primary-dark-color: $primary-color !default;
+$accent-color: red !default;
+
+$warning-color: red !default;
+$important-color: orange !default;
+
+$main-background: linear-gradient(315deg, $accent-color 0%, $primary-color 74%) !default;
+$header-background: $main-background !default;
+
+$hub-software--primary-color: lightsalmon !default;
+$hub-software--primary-dark-color: tomato !default;
+$hub-software--hero-background: $hub-software--primary-dark-color !default;
+
+$hub-specs--primary-color: lightpink !default;
+$hub-specs--primary-dark-color: palevioletred !default;
+$hub-specs--hero-background: $hub-specs--primary-dark-color !default;
+
+$gutter: 15px;
+$featured-cols: 3;
+$featured-cols-narrow: 2;
+$grid-cols: 3;
+$grid-cols-narrow: 2;
+
+$widescreen-breakpoint: 1140px + $gutter * 2;
+$bigscreen-breakpoint: 800px + $gutter * 2;
+
+$external-links-side-margin: 16px;  // for external links
+
+
+@import "rop-base";
+@import "rop-header-footer";
+@import "headroom";
+
+
+main {
+
+  /* Generic */
+
+  .layout--home > & {
+    padding-bottom: 2em;
+
+    > .featured-posts {
+      @extend .main-section;
+
+      .items {
+        @extend .item-grid;
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @extend .post-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 32px 30px;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+
+        .header {
+          font-size: 22px;
+        }
+
+        .body, .meta {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} );
+
+          // Hide third element (there’re at most 3)
+          &:nth-child(3) {
+            opacity: 0;
+            display: none;
+          }
+        }
+
+        @media screen and (min-width: $widescreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+
+          // Show third element
+          &:nth-child(3) {
+            opacity: 1;
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+
+  .layout--spec-index > &,
+  .layout--software-index > &,
+  .layout--blog-index > &,
+  .layout--product > &,
+  .layout--post > &,
+  .layout--spec > &,
+  .layout--project-index > &,
+  .docs-page > & {
+    padding-bottom: 50px;
+
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      padding-bottom: 100px;
+    }
+  }
+
+  .layout--home > & {
+    padding-bottom: 50px;
+  }
+
+  .layout--spec-index > &,
+  .layout--software-index > & {
+    > .filter-header {
+      // Shown when a tag is selected.
+      background-color: #fafafa;
+      font-size: 80%;
+      box-shadow: 0 4px 40px -14px rgba(0, 0, 0, 0.4);
+      border-radius: .5em;
+      margin-top: -.5em;
+
+      .title {
+        font-weight: normal;
+        text-align: center;
+
+        .tag {
+          white-space: nowrap;
+          font-weight: bold;
+
+          .namespace {
+            font-weight: normal;
+          }
+
+          &:before { content: "“"; font-weight: normal; }
+          &:after { content: "”"; font-weight: normal; }
+        }
+        a.show-all {
+          white-space: nowrap;
+        }
+      }
+    }
+    > .item-filter {
+      padding: 18px 2em;
+      background-color: #F3F3F3;
+      align-self: stretch;
+      text-align: left;
+
+      .namespace, ul.tags {
+        font-size: 14px;
+      }
+
+      .namespace {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        margin-top: .5em;
+
+        .namespace-title {
+          margin-right: 14px;
+        }
+
+        &.empty {
+          display: none;
+        }
+
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+
+      ul.tags {
+        flex: 1;
+
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        white-space: nowrap;
+        overflow-x: scroll;
+        overflow-y: hidden;
+
+        text-overflow: ellipsis;
+
+        > li {
+          display: inline;
+          margin: 0;
+          padding: 0;
+
+          > * {
+            font-weight: 700;
+            margin: 0 4px;
+            padding: 3px 10px 3px 10px;
+            white-space: nowrap;
+
+            &:first-child {
+              margin-left: -10px;
+            }
+          }
+          > a {
+            color: grey;
+          }
+        }
+
+        &.scrolled {
+          text-overflow: unset;
+        }
+      }
+    }
+  }
+  // Item filter: color override for selected tags
+  > .item-filter ul.tags li > span {
+    .layout--software-index > & {
+      color: $hub-software--primary-dark-color;
+      background-color: rgba($hub-software--primary-color, 0.1);
+    }
+    .layout--spec-index > & {
+      color: $hub-specs--primary-dark-color;
+      background-color: rgba($hub-specs--primary-color, 0.1);
+    }
+  }
+
+  .layout--blog-index > & {
+    > .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+
+      .item {
+        @extend .item-card;
+        @extend .post-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 30px 30px 16px 30px;
+
+        .header {
+          font-size: 22px;
+        }
+        .body {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} );
+          margin-bottom: $gutter;
+
+          &.has-cover-image {
+            flex-basis: 100%;
+          }
+        }
+        @media screen and (min-width: $widescreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+          margin-bottom: $gutter;
+
+          &.has-cover-image {
+            flex-basis: calc( 100%/#{$featured-cols} * 2 - #{$gutter} );
+          }
+        }
+      }
+    }
+
+    > .items.one-row {
+      justify-content: center;
+    }
+  }
+
+  .layout--post > & {
+    > article {
+      @extend .main-article;
+
+      > header {
+        > .title {
+          margin-bottom: 14px;
+        }
+        > .meta {
+          @extend .post-meta-row;
+          margin-bottom: 36px;
+        }
+      }
+      aside.social-links {
+        position: relative;
+        top: -10px;
+        margin-bottom: 14px;
+
+        .ico-ext {
+          display: none;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          // "Remove" from the flow, and offset to the left
+          $height: 100px;
+
+          height: $height;
+          width: 80px;
+
+          margin-bottom: -$height;
+
+          top: 10px;
+          left: -140px;
+
+          display: flex;
+          flex-flow: column nowrap;
+          align-items: flex-start;
+        }
+
+        > .ico {
+          margin-right: 5px;
+
+          @media screen and (min-width: $bigscreen-breakpoint) {
+            margin-right: 0;
+            margin-bottom: 5px;
+          }
+
+          .fa-layers {
+            > .fa-circle {
+              color: $primary-color;
+            }
+            > :not(.fa-circle) {
+              color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* Hub */
+
+.site--hub {
+
+  &.layout--home > main {
+    > .featured-projects {
+      @extend .main-section;
+
+      > .title:after {
+        border-bottom-color: rgba($primary-dark-color, 0.12);
+      }
+
+      .items {
+        @extend .item-grid;
+        justify-content: center;
+      }
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(4px, 16px, rgba(0, 0, 0, 0.12));
+
+        padding: 40px 32px;
+        text-align: center;
+
+        display: flex;
+        flex-flow: column nowrap;
+
+        box-sizing: border-box;
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+        }
+
+        .logo {
+          display: inline-block;
+          height: 80px;
+          width: 80px;
+
+          // Without this, some items’ logos don’t conform to above dimensions
+          overflow: hidden;
+        }
+
+        header > .title {
+          font-size: 24px;
+          margin: 0;
+        }
+
+        .body {
+          flex: 1;
+          font-size: 16px;
+          margin-bottom: 1em;
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          @media screen and (min-width: $bigscreen-breakpoint) {
+            height: 100px;
+            padding-bottom: 0;
+          }
+        }
+
+        .cta-view-project {
+          text-align: center;
+
+          .button {
+            display: inline-block;
+            padding: 8px 18px;
+            border-radius: 4px;
+            font-size: 16px;
+            font-weight: 700;
+            color: white;
+            background-color: $accent-color;
+          }
+        }
+      }
+    }
+
+    > .other-projects {
+      @extend .main-section;
+      @extend .with-symbol-background;
+
+      .items {
+        @extend .item-grid;
+      }
+
+      > .title:after {
+        border-bottom-color: rgba($primary-color, 0.12);
+      }
+    }
+  }
+
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+
+      .item {
+        @extend .item-card;
+        @include hoverable-card(4px, 12px, rgba(0, 0, 0, 0.08));
+
+        padding: 16px 30px 22px 30px;
+
+        .header {
+          font-size: 18px;
+        }
+        .body {
+          font-size: 15px;
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$grid-cols-narrow} - #{$gutter} );
+          margin-bottom: $gutter;
+        }
+
+        @media screen and (min-width: $widescreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$grid-cols} - #{$gutter} );
+          margin-bottom: $gutter;
+        }
+      }
+    }
+  }
+
+  &.layout--project-index > main {
+    .items {
+      @extend .item-grid;
+      @extend .index-item-grid;
+    }
+  }
+
+  &.layout--project-index > main,
+  &.layout--blog-index > main,
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items {
+      @extend .with-symbol-background;
+    }
+  }
+
+  &.layout--home > main > .other-projects,
+  &.layout--project-index > main {
+    .items.one-row {
+      justify-content: center;
+    }
+
+    .item {
+      @extend .item-card;
+      @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+
+      padding: 32px 30px;
+      text-align: center;
+
+      .logo {
+        display: inline-block;
+        height: 60px;
+        width: 60px;
+      }
+
+      header > .title {
+        font-size: 18px;
+        margin: 0;
+      }
+
+      .body {
+        font-size: 15px;
+      }
+
+      @media screen and (min-width: $bigscreen-breakpoint) {
+        box-sizing: border-box;
+        flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+      }
+    }
+  }
+}
+
+
+/* Project */
+
+body.site--project {
+  &.layout--home {
+    background: $main-background;
+  }
+
+  &.layout--home > main {
+    .item {
+      background: linear-gradient(120deg, white 20%, rgba(white, 0.9) 80%, rgba(white, 0.75) 100%);
+
+      display: flex;
+      flex-flow: column nowrap;
+      padding: 1em 1.5em;
+
+      .body {
+        flex: 1;
+      }
+
+      .title {
+        font-size: 24px;
+        font-weight: normal;
+        word-break: break-word;
+      }
+
+      .docs-nav {
+        flex-basis: 100%;
+        margin-bottom: 1em;
+        @include item-nav-toc();
+      }
+
+      .external-links {
+        @include item-external-links();
+        margin-left: -1.5em;
+        margin-right: -1.5em;
+
+        .nav-items {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap-reverse;
+
+          a {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    > .custom-intro {
+      .summary {
+        font-size: 20px;
+        color: #fefefe;
+
+        a {
+          @include static-link-color($accent-color);
+        }
+        .cta {
+          margin-top: 30px;
+          margin-bottom: 30px;
+          .button {
+            @include cta-button($primary-color, white);
+            border: 1px solid $accent-color;
+          }
+        }
+        p:first-child:first-letter {
+          color: $accent-color;
+          float: left;
+          font-size: 75px;
+          line-height: 60px;
+          padding-right: 8px;
+          margin-left: -5px;
+        }
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          p:first-child {
+            padding-right: 20vw;
+          }
+        }
+      }
+    }
+  }
+
+  &.site--project--one-software.layout--home > main {
+    // On single-software project sites, the only software item on landing
+    // is made part of the page rather than being constrained to a card widget.
+    // No own background means it’ll appear on landing page’s overall dark background.
+
+    .custom-intro {
+      .summary {
+        a {
+          @include static-link-color(white);
+        }
+      }
+    }
+
+    .item {
+      background: none;
+      padding: 0;
+
+      .docs-nav {
+        ul.nav-items > li {
+          > .item-title {
+            font-size: 24px;
+
+            a {
+              @include static-link-color(white);
+            }
+          }
+        }
+      }
+      .external-links {
+        @include item-external-links(true);
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.layout--home > main > .software,
+  &.layout--home > main > .specs,
+  &.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 {
+        flex: 1;
+        text-align: left;
+
+        header > .title {
+          margin: 0;
+        }
+        .body {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items .item {
+      display: block;
+    }
+  }
+
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items .item {
+      @extend .item-card;
+      @include hoverable-card(2px, 10px, rgba(desaturate($primary-color, 50), 0.08));
+
+      padding: 30px 32px;
+      flex: unset;
+    }
+  }
+
+  &.layout--home > main > .software {
+    > .items {
+      .item {
+        $logo-space: 64px;
+        $logo-side: 32px;
+
+        header {
+          display: flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          flex-shrink: 0;
+
+          .title {
+            flex: 1;
+          }
+          .logo-container {
+            width: $logo-space;
+            flex: 0;
+            padding: 4px ($logo-space - $logo-side) 4px 0;
+
+            .logo > :only-child {
+              width: $logo-side;
+              height: $logo-side;
+              vertical-align: middle;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.layout--software-index > main {
+    > .items {
+      .item {
+        $logo-space: 132px;
+        $logo-side: 48px;
+
+        .logo-container {
+          .logo > :only-child {
+            width: $logo-side;
+            height: $logo-side;
+          }
+        }
+
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          padding-left: $logo-space;
+
+          .logo-container {
+            float: left;
+            margin-left: -$logo-space;
+            padding: 8px calc(($logo-space - $logo-side) / 2);
+          }
+        }
+      }
+    }
+  }
+
+  &.layout--home > main > .software,
+  &.layout--home > main > .specs {
+    @extend .main-section;
+
+    > .title {
+      padding: .4em 1.5em;
+      background: rgba(white, 0.9);
+      font-size: 110%;
+      font-weight: normal;
+      align-self: flex-start;
+      color: lighten($main-font-color, 20);
+      margin-bottom: $gutter;
+
+      a {
+        @include static-link-color($primary-dark-color);
+      }
+    }
+
+    .items {
+      @extend .item-grid;
+      justify-content: center;
+
+      > .item {
+        @media screen and (min-width: $bigscreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols-narrow} - #{$gutter} );
+
+          // Hide third element (there’re at most 3)
+          &:nth-child(3) {
+            opacity: 0;
+            display: none;
+          }
+        }
+
+        @media screen and (min-width: $widescreen-breakpoint) {
+          box-sizing: border-box;
+          flex-basis: calc( 100%/#{$featured-cols} - #{$gutter} );
+
+          // Show third element
+          &:nth-child(3) {
+            opacity: 1;
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+
+  &.layout--software-index > main,
+  &.layout--spec-index > main {
+    > .items {
+      @extend .index-item-grid;
+    }
+  }
+
+  &.layout--spec > main > article {
+    @extend .main-article;
+  }
+  &.docs-page > main {
+    @include docs-page($primary-dark-color);
+  }
+}