jekyll-theme-glueckkanja 1.0.2 → 1.1.0

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

@@ -0,0 +1,122 @@
+//
+// Gradients X
+//
+
+// Gradients from left to right
+@mixin gradient-x-right($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+// Gradients from right to left
+@mixin gradient-x-left($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to left, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+
+
+//
+// Gradients Y
+//
+
+// Gradients from top to bottom
+@mixin gradient-y-bottom($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+// Gradients from bottom to top
+@mixin gradient-y-top($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+  background-image: linear-gradient(to top, $start-color $start-percent, $end-color $end-percent);
+  background-repeat: repeat-x;
+}
+
+
+
+//
+// Gradients directional
+//
+
+@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+  background-repeat: repeat-x;
+  background-image: linear-gradient($deg, $start-color, $end-color);
+}
+
+
+
+//
+// Gradients X three colors
+//
+
+@mixin gradient-x-three-colors($x-derection: right, $y-direction: null, $start-color: #00b3ee, $start-color-stop: 10%, $mid-color: #7a43b6, $mid-color-stop: 40%, $end-color: #c3325f, $end-color-stop: 90%) {
+  background-image: linear-gradient(to $x-derection $y-direction, $start-color $start-color-stop, $mid-color $mid-color-stop, $end-color $end-color-stop);
+  background-repeat: no-repeat;
+}
+
+
+
+//
+// Gradients Y three colors
+//
+
+@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+  background-image: linear-gradient(to bottom, $start-color, $mid-color $color-stop, $end-color);
+  background-repeat: no-repeat;
+}
+
+
+
+//
+// Gradients Striped
+//
+
+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
+
+
+
+//
+// Gradients Circle
+//
+
+@mixin gradient-radial-circle($inner-color: #555, $outer-color: #333, $pos-x: 50%, $pos-y: 50%, $gradient-size: farthest-corner) {
+  background-image: radial-gradient(circle $gradient-size at $pos-x $pos-y, $inner-color, $outer-color);
+  background-repeat: no-repeat;
+}
+
+
+
+//
+// Gradients Ellipse
+//
+
+@mixin gradient-radial-ellipse($inner-color: #555, $outer-color: #333, $pos-x: 50%, $pos-y: 50%, $gradient-size: farthest-corner) {
+  background-image: radial-gradient(ellipse $gradient-size at $pos-x $pos-y, $inner-color, $outer-color);
+  background-repeat: no-repeat;
+}
+
+
+
+//
+// Gradients Text
+//
+
+@mixin gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  text-fill-color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+
+
+//
+// Border Gradients
+//
+
+@mixin gradient-brd($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%, $deg: 45deg) {
+  border-image: linear-gradient($deg, $start-color $start-percent, $end-color $end-percent);
+  border-image-slice: 1;
+}

data/_sass/unify/tools/mixins/_header-toggler-positioning.scss

@@ -0,0 +1,75 @@
+//
+// Header Toggle Positionings
+//
+
+@mixin header-toggler-positioning($media-type: 0) {
+
+	$media-var: 0;
+	$media-type-mod: '';
+
+	@if $media-type == sm {
+		$media-var: $g-sm;
+		$media-type-mod: --sm;
+	}
+	@else if $media-type == md {
+		$media-var: $g-md;
+		$media-type-mod: --md;
+	}
+	@else if $media-type == lg {
+		$media-var: $g-lg;
+		$media-type-mod: --lg;
+	}
+	@else if $media-type == xl {
+		$media-var: $g-xl;
+		$media-type-mod: --xl;
+	}
+
+	@media all and (min-width: #{$media-var}) {
+
+		.u-header-toggler {
+
+			// Positioning
+
+			&--top-right#{$media-type-mod},
+			&--top-right#{$media-type-mod}.btn,
+			&--top-left#{$media-type-mod},
+			&--top-left#{$media-type-mod}.btn,
+			&--bottom-right#{$media-type-mod},
+			&--bottom-right#{$media-type-mod}.btn,
+			&--bottom-left#{$media-type-mod},
+			&--bottom-left#{$media-type-mod}.btn {
+				position: fixed;
+			}
+
+			// Axis y
+
+			&--top-right#{$media-type-mod},
+			&--top-right#{$media-type-mod}.btn,
+			&--top-left#{$media-type-mod},
+			&--top-left#{$media-type-mod}.btn {
+				@include px-to-rem(top, 20px);
+			}
+
+			&--bottom-right#{$media-type-mod},
+			&--bottom-right#{$media-type-mod}.btn,
+			&--bottom-left#{$media-type-mod},
+			&--bottom-left#{$media-type-mod}.btn {
+				@include px-to-rem(bottom, 20px);
+			}
+
+			// Axis x
+			&--top-left#{$media-type-mod},
+			&--bottom-left#{$media-type-mod} {
+				@include px-to-rem(left, 20px);
+			}
+
+			&--top-right#{$media-type-mod},
+			&--bottom-right#{$media-type-mod} {
+				@include px-to-rem(right, 20px);
+			}
+
+		}
+
+	}
+
+}

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

