jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/js/_js.scss

@@ -0,0 +1,265 @@
+/*------------------------------------
+  JS
+------------------------------------*/
+
+.js-carousel_single-item {
+  max-width: 100%;
+  position: relative;
+}
+
+.js-next,
+.js-prev,
+.js-thumb {
+  cursor: pointer;
+}
+
+.js-next,
+.js-prev {
+  z-index: 10;
+}
+
+.js-thumb {
+  img {
+    display: inline-block;
+  }
+}
+
+.js-carousel_single-item-thumbs5__thumbs {
+  .js-thumb {
+    opacity: .3;
+    transition: {
+      property: opacity;
+      duration: .2s;
+      timing-function: ease-in;
+    }
+    &.slick-center {
+      opacity: 1;
+    }
+  }
+}
+
+.js-carousel_single-item-thumbs5--v2__thumbs {
+  .js-thumb {
+    opacity: .4;
+    transition: {
+      property: opacity;
+      duration: .2s;
+      timing-function: ease-in;
+    }
+    &.slick-center {
+      opacity: 1;
+    }
+  }
+}
+
+.js-carousel_single-item-thumbs5--v3__thumbs {
+  .js-thumb {
+    opacity: .4;
+    transition: {
+      property: opacity;
+      duration: .2s;
+      timing-function: ease-in;
+    }
+    &.slick-center {
+      opacity: 1;
+    }
+  }
+}
+
+.u-pagi-control--v2 {
+  display: block;
+  width: 12px;
+  height: 12px;
+  margin: 0 3px;
+  border-radius: 50%;
+  background: {
+    color: $g-color-gray-light-v3;
+  }
+  opacity: .3;
+  cursor: pointer;
+}
+
+.u-pagi-control-red {
+  .slick-active & {
+    background: {
+      color: $g-color-red;
+    }
+  }
+}
+
+.u-pagi-control-grey {
+  .slick-active & {
+    opacity: 1;
+  }
+}
+
+.u-carousel--v3 {
+  .js-prev,
+  .js-next {
+    top: 50%;
+    opacity: 0;
+    transition: {
+      property: opacity;
+      duration: .2s;
+      timing-function: ease-in;
+    }
+  }
+
+  .g-height-40 {
+    &.js-prev,
+    &.js-next {
+      margin-top: -20px;
+      left: 50%;
+    }
+
+    &.js-prev {
+      margin-left: -99px;
+    }
+
+    &.js-next {
+      margin-left: 65px;
+    }
+  }
+
+  &:hover {
+    .js-prev,
+    .js-next {
+      opacity: 1;
+    }
+  }
+}
+
+.u-carousel--v4 {
+  margin-left: -15px;
+  margin-right: -15px;
+  .js-prev,
+  .js-next {
+    top: 50%;
+    opacity: 0;
+    transition: {
+      property: opacity;
+      duration: .4s;
+      timing-function: ease-in;
+    }
+  }
+
+  .g-height-40 {
+    &.js-prev,
+    &.js-next {
+      margin-top: -20px;
+      left: 50%;
+    }
+
+    &.js-prev {
+      margin-left: -160px;
+    }
+
+    &.js-next {
+      margin-left: 125px;
+    }
+  }
+
+  &:hover {
+    .js-prev,
+    .js-next {
+      opacity: 1;
+    }
+  }
+}
+
+/*--------------------------------------------------
+  Filter v1
+----------------------------------------------------*/
+.u-filter-v1 > li:not(:last-child) {
+  &::after {
+    content: "|";
+    @include px-to-rem(font-size, 10px);
+    line-height: 1em;
+    margin: 0 7px 0 14px;
+    position: relative;
+    top: -2px;
+    line-height: inherit;
+    display: inline-block;
+    vertical-align: middle;
+    color: $g-color-gray-light-v3;
+  }
+}
+
+.u-filter-v1 > li:hover,
+.u-filter-v1 [class*="active"] {
+  color: $g-color-primary;
+}
+
+/*--------------------------------------------------
+  Carousel v10
+----------------------------------------------------*/
+.u-carousel-v10 {
+  .slick-dots {
+    position: absolute;
+    bottom: 30px;
+    left: 0;
+    width: auto;
+    visibility: hidden;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    button {
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      color: transparent;
+      background: $g-color-gray-light-v2;
+      border: none;
+      outline: none;
+    }
+
+    .slick-active button {
+      background: $g-color-primary;
+    }
+  }
+}
+
+.u-carousel-v10-nav {
+  margin-top: -135px;
+
+  .js-slide {
+    position: relative;
+    cursor: pointer;
+    height: 100%;
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: rgba($g-color-black, .2);
+      transition: opacity 0.3s ease-in-out;
+    }
+    &.slick-current {
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+
+  .u-carousel-v10 .slick-dots {
+    visibility: visible;
+  }
+
+  .u-carousel-v10-nav {
+    display: none;
+  }
+
+}
+

data/_sass/unify/settings/_variables.scss

@@ -0,0 +1,236 @@
+//
+// Typography
+//
+
+// Font Families
+$g-font-primary: "Open Sans", Helvetica, Arial, sans-serif !default;
+$g-font-secondary: "Roboto Slab", Helvetica, Arial, sans-serif !default;
+$g-font-code: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$g-font-niconne: "Niconne", cursive !default;
+
+// Font Sizes
+$g-font-primary-size: 14px !default;
+
+
+
+//
+// Breakpoints
+//
+
+$g-2xs: 446px !default; // Double extra small devices (<=445px)
+// Extra small devices (portrait phones, <=575px)
+$g-sm: 576px !default; // Small devices (landscape phones, >=576 & <=767)
+$g-md: 768px !default; // Medium devices (tablets, >=768 & <=991)
+$g-lg: 992px !default; // Large devices (desktops, >=992 & <=1199)
+$g-xl: 1200px !default; // Extra large devices (large desktops, >=1200)
+// If you want to use "max-width" than var-1. For exmaple: @media (max-width: #{$g-lg}-1) {...}
+
+
+
+//
+// Colors
+//
+
+// Ruslan:
+// BG Colors
+// $g-bg-color-primary: #fff !default;
+// $g-bg-color-secondary: #fff !default;
+// tertiary, quaternary, quinary, senary, septenary, octonary, nonary
+
+// Primary Color
+$g-color-primary: #0061aa !default;
+$g-color-primary-dark-v1: darken($g-color-primary, 2%) !default;
+$g-color-primary-dark-v2: darken($g-color-primary, 5%) !default;
+$g-color-primary-dark-v3: darken($g-color-primary, 10%) !default;
+$g-color-primary-light-v1: rgba($g-color-primary, .2) !default;
+$g-color-primary-light-v2: rgba($g-color-primary, .8) !default; // R
+
+// Main Colors
+$g-color-main: #555 !default;
+// $g-color-main: #6f7885 !default;
+$g-bg-color-main: #fff !default;
+
+// Main Secondary
+$g-bg-color-secondary: #fafafa !default;
+
+// Color Black
+$g-color-black: #000;
+
+// Color White
+$g-color-white: #fff;
+
+// Color Gray
+$g-color-gray-light-v1: #bbb !default; // $g-color-gray-light-v3
+$g-color-gray-light-v2: #ccc !default; // $g-color-gray-light-v4
+$g-color-gray-light-v3: #ddd !default; // $g-color-gray-light-v6
+$g-color-gray-light-v4: #eee !default; // $g-color-gray-light-v7
+$g-color-gray-light-v5: #f7f7f7 !default; // $g-color-gray-light-v9
+
+$g-color-gray-dark-v1: #111 !default; // $g-color-gray-dark-v4:
+$g-color-gray-dark-v2: #333 !default; // $g-color-gray-dark-v2:
+$g-color-gray-dark-v3: #555 !default; // $g-color-gray-dark-v1:
+$g-color-gray-dark-v4: #777 !default; // $g-color-gray:
+$g-color-gray-dark-v5: #999 !default; // $g-color-gray-light-v1:
+
+
+//
+// Status Colors
+
+// Color Green
+$g-color-success:             #5cb85c !default;
+$g-color-success-dark-v1:     darken($g-color-success, 2%) !default;
+$g-color-success-dark-v2:     darken($g-color-success, 5%) !default;
+
+// Color Green
+$g-color-info:                #5bc0de !default;
+$g-color-info-dark-v1:        darken($g-color-info, 2%) !default;
+$g-color-info-dark-v2:        darken($g-color-info, 5%) !default;
+
+// Color Green
+$g-color-warning:             #f0ad4e !default;
+$g-color-warning-dark-v1:     darken($g-color-warning, 2%) !default;
+$g-color-warning-dark-v2:     darken($g-color-warning, 5%) !default;
+
+// Color Green
+$g-color-danger:              #d9534f !default;
+$g-color-danger-dark-v1:      darken($g-color-danger, 2%) !default;
+$g-color-danger-dark-v2:      darken($g-color-danger, 5%) !default;
+
+
+//
+// Complementary Colors
+
+// Color Green
+$g-color-green: #72c02c !default;
+
+// Color Blue
+$g-color-blue: #3398dc !default;
+$g-color-blue-dark-v1: darken($g-color-blue, 22%) !default;
+
+// Color Light Blue
+$g-color-lightblue: #edf2f8 !default;
+$g-color-lightblue-v1: #d6e2ee !default;
+
+// Color Dark Blue
+$g-color-darkblue: #009 !default;
+
+// Color Indigo
+$g-color-indigo: #4263a3 !default;
+
+// Color Red
+$g-color-red: #f00 !default;
+
+// Color Light Red
+$g-color-lightred: #e64b3b !default;
+
+// Color Dark Red
+$g-color-darkred: #a10f2b !default;
+
+// Color Purple
+$g-color-purple: #9a69cb !default;
+
+// Color Dark Purple
+$g-color-darkpurple: #6639b6 !default;
+$g-color-purple-dark-v1: darken($g-color-purple, 27%) !default;
+
+// Color Pink
+$g-color-pink: #e81c62 !default;
+$g-color-pink-dark-v1: darken($g-color-pink, 27%) !default;
+
+// Color Orange
+$g-color-orange: #e57d20 !default;
+
+// Color Deep Orange
+$g-color-deeporange: #fe541e !default;
+
+// Color Yellow
+$g-color-yellow: #ebc71d !default;
+
+// Color Aqua
+$g-color-aqua: #29d6e6 !default;
+$g-color-aqua-dark-v1: darken($g-color-aqua, 22%) !default;
+
+// Color Cyan
+$g-color-cyan: #00bed6 !default;
+
+// Color Teal
+$g-color-teal: #18ba9b !default;
+
+// Color Brown
+$g-color-brown: #9c8061 !default;
+
+// Color Blue Gray
+$g-color-bluegray: #585f69 !default;
+
+// Color Beige
+$g-color-beige: #e5e1de !default;
+
+
+//
+// Social Colors
+
+// Facebook Color
+$g-color-facebook: #3b5998 !default;
+$g-color-facebook-dark-v1: darken($g-color-facebook, 5%) !default;
+$g-color-facebook-dark-v2: darken($g-color-facebook, 10%) !default;
+$g-color-facebook-light-v1: lighten($g-color-facebook, 5%) !default;
+
+// Twitter Color
+$g-color-twitter: #00acee !default;
+$g-color-twitter-dark-v1: darken($g-color-twitter, 5%) !default;
+$g-color-twitter-dark-v2: darken($g-color-twitter, 10%) !default;
+$g-color-twitter-light-v1: lighten($g-color-twitter, 5%) !default;
+
+// Skype Color
+$g-color-skype: #00aff0 !default;
+$g-color-skype-dark-v1: darken($g-color-skype, 5%) !default;
+$g-color-skype-dark-v2: darken($g-color-skype, 10%) !default;
+$g-color-skype-light-v1: lighten($g-color-skype, 5%) !default;
+
+// Pinterest Color
+$g-color-pinterest: #c8232c !default;
+$g-color-pinterest-dark-v1: darken($g-color-pinterest, 5%) !default;
+$g-color-pinterest-dark-v2: darken($g-color-pinterest, 10%) !default;
+$g-color-pinterest-light-v1: lighten($g-color-pinterest, 5%) !default;
+
+// Vine Color
+$g-color-vine: #00bf8f !default;
+$g-color-vine-dark-v1: darken($g-color-vine, 5%) !default;
+$g-color-vine-dark-v2: darken($g-color-vine, 10%) !default;
+$g-color-vine-light-v1: lighten($g-color-vine, 5%) !default;
+
+// Youtube Color
+$g-color-youtube: #c4302b !default;
+$g-color-youtube-dark-v1: darken($g-color-youtube, 5%) !default;
+$g-color-youtube-dark-v2: darken($g-color-youtube, 10%) !default;
+$g-color-youtube-light-v1: lighten($g-color-youtube, 5%) !default;
+
+// Google Plus Color
+$g-color-google-plus: #dd4b39 !default;
+$g-color-google-plus-dark-v1: darken($g-color-google-plus, 5%) !default;
+$g-color-google-plus-dark-v2: darken($g-color-google-plus, 10%) !default;
+$g-color-google-plus-light-v1: lighten($g-color-google-plus, 5%) !default;
+
+// Dribbble Color
+$g-color-dribbble: #ea4c89 !default;
+$g-color-dribbble-dark-v1: darken($g-color-dribbble, 5%) !default;
+$g-color-dribbble-dark-v2: darken($g-color-dribbble, 10%) !default;
+$g-color-dribbble-light-v1: lighten($g-color-dribbble, 5%) !default;
+
+// VK Color
+$g-color-vk: #2b587a !default;
+$g-color-vk-dark-v1: darken($g-color-vk, 5%) !default;
+$g-color-vk-dark-v2: darken($g-color-vk, 10%) !default;
+$g-color-vk-light-v1: lighten($g-color-vk, 5%) !default;
+
+// Linkedin Color
+$g-color-linkedin: #0e76a8 !default;
+$g-color-linkedin-dark-v1: darken($g-color-linkedin, 5%) !default;
+$g-color-linkedin-dark-v2: darken($g-color-linkedin, 10%) !default;
+$g-color-linkedin-light-v1: lighten($g-color-linkedin, 5%) !default;
+
+// Instagram Color
+$g-color-instagram: #3f729b !default;
+$g-color-instagram-dark-v1: darken($g-color-instagram, 5%) !default;
+$g-color-instagram-dark-v2: darken($g-color-instagram, 10%) !default;
+$g-color-instagram-light-v1: lighten($g-color-instagram, 5%) !default;

data/_sass/unify/tools/_mixins.scss

@@ -0,0 +1,17 @@
+// Core Components
+@import "mixins/margin";
+@import "mixins/padding";
+@import "mixins/positions";
+@import "mixins/units";
+@import "mixins/gradients";
+
+// Block Components
+@import "mixins/button-types";
+@import "mixins/button-sizes";
+@import "mixins/button-hovers";
+@import "mixins/centered";
+@import "mixins/header-toggler-positioning";
+@import "mixins/zigzag";
+@import "mixins/navigation-dropdown-inline";
+
+// Misc

data/_sass/unify/tools/mixins/_button-hovers.scss

@@ -0,0 +1,37 @@
+//
+// Button Hovers v1, v2
+//
+
+// e.g. @include u-hover-btn-v1 (1, 1, $g-color-primary);
+@mixin u-button-flat-hover ($version, $type, $background) {
+  &.u-btn-hover-v#{$version}-#{$type} {
+    overflow: hidden;
+
+    &::after,
+    &:hover::after {
+      background-color: lighten($background, 5%);
+    }
+
+    &:hover {
+      background-color: $background;
+      overflow: hidden;
+    }
+  }
+}
+
+// e.g. @include u-hover-btn-v1 (1, 1, $g-color-primary);
+@mixin u-button-outline-hover ($version, $type, $background) {
+  &.u-btn-hover-v#{$version}-#{$type} {
+    overflow: hidden;
+
+    &::after,
+    &:hover::after {
+      background-color: lighten($background, 5%);
+    }
+
+    &:hover {
+      overflow: hidden;
+      background-color: transparent;
+    }
+  }
+}

