shibori 1.0.0.beta1

data/source/css/scss/ecosystem/_cards.scss

@@ -0,0 +1,369 @@
+
+.cards {
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  display: -ms-flexbox;
+  -ms-flex-direction: row;
+  -ms-flex-wrap: wrap;
+
+  &:after {
+      content: "";
+      display: table;
+      clear: both;
+  }
+
+  .card {
+  	border: 1px solid #D8DDE6;
+  	border-radius: 2px;
+  	position: relative;
+  	transition: all 100ms ease-in-out;
+  	background: #fff;
+    transition: all 150ms ease-in-out;
+    color: $gray-darker;
+
+    display: flex;
+    flex-direction: column;
+
+    display: -ms-flexbox;
+    -ms-flex-direction: column;
+
+    h1, h2, h3, h4, h5, h6, p {
+      color: $gray-darker;
+    }
+
+    a {
+      color: $gray-darker;
+      text-decoration: none;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      display: -ms-flexbox;
+      -ms-flex-direction: column;
+      -ms-flex: auto 1;
+    }
+
+    .beta {
+      position: absolute;
+      top: $pad;
+      right: $pad;
+      color: $white;
+      font-size: 10px;
+      font-weight: bold;
+      padding: 2px 5px 1px;
+      text-transform: uppercase;
+      border-radius: 10%;
+      @include beta();
+    }
+
+    .btn {
+      position: relative;
+      z-index: 1000;
+    }
+
+    .before {
+      opacity: 0;
+      visibility: hidden;
+      transition: all 150ms ease-in-out;
+      position: absolute;
+      padding: 20px;
+      color: #fff;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba($purple, .95);
+      font-size: 14px;
+
+      li {
+        list-style-type: none;
+      }
+
+      .micro {
+        display: inline-block;
+        width: 100%;
+        font-size: 10px;
+        margin-top: 10px;
+        text-transform: uppercase;
+      }
+    }
+
+    &.cards-five-x {
+      @include media(min-width 1600px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(20% - 5px);
+        @include omega(5n);
+      }
+
+      @include media(min-width 1241px max-width 1599px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(25% - 3.75px);
+        @include omega(4n);
+      }
+
+      @include media(min-width 760px max-width 1240px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(33.333333333% - 3.333333333px);
+        @include omega(3n);
+      }
+
+      @include media(min-width 560px max-width 759px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(50% - 2.5px);
+        @include omega(2n);
+      }
+
+      @include media(max-width 559px) {
+        margin-bottom: 5px;
+        margin-right: 0px;
+        flex: 0 1 100%;
+        max-width: 100%;
+        @include omega;
+      }
+    }
+
+    &.cards-four-x {
+      @include media(min-width 1241px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(25% - 3.75px);
+        @include omega(4n);
+      }
+
+      @include media(min-width 760px max-width 1240px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(33.333333333% - 3.333333333px);
+        @include omega(3n);
+      }
+
+      @include media(min-width 560px max-width 759px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(50% - 2.5px);
+        @include omega(2n);
+      }
+
+      @include media(max-width 559px) {
+        margin-bottom: 5px;
+        margin-right: 0px;
+        flex: 0 1 100%;
+        @include omega;
+      }
+    }
+
+    &.cards-three-x {
+      @include media(min-width 1241px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(33.333333333% - 3.333333333px);
+        @include omega(3n);
+      }
+
+      @include media(min-width 560px max-width 759px) {
+        margin-bottom: 5px;
+        margin-right: 5px;
+        width: calc(50% - 2.5px);
+        @include omega(2n);
+      }
+
+      @include media(max-width 559px) {
+        margin-bottom: 5px;
+        margin-right: 0px;
+        flex: 0 1 100%;
+        max-width: 100%;
+        @include omega;
+      }
+    }
+
+    .brand {
+      padding: $pad-lg;
+
+      .brand-body {
+        font-size: 12px;
+        color: #4C4C4C;
+        margin-bottom: 0;
+      }
+
+      .brand-bar {
+        height: 1px;
+        margin: $pad-lg 0;
+
+        &.addons {
+          background:linear-gradient(to left, #F76B1C, #FAD961);
+        }
+
+        &.buttons {
+          background:linear-gradient(to left, #64438B, #C6ACE5);
+        }
+
+        &.buildpacks {
+          @include buildpacks();
+        }
+      }
+
+      .brand-title {
+        margin: $pad 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    &.addon {
+      text-align: center;
+
+      .brand-title {
+        text-align: center;
+      }
+
+      .brand-logo {
+        display: inline-block;
+        height: $brand-icon;
+        width: $brand-icon;
+        margin: 0 auto;
+
+        img {
+          border-radius: 2px;
+          max-height: 100%;
+          min-width: 100%;
+        }
+
+        .hk-icon {
+          color: $purple;
+          font-size: 24px;
+        }
+      }
+    }
+
+    &.button {
+    	.brand-author {
+        display: inline-block;
+        font-size: $font-sm;
+        margin-bottom: $pad;
+        min-height: $brand-icon-xs;
+
+        .brand-avatar {
+          max-height: $brand-icon-xs;
+          width: $brand-icon-xs;
+          margin-right: $pad-sm;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    &.buildpack {
+
+      .buildpack-author {
+        display: inline-block;
+        font-size: $font-sm;
+        margin-bottom: $pad;
+
+        .brand-avatar {
+          max-height: $brand-icon-xs;
+          width: $brand-icon-xs;
+          margin-right: $pad-sm;
+          vertical-align: middle;
+          border-radius: 50%;
+        }
+      }
+
+      .buildpack-official {
+        display: inline-block;
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        width: 24px;
+        height: 24px;
+        background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5jaGVjayBjb3B5PC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz4NCiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4NCiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGNkYzRjkiIG9mZnNldD0iMCUiPjwvc3RvcD4NCiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGM0YwRjciIG9mZnNldD0iMTAwJSI+PC9zdG9wPg0KICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTIiPg0KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0FCOEVDRCIgb2Zmc2V0PSIwJSI+PC9zdG9wPg0KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzc5NTg5RiIgb2Zmc2V0PSIxMDAlIj48L3N0b3A+DQogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgICAgIDxwYXRoIGQ9Ik0xNjcuNzkzNTM5LDguNDEyNDk2NyBDMTg3LjczOTc5OSwtMi44MDQxNjU1NyAyMTIuMjg1MTk3LC0yLjgwNDE2NTU3IDIzMi4yMzE0NTcsOC40MTI0OTY3IEwzNjcuODA2MDM2LDg0Ljc4MzMzNjMgQzM4Ny43MjczMDEsOTYuMDI0MzgyNiA0MDAsMTE2Ljc1MDgyNCA0MDAsMTM5LjIwODUzMiBMNDAwLDI5MS45NTAyMTIgQzQwMCwzMTQuMzgzNTM2IDM4Ny43MjczMDEsMzM1LjEzNDM2MSAzNjcuODA2MDM2LDM0Ni4zNzU0MDggTDIzMi4yMzE0NTcsNDIyLjcyMTg2MyBDMjEyLjI4NTE5Nyw0MzMuOTYyOTEgMTg3LjczOTc5OSw0MzMuOTYyOTEgMTY3Ljc5MzUzOSw0MjIuNzIxODYzIEwzMi4yMTg5NTg5LDM0Ni4zNzU0MDggQzEyLjI3MjY5ODksMzM1LjEzNDM2MSAwLDMxNC4zODM1MzYgMCwyOTEuOTUwMjEyIEwwLDEzOS4yMDg1MzIgQzAsMTE2Ljc1MDgyNCAxMi4yNzI2OTg5LDk2LjAyNDM4MjYgMzIuMjE4OTU4OSw4NC43ODMzMzYzIEwxNjcuNzkzNTM5LDguNDEyNDk2NyBaIiBpZD0icGF0aC0zIj48L3BhdGg+DQogICAgICAgIDxtYXNrIGlkPSJtYXNrLTQiIG1hc2tDb250ZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQzMS4xNTI2NDgiIGZpbGw9IndoaXRlIj4NCiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+DQogICAgICAgIDwvbWFzaz4NCiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC01Ij4NCiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBQzhFQ0UiIG9mZnNldD0iMCUiPjwvc3RvcD4NCiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM3OTU4OUYiIG9mZnNldD0iMTAwJSI+PC9zdG9wPg0KICAgICAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDwvZGVmcz4NCiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9ImNoZWNrLWNvcHkiPg0KICAgICAgICAgICAgPGcgaWQ9ImhleC1jaSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTYuMDAwMDAwLCA0MC4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8dXNlIGlkPSJUaWxlIiBzdHJva2U9InVybCgjbGluZWFyR3JhZGllbnQtMikiIG1hc2s9InVybCgjbWFzay00KSIgc3Ryb2tlLXdpZHRoPSI2MCIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE4Ny45OTQwNTYsMjgzLjU0NTQ4NyBDMTgxLjEzNjQ1MiwyODYuMjAyNzUxIDE3My4wNTczMTUsMjg0Ljc2MjQ4NCAxNjcuNTIxOTM1LDI3OS4yMjcxMDQgTDEyMy42MDgyMTMsMjM1LjMxMzM4MSBDMTE2LjEzNDUzMSwyMjcuODM5NyAxMTYuMTI3NjY0LDIxNS43MDkzMzggMTIzLjYwNTIwOCwyMDguMjMxNzk1IEMxMzEuMDg0Mzk2LDIwMC43NTI2MDYgMTQzLjIwNzU5MSwyMDAuNzU1NTk2IDE1MC42ODY3OTUsMjA4LjIzNDc5OSBMMTgyLjE3OTEwNCwyMzkuNzI3MTA5IEwyNjkuMjk1Mzc2LDE1Mi42MTA4MzcgQzI3Ni43NzQ1MywxNDUuMTMxNjgyIDI4OC44OTc2ODYsMTQ1LjEyODczMyAyOTYuMzc2ODc0LDE1Mi42MDc5MjEgQzMwMy44NTQ0MTgsMTYwLjA4NTQ2NCAzMDMuODUzMTM2LDE3Mi4yMTAyNCAyOTYuMzczOTU3LDE3OS42ODk0MTkgTDE5Ny43NTMwNjEsMjc4LjMxMDMxNSBDMTk0Ljk4MDUyMiwyODEuMDgyODU0IDE5MS41Njk4MDUsMjgyLjgyODAxMiAxODcuOTk0MDU2LDI4My41NDU0ODcgWiIgaWQ9Im1lbnUtY2kiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtNSkiPjwvcGF0aD4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
+        background-size: cover;
+      }
+    }
+
+  	&:hover {
+  		border: 1px solid #7B569F;
+  		cursor: pointer;
+  		box-shadow: 0 1px 4px rgba(#7B569F, .4);
+  		z-index: 50;
+      transition: all 150ms ease-in-out;
+  	}
+
+    .stats {
+      background: rgba(#F2F2F5, .5);
+      transition: all 150ms ease-in-out;
+      color: $gray-darker;
+      opacity: 1;
+      align-items: center;
+      justify-content: center;
+      padding: $pad*1.5 $pad;
+      vertical-align: middle;
+      margin-top: auto;
+
+      ul {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        display:flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-content: flex-start;
+        align-items: flex-start;
+      }
+
+      a {
+        color: $purple;
+        text-decoration: none;
+      }
+
+      li {
+        display: inline-block;
+        margin-right: $pad;
+        color: $gray-darker;
+        font-size: 12px;
+        vertical-align: middle;
+        line-height: 12px;
+
+        .hk-icon {
+          margin-right: 4px;
+          font-size: 12px;
+        }
+
+        &.element-type {
+          color: $purple;
+          text-align: right;
+
+          .hk-icon {
+            font-size: 14px;
+          }
+
+          &.buildpack {
+            color: #429321;
+          }
+        }
+
+        &.category {
+          color: $gray-dark;
+        }
+
+        &:last-child {
+          flex-grow: 1;
+          flex-shrink: 0;
+          margin-right: 0;
+
+          .hk-icon {
+            margin: 0;
+          }
+        }
+      }
+
+      .flex-auto {
+        flex: 1;
+      }
+    }
+  }
+}

data/source/css/scss/ecosystem/_elements-brand.scss

@@ -0,0 +1,32 @@
+.brand-details {
+  margin-bottom: $space;
+
+  .brand-logo {
+    width: $brand-icon;
+    height: $brand-icon;
+    margin-right: $pad;
+    float: left;
+    vertical-align: middle;
+
+    img {
+      width: 100%;
+      max-height: $brand-icon;
+    }
+  }
+
+  .brand-title {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+
+  .brand-intro {
+    color: $gray-dark;
+    margin-bottom: 0;
+  }
+}
+
+.division {
+  margin: $space 0;
+  height: 1px;
+  background:linear-gradient(to left, #eee, #ededed);
+}

data/source/css/scss/ecosystem/_elements.scss

@@ -0,0 +1,4 @@
+.elements {
+  width: 100%;
+  margin: 0 auto;
+}

data/source/css/scss/globals/_colors.scss

@@ -0,0 +1,189 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+//- Monochromatic
+$white: #fff;
+$off-white: #F9F9FB;
+
+$gray-lighter: #EEF1F6;
+$gray-light: #CFD7E6;
+$gray: #96A3B6;
+$gray-dark: #596981;
+$gray-darker: #3F3F44;
+
+$gray-border: #D8DDE6;
+$black: #111;
+
+//- Mains
+$purple: #79589F;
+$purple-light: lighten(#79589F, 20%);
+$blue: #408FEC;
+$green: #74C080;
+$orange: #FA9F47;
+$red: #D64242;
+
+//- Brand
+$brand-primary: $purple;
+$brand-primary-light: $purple-light;
+$brand-info: $blue;
+$brand-success: $green;
+$brand-warning: $orange;
+$brand-danger: $red;
+
+
+.swatch-white {
+  background: $white;
+}
+.swatch-off-white {
+  background: $off-white;
+}
+.swatch-gray-lighter {
+  background: $gray-lighter;
+}
+.swatch-gray-light {
+  background: $gray-light;
+}
+.swatch-gray {
+  background: $gray;
+}
+.swatch-gray-dark {
+  background: $gray-dark;
+}
+.swatch-gray-darker {
+  background: $gray-darker;
+}
+.swatch-black {
+  background: $black;
+}
+.swatch-brand-primary {
+  background: $brand-primary;
+}
+.swatch-brand-primary-light {
+  background: $brand-primary-light;
+}
+.swatch-brand-info {
+  background: $brand-info;
+}
+.swatch-brand-success {
+  background: $brand-success;
+}
+.swatch-brand-warning {
+  background: $brand-warning;
+}
+.swatch-brand-danger {
+  background: $brand-danger;
+}
+
+//- Utility
+$dim: fade-out($black, .5);
+$dimmer: fade-out($black, .2);
+$error: $brand-danger;
+$valid: $brand-success;
+$info: $brand-info;
+$warning: $brand-warning;
+
+$brand-facebook: #03539e;
+$brand-twitter: #35ccff;
+$brand-linkedin: #217bc1;
+
+$text-color: $gray-darker;
+$text-color-light: $gray-dark;
+$text-color-white: $white;
+$text-color-purple: $purple;
+
+//- Gradients
+
+$grad-purple: #58488a;
+$grad-purple-blue: #5d64d0;
+
+@mixin gradient-brand-primary() {
+  @include linear-gradient(to right bottom, #AB8ECD, $brand-primary, $fallback: $brand-primary);
+}
+
+@mixin gradient-gray-light() {
+  @include linear-gradient(to right bottom, #DAE0EC, $gray-light, $fallback: $gray-light);
+}
+
+@mixin gradient-gray() {
+  @include linear-gradient(to right bottom, #AFB9C7, $gray, $fallback: $gray);
+}
+
+@mixin gradient-gray-dark() {
+  @include linear-gradient(to right bottom, #828EA0, $gray-dark, $fallback: $gray-dark);
+}
+
+@mixin gradient-gray-darker() {
+  @include linear-gradient(to right bottom, #6E6E72, $gray-darker, $fallback: $gray-darker);
+}
+
+@mixin gradient-brand-info() {
+  @include linear-gradient(to right bottom, #A1CAF9, $brand-info, $fallback: $brand-info);
+}
+
+@mixin gradient-brand-success() {
+  @include linear-gradient(to right bottom, #ADE28F, $brand-success, $fallback: $brand-success);
+}
+
+@mixin gradient-brand-warning() {
+  @include linear-gradient(to right bottom, #FFD3A0, $brand-warning, $fallback: $brand-warning);
+}
+
+@mixin gradient-brand-danger() {
+  @include linear-gradient(to right bottom, #F37A65, $brand-danger, $fallback: $brand-danger);
+}
+
+.swatch-gradient-brand-primary {
+  @include gradient-brand-primary;
+}
+.swatch-gradient-gray-light {
+  @include gradient-gray-light;
+}
+.swatch-gradient-gray {
+  @include gradient-gray;
+}
+.swatch-gradient-gray-dark {
+  @include gradient-gray-dark;
+}
+.swatch-gradient-gray-darker {
+  @include gradient-gray-darker;
+}
+.swatch-gradient-brand-info {
+  @include gradient-brand-info;
+}
+.swatch-gradient-brand-success {
+  @include gradient-brand-success;
+}
+.swatch-gradient-brand-warning {
+  @include gradient-brand-warning;
+}
+.swatch-gradient-brand-danger {
+  @include gradient-brand-danger;
+}
+
+@mixin grad-purple() {
+  @include linear-gradient(to bottom, $grad-purple, $grad-purple-blue, $fallback: $grad-purple);
+}
+
+@mixin grad-purple-dark() {
+  @include linear-gradient(to bottom, #4A4090, #372E6C, $fallback: #4A4090);
+}
+
+@mixin grad-gray-light() {
+  @include linear-gradient(top, fade-out($gray-lighter, .5), $white 50%, $fallback: $white);
+}
+
+@mixin beta() {
+  @include linear-gradient(to right, saturate(#78B743, 10%), #78B743, $fallback: #78B743);
+}
+
+@mixin addons() {
+  @include linear-gradient(to right, saturate(#78B743, 10%), #78B743, $fallback: #78B743);
+}
+@mixin buttons() {
+  @include linear-gradient(to right, saturate(#78B743, 10%), #78B743, $fallback: #78B743);
+}
+
+@mixin buildpacks() {
+  @include linear-gradient(to right, #B4EC51, #429321, $fallback: #B4EC51);
+}

data/source/css/scss/globals/_mixins.scss

@@ -0,0 +1,45 @@
+// ==========================================================================
+// Mixins (not provided by Bourbon)
+// ==========================================================================
+
+@mixin horizontal-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(left, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: 100% $width;
+}
+
+@mixin vertical-line($position, $from: $white, $to: #ddd, $width: 2px, $inflection: 35%) {
+  @include background-image(linear-gradient(top, $from, $to 0% + $inflection, $to 100% - $inflection, $from));
+
+  background-position: $position center;
+  background-repeat: no-repeat;
+  background-size: $width 100%;
+}
+
+.pad-{
+  &top {
+    padding-top: $pad;
+  }
+  &bottom {
+    padding-bottom: $pad;
+  }
+  &top-bottom {
+    padding-top: $pad;
+    padding-bottom: $pad;
+  }
+}
+
+.space-{
+  &top {
+    padding-top: $space;
+  }
+  &bottom {
+    padding-bottom: $space;
+  }
+  &top-bottom {
+    padding-top: $space;
+    padding-bottom: $space;
+  }
+}