@@ -0,0 +1,170 @@
+//
+// Margins
+//
+
+@mixin margin-spaces($media-type) {
+
+  $media-value: 0;
+
+  @if $media-type == xs {
+    $media-value: 0;
+    $media-type: '';
+  } @else if $media-type == sm {
+    $media-value: $g-sm;
+    $media-type: --sm;
+  } @else if $media-type == md {
+    $media-value: $g-md;
+    $media-type: --md;
+  } @else if $media-type == lg {
+    $media-value: $g-lg;
+    $media-type: --lg;
+  }  @else { /* P */
+    $media-value: $g-xl;
+    $media-type: --xl;
+  }
+
+  @media (min-width: #{$media-value}) {
+    // Zeroing
+    .g-ma-0#{$media-type} {
+      margin: 0 !important;
+    }
+    .g-mx-0#{$media-type} {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+    .g-my-0#{$media-type} {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+    .g-ml-0#{$media-type} {
+      margin-left: 0 !important;
+    }
+    .g-mr-0#{$media-type} {
+      margin-right: 0 !important;
+    }
+    .g-mt-0#{$media-type} {
+      margin-top: 0 !important;
+    }
+    .g-mb-0#{$media-type} {
+      margin-bottom: 0 !important;
+    }
+
+    // Margin X
+    $i: 1;
+    @while $i < 11 {
+      .g-mx-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, $i*1px !important);
+        @include px-to-rem(margin-right, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 101 {
+      .g-mx-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, $i*1px !important);
+        @include px-to-rem(margin-right, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    // Margin Y
+    $i: 1;
+    @while $i < 11 {
+      .g-my-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, $i*1px !important);
+        @include px-to-rem(margin-bottom, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 101 {
+      .g-my-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, $i*1px !important);
+        @include px-to-rem(margin-bottom, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    // Margin Top
+    $i: 1;
+    @while $i < 21 {
+      .g-mt-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, $i*1px !important);
+      }
+      .g-mt-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, -($i*1px) !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 171 {
+      .g-mt-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, $i*1px !important);
+      }
+      .g-mt-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-top, -($i*1px) !important);
+      }
+      $i: $i + 5;
+    }
+
+    // Margin Bottom
+    $i: 1;
+    @while $i < 21 {
+      .g-mb-#{$i}#{$media-type} {
+        @include px-to-rem(margin-bottom, $i*1px !important);
+      }
+      .g-mb-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-bottom, -($i*1px) !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 171 {
+      .g-mb-#{$i}#{$media-type} {
+        @include px-to-rem(margin-bottom, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    // Margin Left
+    $i: 1;
+    @while $i < 11 {
+      .g-ml-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, $i*1px !important);
+      }
+      .g-ml-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, -($i*1px) !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 5;
+    @while $i < 51 {
+      .g-ml-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, $i*1px !important);
+      }
+      .g-ml-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-left, -($i*1px) !important);
+      }
+      $i: $i + 5;
+    }
+
+    // Margin Right
+    $i: 1;
+    @while $i < 11 {
+      .g-mr-#{$i}#{$media-type} {
+        @include px-to-rem(margin-right, $i*1px !important);
+      }
+      .g-mr-minus-#{$i}#{$media-type} {
+        @include px-to-rem(margin-right, -($i*1px) !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 5;
+    @while $i < 51 {
+      .g-mr-#{$i}#{$media-type} {
+        @include px-to-rem(margin-right, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+  }
+}

data/_sass/unify/tools/mixins/_navigation-dropdown-inline.scss

@@ -0,0 +1,67 @@
+//
+// Navigation Dropdown Style Inline
+//
+
+@mixin nav-dropdown-inline($media-type) {
+  @if $media-type == xs {
+    $media-type: '';
+  } @else if $media-type == sm {
+    $media-type: --sm;
+  } @else if $media-type == md {
+    $media-type: --md;
+  } @else if $media-type == lg {
+    $media-type: --lg;
+  }  @else {
+    $media-type: --xl;
+  }
+
+  .u-navbar {
+    &--inline-submenu#{$media-type} {
+      .dropdown-menu {
+        white-space: nowrap;
+        top: 98%;
+        left: 50%;
+        border-radius: 0;
+        overflow: visible !important;
+        border-left: none;
+        border-right: none;
+        transform: translate3d(-50%, 0, 0);
+
+        &::after,
+        &::before {
+          content: "";
+          position: absolute;
+          top: -1px;
+          bottom: 0;
+          width: 2000%;
+          border-top: inherit;
+          border-bottom: inherit;
+          background-color: inherit;
+        }
+
+        &::after {
+          left: 100%;
+        }
+        &::before {
+          right: 100%;
+        }
+        & > li {
+          display: inline-block;
+        }
+      }
+    }
+    &--inline-submenu#{$media-type}.u-navbar--overflow {
+      .dropdown,
+      .container {
+        position: static;
+      }
+
+      .dropdown-menu {
+        white-space: normal;
+        left: 0;
+        transform: translate3d(0, 0, 0);
+        margin-top: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,178 @@
+//
+// Paddings
+//
+
+@mixin padding-spaces($media-type) {
+
+  $media-value: 0;
+
+  @if $media-type == xs {
+    $media-value: 0;
+    $media-type: '';
+  } @else if $media-type == sm {
+    $media-value: $g-sm;
+    $media-type: --sm;
+  } @else if $media-type == md { /* P */
+    $media-value: $g-md;
+    $media-type: --md;
+  } @else if $media-type == lg { /* P */
+    $media-value: $g-lg;
+    $media-type: --lg;
+  } @else {
+    $media-value: $g-xl;
+    $media-type: --xl;
+  }
+
+  @media (min-width: #{$media-value}) {
+    // Zeroing
+    .g-pa-0#{$media-type} {
+      padding: 0 !important;
+    }
+    .g-px-0#{$media-type} {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+    .g-py-0#{$media-type} {
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    }
+    .g-pl-0#{$media-type} {
+      padding-left: 0 !important;
+    }
+    .g-pr-0#{$media-type} {
+      padding-right: 0 !important;
+    }
+    .g-pt-0#{$media-type} {
+      padding-top: 0 !important;
+    }
+    .g-pb-0#{$media-type} {
+      padding-bottom: 0 !important;
+    }
+
+    /* Padding Around */
+    .g-pa-2#{$media-type} {
+      @include px-to-rem(padding, 2px !important);
+    }
+    .g-pa-3#{$media-type} {
+      @include px-to-rem(padding, 3px !important);
+    }
+    .g-pa-5#{$media-type} {
+      @include px-to-rem(padding, 5px !important);
+    }
+    .g-pa-7#{$media-type} {
+      @include px-to-rem(padding, 7px !important);
+    }
+
+    $i: 10;
+    @while $i < 151 {
+      .g-pa-#{$i}#{$media-type} {
+        @include px-to-rem(padding, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding X */
+    $i: 1;
+    @while $i < 16 {
+      .g-px-#{$i}#{$media-type} {
+        @include px-to-rem(padding-left, $i*1px !important);
+        @include px-to-rem(padding-right, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 151 {
+      .g-px-#{$i}#{$media-type} {
+        @include px-to-rem(padding-left, $i*1px !important);
+        @include px-to-rem(padding-right, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding Y */
+    $i: 1;
+    @while $i < 20 {
+      .g-py-#{$i}#{$media-type} {
+        @include px-to-rem(padding-top, $i*1px !important);
+        @include px-to-rem(padding-bottom, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+    $i: 10;
+    @while $i < 211 { /* P */
+      .g-py-#{$i}#{$media-type} {
+        @include px-to-rem(padding-top, $i*1px !important);
+        @include px-to-rem(padding-bottom, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding Top */
+    $i: 0;
+    @while $i < 10 {
+      .g-pt-#{$i}#{$media-type} {
+        @include px-to-rem(padding-top, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+
+    $i: 10;
+    @while $i < 151 {
+      .g-pt-#{$i}#{$media-type} {
+        @include px-to-rem(padding-top, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding Right */
+    $i: 0;
+    @while $i < 10 {
+      .g-pr-#{$i}#{$media-type} {
+        @include px-to-rem(padding-right, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+
+    $i: 10;
+    @while $i < 171 { /* P */
+      .g-pr-#{$i}#{$media-type} {
+        @include px-to-rem(padding-right, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding Bottom */
+    $i: 0;
+    @while $i < 10 {
+      .g-pb-#{$i}#{$media-type} {
+        @include px-to-rem(padding-bottom, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+
+    $i: 10;
+    @while $i < 151 {
+      .g-pb-#{$i}#{$media-type} {
+        @include px-to-rem(padding-bottom, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+
+    /* Padding Left */
+    $i: 0;
+    @while $i < 10 {
+      .g-pl-#{$i}#{$media-type} {
+        @include px-to-rem(padding-left, $i*1px !important);
+      }
+      $i: $i + 1;
+    }
+
+    $i: 10;
+    @while $i < 171 { /* P */
+      .g-pl-#{$i}#{$media-type} {
+        @include px-to-rem(padding-left, $i*1px !important);
+      }
+      $i: $i + 5;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+//
+// Positions
+//
+
+@mixin position($position, $args: ()) {
+  $offsets: top right bottom left;
+  position: $position;
+
+  @each $offset in $offsets {
+    $index: index($args, $offset);
+
+    @if $index {
+      @if $index == length($args) {
+        #{$offset}: 0;
+      }
+      @else {
+        $next: nth($args, $index + 1);
+        @if is-valid-length($next) {
+          @include px-to-rem(#{$offset}, $next);
+        }
+        @else if index($offsets, $next) {
+          #{$offset}: 0;
+        }
+        @else {
+          @warn "Invalid value '#{$next}'' for offset '#{$offset}'.";
+        }
+      }
+    }
+  }
+}
+@function is-valid-length($value) {
+  @return (type-of($value) == "number" and not unitless($value))
+    or (index(auto initial inherit 0, $value) != false);
+}
+@mixin absolute($args: ()) {
+  @include position(absolute, $args);
+}
+@mixin fixed($args: ()) {
+  @include position(fixed, $args);
+}
+@mixin relative($args: ()) {
+  @include position(relative, $args);
+}

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

@@ -0,0 +1,27 @@
+//
+// Convert px to rem
+//
+
+// Function for converting a px based font-size to rem.
+@function parseInt($n) {
+  @if ($n == !important) {
+    @return !important
+  } @else {
+    $rem-size: $n / 14px;
+    @return #{$rem-size}rem;
+  }
+}
+
+// e.g. @include px-to-rem(padding, 8px 20px);
+@mixin px-to-rem($property, $values) {
+  $rem: ();
+  @each $value in $values {
+    @if index((0, 0px), $value) or $value == auto {
+      $rem: append($rem, $value);
+    }
+    @else {
+      $rem: append($rem, parseInt($value));
+    }
+  }
+  #{$property}: $rem;
+}

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

@@ -0,0 +1,35 @@
+//
+// Zigzag
+//
+
+@mixin zigzag($zigzag-class-name, $zigzag-pseudo-el, $zigzag-bg-color, $zigzag-position, $zigzag-size) {
+  .#{$zigzag-class-name} {
+    position: relative;
+    background: $zigzag-bg-color;
+    z-index: 1;
+
+    &::#{$zigzag-pseudo-el} {
+      content: "";
+      position: absolute;
+      @if ($zigzag-position == top) {
+        bottom: 100%;
+      } @else {
+        top: 100%;
+      }
+      left: 0;
+      right: 0;
+      display: block;
+      height: $zigzag-size;
+      @if ($zigzag-position == top) {
+        background: -webkit-linear-gradient(-225deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2, -webkit-linear-gradient(-315deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2;
+      } @else {
+        background: -webkit-linear-gradient(225deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2, -webkit-linear-gradient(315deg, $zigzag-bg-color $zigzag-size/2, transparent 0) 0 $zigzag-size/2;
+      }
+      background: {
+        position: top left;
+        repear: repeat-x;
+        size: $zigzag-size $zigzag-size;
+      }
+    }
+  }
+}