@import url('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 “open-project-base”; @import “open-project-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 (($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);
}

}