data/_sass/unify/tools/mixins/_button-sizes.scss

@@ -0,0 +1,10 @@
+//
+// Button sizes
+//
+
+// e.g. @include u-button-size ($padding-y, $padding-x, $font-size);
+@mixin u-button-size ($padding-y, $padding-x, $font-size){
+  line-height: 1.4;
+  @include px-to-rem(padding, $padding-y $padding-x);
+  @include px-to-rem(font-size, $font-size);
+}

data/_sass/unify/tools/mixins/_button-types.scss

@@ -0,0 +1,96 @@
+//
+// Button Flat Type
+//
+
+// e.g. @include u-button-flat ($g-color-primary, $g-color-white, $g-color-black);
+@mixin u-button-flat ($color-bg-brd, $color-text, $color-text-hover) {
+  color: $color-text;
+  background-color: $color-bg-brd;
+
+  &:hover,
+  &.active {
+    border-color: lighten($color-bg-brd, 10%);
+    background-color: lighten($color-bg-brd, 10%);
+  }
+
+  &:hover,
+  &:focus,
+  &.active {
+    color: $color-text-hover;
+  }
+
+  // Test from Oleg
+  &.g-btn-hover-reset {
+    &:hover,
+    &.active {
+      background-color: $color-bg-brd;
+      border-color: $color-bg-brd;
+    }
+  }
+}
+
+
+
+//
+// Button Outline Type
+//
+
+// e.g. @include u-hover-btn-v1-1 ($g-color-primary, $g-color-white);
+@mixin u-button-outline ($color-bg-brd, $color-text, $color-text-hover) {
+  color: $color-text;
+  border-color: $color-bg-brd;
+  background-color: transparent;
+
+  &:focus,
+  &.active {
+    color: $color-text-hover;
+    background-color: $color-bg-brd;
+  }
+
+  &:hover {
+    color: $color-text-hover;
+    background-color: $color-bg-brd
+  }
+}
+
+
+
+//
+// Button Gradient Type
+//
+
+// e.g. @include u-button-gradient ($g-color-primary, $g-color-red);
+@mixin u-button-gradient ($btn-left, $btn-right){
+  color: $g-color-white;
+  background: linear-gradient(to right, $btn-left 0%, $btn-right 100%) !important;
+  border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
+  border-image-slice: 1;
+
+  &:hover,
+  &:focus,
+  &.active {
+    opacity: .9;
+    color: $g-color-white;
+  }
+}
+
+
+
+//
+// Button Gradient Outline Type
+//
+
+// e.g. @include u-button-outline-gradient ($g-color-primary, $g-color-red);
+@mixin u-button-outline-gradient ($btn-left, $btn-right){
+  color: $g-color-gray-dark-v3;
+  background: transparent;
+  border-image: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
+  border-image-slice: 1;
+
+  &:hover,
+  &:focus,
+  &.active {
+    background: linear-gradient(to right, $btn-left 0%, $btn-right 100%);
+    color: $g-color-white;
+  }
+}

data/_sass/unify/tools/mixins/_centered.scss

@@ -0,0 +1,23 @@
+//
+// Block Centered
+//
+
+@mixin block-centered($position: 0, $horizontal: true, $vertical: true) {
+  @if ($position == absolute) {
+    position: absolute !important
+  } @else {
+    position: relative
+  }
+  @if ($horizontal and $vertical) {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%);
+  } @else if ($horizontal) {
+    left: 50% !important;
+    transform: translateX(-50%);
+  } @else if ($vertical) {
+    top: 50% !important;
+    transform: translateY(-50%);
+  }
+  -webkit-backface-visibility: hidden; // Improvement for Chrome browser
+}