sparrow-theme 0.1.1 → 0.1.11

data/_sass/sparrow-theme/base/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin omega-reset($nth) {
+  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
+  &:nth-child(#{$nth}+1) { clear: none }
+}
+
+@mixin hyphenate {
+  @include hyphens(auto);
+  word-wrap: break-word;
+  -webkit-hyphenate-limit-before: 2;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-lines: 2;
+}
+
+@mixin placeholder($color) {
+  &::-webkit-input-placeholder { color: $color; }
+  &::-moz-placeholder { color: $color; }
+  &:-ms-input-placeholder { color: $color; }
+  &:-moz-placeholder { color: $color; }
+}

data/_sass/sparrow-theme/base/_variables.scss

@@ -0,0 +1,62 @@
+@import "neat-helpers";
+
+// Image assets
+$assets: "{{ site.baseurl }}/assets/img";
+
+// Grid Settings
+$disable-warnings: true;
+$border-box-sizing: true;
+$section-pad: 100px;
+$outer-pad: 20px;
+$header-height: 65px;
+$base-border-radius: 4px;
+$max-width: 1100px + $outer-pad * 2;
+
+// Breakpoints
+$desktop-hd: new-breakpoint(min-width 1140px 12);
+$desktop: new-breakpoint(min-width 900px 12);
+$tablet: new-breakpoint(max-width 900px 12);
+$mobile: new-breakpoint(max-width 700px 12);
+
+// Fonts
+$base-font-family: "adelle-sans", sans-serif;
+$serif-font-family: "adelle-sans", sans-serif;
+$base-font-size: 1em;
+$base-line-height: 1.6;
+$heading-line-height: 1.4;
+$base-spacing: $base-line-height * 1em;
+$small-spacing: $base-spacing / 2;
+
+// Colors
+$background-color: #F9F9F9;
+$background-color-grey: #f1f1f0;
+$base-border-color: #d9d9de;
+$base-border: 1px solid $base-border-color;
+
+$primary-color: #2E9FFF;
+$primary-color-light: lighten($primary-color, 20%);
+$primary-color-dark: darken($primary-color, 10%);
+
+$charcoal-grey: #232c39;
+$white: #ffffff;
+$black: #000000;
+
+$green: #2dd7aa;
+$purple: #8030e1;
+$orange: #ffbb24;
+$orange-red: #ff6f42;
+$red: #ef3e4d;
+$green-dark: darken($green, 10%);
+$purple-dark: darken($purple, 10%);
+$orange-dark: darken($orange, 10%);
+$orange-red-dark: darken($orange-red, 10%);
+$red-dark: darken($red, 10%);
+
+// Font colors
+$text-color: rgba($black, 0.6);
+$heading-color: rgba($black, 0.7);
+
+// Animation curves
+$CurveFastOutSlowIn: cubic-bezier(0.4, 0.0, 0.2, 1);
+$CurveLinearOutSlowIn: cubic-bezier(0.0, 0.0, 0.2, 1);
+$CurveFastOutLinearIn: cubic-bezier(0.4, 0.0, 1, 1);

data/_sass/sparrow-theme/layout/_404.scss

@@ -0,0 +1,49 @@
+.notFound {
+  height: 100vh;
+
+  &__wrapper {
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    height: 100vh;
+
+    &:before {
+      @include position(absolute, 0 0 0 0);
+      content: '';
+      background: linear-gradient(45deg, rgba(#a177ff, 0.5), rgba(#02CEFF, 0.5));
+    }
+  }
+
+  &__content {
+    text-align: center;
+    max-width: 500px;
+    position: relative;
+  }
+
+  &__title {
+    color: rgba($white, 0.95);
+    margin-bottom: 40px;
+
+    &:after {
+      content: '';
+      display: block;
+      margin: 40px auto 0;
+      border-top: 1px solid rgba($white, 0.3);
+      max-width: 160px;
+    }
+  }
+
+  &__description {
+    color: rgba($white, 0.8);
+  }
+
+  &__contextHeading {
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.025em;
+    color: rgba($white, 0.6);
+  }
+}

data/_sass/sparrow-theme/layout/_catalog.scss

@@ -0,0 +1,79 @@
+.catalog {
+  $catalog-bottom-padding: 300px;
+  @include outer-container;
+  @include pad($section-pad $outer-pad $catalog-bottom-padding);
+  display: flex;
+
+  @include media($mobile) {
+    @include pad($section-pad/2 $outer-pad $catalog-bottom-padding);
+  }
+
+  &__nav {
+    @include span-columns(3);
+
+    @include media($mobile) {
+      display: none;
+    }
+  }
+
+  &__items {
+    @include span-columns(9);
+    display: flex;
+    flex-direction: column;
+
+    &--centered {
+      @include shift(1.5);
+    }
+
+    @include media($mobile) {
+      @include span-columns(12);
+      @include shift(0);
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 0 20px;
+    min-height: 60px;
+
+    &--top {
+      padding-top: 0;
+    }
+  }
+
+  &__title {
+    font-size: 22px;
+    font-weight: normal;
+    color: $heading-color;
+    margin: 0;
+
+    @include media($mobile) {
+      font-size: 18px;
+    }
+  }
+
+  &__action {
+    margin: 0;
+  }
+
+  &__section {
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    &--fadeIn {
+      animation: fadeIn 0.4s $CurveFastOutSlowIn forwards;
+    }
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+}

data/_sass/sparrow-theme/layout/_component.scss

@@ -0,0 +1,289 @@
+.component {
+  @include outer-container;
+  @include pad($section-pad + 80 $outer-pad);
+  transition: transform 0.6s $CurveFastOutSlowIn, opacity 0.6s $CurveFastOutSlowIn;
+
+  @include media($mobile) {
+    @include pad($section-pad / 2 $outer-pad $section-pad);
+  }
+
+  &--previewOpen {
+    transform: translate3d(0, 60px, 0);
+    opacity: 0;
+  }
+
+  &__meta {
+    @include span-columns(4);
+
+    @include media($mobile) {
+      @include span-columns(12);
+    }
+  }
+
+  &__details {
+    @include span-columns(8);
+    padding-left: 20px;
+
+    @include media($mobile) {
+      @include span-columns(12);
+      padding-left: 0;
+    }
+  }
+
+  &__content {
+    h2 {
+      font-size: 24px;
+    }
+
+    h3 {
+      font-size: 20px;
+    }
+
+    h4 {
+      font-size: 18px;
+    }
+  }
+
+  &__metaCard {
+    margin-bottom: 30px;
+
+    &--mobile {
+      display: none;
+
+      @include media($mobile) {
+        display: block;
+        margin-top: 50px;
+      }
+    }
+
+    &--desktop {
+      display: block;
+
+      @include media($mobile) {
+        display: none;
+      }
+    }
+  }
+
+  &__metaCardHeading {
+    margin-bottom: 10px;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    color: rgba($black, 0.4);
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  &__metaCardContent {
+    background: $white;
+    border: $base-border;
+    border-radius: $base-border-radius;
+  }
+
+  &__metaCardThumbnail {
+    height: 220px;
+    border-bottom: $base-border;
+    display: flex;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: $base-border-radius $base-border-radius 0 0;
+    overflow: hidden;
+
+    @include media($mobile) {
+      border: 0;
+    }
+  }
+
+  &__metaCard--mobile &__metaCardThumbnail {
+    border-radius: $base-border-radius;
+  }
+
+  &__metaCardLinkList {
+    list-style-type: none;
+    margin: 0;
+    padding: 10px 0;
+  }
+
+  &__metaCardLinkItem {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__metaCardLink {
+    display: block;
+    color: $text-color;
+    padding: 10px 20px;
+    margin: 0;
+    border: 0;
+    font-size: 16px;
+
+    &:hover {
+      border: 0;
+    }
+  }
+
+  &__metaCardRelatedList {
+    list-style-type: none;
+    margin: 0;
+  }
+
+  &__metaCardRelatedItem {
+    margin: 0;
+    padding: 0;
+    border-bottom: $base-border;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+
+  &__metaCardRelatedLink {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: $heading-color;
+    padding: 10px;
+    margin: 0;
+    border: 0;
+    font-size: 16px;
+
+    &:hover {
+      border: 0;
+      color: $primary-color;
+    }
+  }
+
+  &__metaCardRelatedThumbnail {
+    width: 68px;
+    height: 46px;
+    border: $base-border;
+    border-radius: $base-border-radius;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin-right: 15px;
+  }
+
+  &__metaCardRelatedTitle {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__summaryHeader {
+    display: flex;
+    flex-direction: column;
+
+    @include media($mobile) {
+      align-items: center;
+    }
+  }
+
+  &__summaryAuthor {
+    border: 0;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    align-self: flex-start;
+
+    @include media($mobile) {
+      align-self: center;
+    }
+
+    &:hover {
+      border: 0;
+    }
+  }
+
+  &__summaryAuthorAvatar {
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  &__summaryAuthorName {
+    font-size: 16px;
+    color: $text-color;
+  }
+
+  &__summaryDetails {
+    display: flex;
+    margin-bottom: 30px;
+
+    @include media($mobile) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &__summaryTitle {
+    font-size: 32px;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include media($mobile) {
+      margin-bottom: 30px;
+    }
+  }
+
+  &__summaryActions {
+    margin-left: auto;
+    align-self: flex-end;
+    flex-shrink: 0;
+    display: flex;
+
+    @include media($mobile) {
+      margin-left: 0;
+      align-self: center;
+    }
+  }
+
+  &__summaryAction {
+    margin-right: 10px;
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &__tag {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 30px 0 20px;
+  }
+
+  &__tagItem {
+    $tagColor: #E7E7E7;
+    background: $tagColor;
+    font-size: 16px;
+    color: $text-color;
+    height: 40px;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $base-border-radius;
+    margin-right: 15px;
+    text-transform: capitalize;
+    line-height: 40px;
+    margin-bottom: 15px;
+    transition: all 0.2s ease;
+    border: 0;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border: 0;
+      color: $text-color;
+      background: darken($tagColor, 10%);
+    }
+  }
+}