jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/_ribbons.scss

@@ -0,0 +1,393 @@
+/*------------------------------------
+  Ribbons
+------------------------------------*/
+%u-ribbon {
+  position: absolute;
+  font-size: .9rem;
+}
+
+.u-ribbon {
+  // Ribbon Position
+  &-center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  // Ribbon Size
+  &--sm {
+    font-size: .7rem;
+  }
+  &--lg {
+    font-size: 1.1rem;
+  }
+}
+
+/* Ribbon Style Type 1
+------------------------------------*/
+.u-ribbon-v1 {
+  @extend %u-ribbon;
+  display: inline-block;
+  padding: .35rem .7rem;
+
+  /* Ribbon Type 1 With icon */
+  &.u-ribbon-with-icon {
+    padding: .5rem .85rem;
+  }
+  & .u-ribbon-icon--left {
+    margin-right: .5rem;
+  }
+  & .u-ribbon-icon--right {
+    margin-left: .5rem;
+  }
+}
+
+/* Ribbon Style Type 2
+------------------------------------*/
+.u-ribbon-v2 {
+  @extend %u-ribbon;
+  display: inline-block;
+  padding: 1rem 1.1rem;
+
+  &.u-ribbon--sm {
+    padding: 1rem 1.2rem;
+  }
+  &.u-ribbon--lg {
+    padding: 1.2rem 1.1rem;
+  }
+}
+
+/* Bookmarked Ribbon
+------------------------------------*/
+.u-ribbon-bookmark::after {
+  content: "";
+  position: absolute;
+  bottom: -1.1rem;
+  left: 0;
+  width: 100%;
+  height: 0;
+  border-style: solid;
+  border-left-width: 1.5rem;
+  border-right-width: 1.5rem;
+  border-bottom: 1rem solid transparent !important;
+}
+.u-ribbon--lg.u-ribbon-bookmark::after {
+  border-right-width: 1.4rem;
+}
+
+/* Ribbon Colors
+------------------------------------*/
+.u-ribbon-bookmark {
+  &.g-bg-primary::after {
+    border-color: $g-color-primary;
+  }
+
+  &.g-bg-black::after {
+    border-color: $g-color-black;
+  }
+  &.g-bg-white::after {
+    border-color: $g-color-white;
+  }
+
+  &.g-bg-light-opacity::after {
+    border-color: rgba(255,255,255, .7);
+  }
+  &.g-bg-dark-opacity::after {
+    border-color: rgba(30,30,30, .7);
+  }
+
+  &.g-color-gray-light-v3::after {
+    border-color: $g-color-gray-light-v3;
+  }
+  &.g-color-gray-light-v4::after {
+    border-color: $g-color-gray-light-v4;
+  }
+  &.g-color-gray-dark-v5::after {
+    border-color: $g-color-gray-dark-v5;
+  }
+
+  &.g-bg-green::after {
+    border-color: $g-color-green;
+  }
+  &.g-bg-blue::after {
+    border-color: $g-color-blue;
+  }
+  &.g-bg-lightblue::after {
+    border-color: $g-color-lightblue;
+  }
+  &.g-bg-lightblue-v1::after {
+    border-color: $g-color-lightblue-v1;
+  }
+  &.g-bg-darkblue::after {
+    border-color: $g-color-darkblue;
+  }
+  &.g-bg-indigo::after {
+    border-color: $g-color-indigo;
+  }
+  &.g-bg-red::after {
+    border-color: $g-color-red;
+  }
+  &.g-bg-lightred::after {
+    border-color: $g-color-lightred;
+  }
+  &.g-bg-darkred::after {
+    border-color: $g-color-darkred;
+  }
+  &.g-bg-purple::after {
+    border-color: $g-color-purple;
+  }
+  &.g-bg-darkpurple::after {
+    border-color: $g-color-darkpurple;
+  }
+  &.g-bg-pink::after {
+    border-color: $g-color-pink;
+  }
+  &.g-bg-orange::after {
+    border-color: $g-color-darkred;
+  }
+  &.g-bg-deeporange::after {
+    border-color: $g-color-deeporange;
+  }
+  &.g-bg-yellow::after {
+    border-color: $g-color-darkred;
+  }
+  &.g-bg-aqua::after {
+    border-color: $g-color-aqua;
+  }
+  &.g-bg-cyan::after {
+    border-color: $g-color-cyan;
+  }
+  &.g-bg-teal::after {
+    border-color: $g-color-teal;
+  }
+  &.g-bg-brown::after {
+    border-color: $g-color-darkred;
+  }
+  &.g-bg-bluegray::after {
+    border-color: $g-color-bluegray;
+  }
+}
+
+/* Clipped-v1 Ribbon
+------------------------------------*/
+.u-ribbon-clip-v1::before,
+.u-ribbon-clip-v2::before {
+  content: "";
+  position: absolute;
+  @include px-to-rem(bottom, -10px);
+  border-style: solid;
+}
+.u-ribbon--left.u-ribbon-clip-v1::before,
+.u-ribbon--left.u-ribbon-clip-v2::before {
+  left: 0;
+  @include px-to-rem(border-width, 0 10px 10px 0);
+  border-right-color: $g-color-gray-dark-v5;
+}
+.u-ribbon--right.u-ribbon-clip-v1::before,
+.u-ribbon--right.u-ribbon-clip-v2::before {
+  right: 0;
+  @include px-to-rem(border-width, 0 0 10px 10px);
+  border-left-color: $g-color-gray-dark-v5;
+}
+
+/* Clipped-v2 Ribbon
+------------------------------------*/
+.u-ribbon-clip-v2 {
+  padding: .35rem 1.35rem;
+  transform: skewX(-10deg) translateZ(1px);
+}
+.u-ribbon-clip-v2.u-ribbon-with-icon {
+  padding: .5rem 1.35rem;
+}
+.u-ribbon-clip-v2__inner {
+  display: inline-block;
+  transform: skewX(10deg) translateZ(1px);
+}
+.u-ribbon-clip-v2::before {
+  transform: skewX(10deg);
+}
+.u-ribbon--left.u-ribbon-clip-v2::before {
+  @include px-to-rem(left, 1px);
+}
+.u-ribbon--right.u-ribbon-clip-v2::before {
+  @include px-to-rem(right, -1px);
+}
+
+/* Clipped-v3 Ribbon
+------------------------------------*/
+.u-ribbon-clip-v3 {
+  width: calc(100% + 20px);
+  text-align: center;
+}
+.u-ribbon-clip-v3::before,
+.u-ribbon-clip-v3::after {
+  content: "";
+  position: absolute;
+}
+.u-ribbon-clip-v3::before {
+  left: 0;
+  @include px-to-rem(bottom, -10px);
+  width: 0;
+  height: 0;
+  border-top: 10px solid $g-color-gray-dark-v5;
+  border-left: 10px solid transparent;
+}
+.u-ribbon-clip-v3::after {
+  right: 0;
+  @include px-to-rem(bottom, -10px);
+  width: 0;
+  height: 0;
+  border-top: 10px solid $g-color-gray-dark-v5;
+  border-right: 10px solid transparent;
+}
+
+/* Clipped-v4 Ribbon
+------------------------------------*/
+.u-ribbon-clip-v4 {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.u-ribbon-clip-v4::before,
+.u-ribbon-clip-v4::after {
+  content: "";
+  position: absolute;
+}
+.u-ribbon-clip-v4::before {
+  top: 0;
+  @include px-to-rem(width, 40px);
+  @include px-to-rem(height, 6px);
+  background: $g-color-gray-dark-v5;
+  @include px-to-rem(border-radius, 8px 8px 0 0);
+}
+.u-ribbon-clip-v4.u-ribbon--left::before {
+  @include px-to-rem(left, 100px);
+}
+.u-ribbon-clip-v4.u-ribbon--right::before {
+  @include px-to-rem(right, 100px);
+}
+.u-ribbon-clip-v4::after {
+  @include px-to-rem(top, 100px);
+  @include px-to-rem(width, 6px);
+  @include px-to-rem(height, 40px);
+  background: $g-color-gray-dark-v5;
+}
+.u-ribbon-clip-v4.u-ribbon--left::after {
+  left: 0;
+  @include px-to-rem(border-radius, 8px 0 0 8px);
+}
+.u-ribbon-clip-v4.u-ribbon--right::after {
+  right: 0;
+  @include px-to-rem(border-radius, 0 8px 8px 0);
+}
+.u-ribbon-clip-v4__inner {
+  position: absolute;
+  @include px-to-rem(top, 30px);
+  @include px-to-rem(width, 200px);
+  @include px-to-rem(height, 40px);
+  @include px-to-rem(line-height, 40px);
+  overflow: hidden;
+  transform: rotate(45deg);
+  text-align: center;
+  z-index: 2;
+
+  .u-ribbon--left & {
+    @include px-to-rem(left, -50px);
+    transform: rotate(-45deg);
+  }
+  .u-ribbon--right & {
+    @include px-to-rem(right, -50px);
+    transform: rotate(45deg);
+  }
+
+  &--bordered {
+    border: 1px dashed rgba(255,255,255, .7);
+  }
+
+  &.g-bg-primary {
+    box-shadow: 0 0 0 3px $g-color-primary, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+
+  &.g-bg-black {
+    box-shadow: 0 0 0 3px $g-color-black, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-white {
+    box-shadow: 0 0 0 3px $g-color-white, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-light-opacity {
+    box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-dark-opacity {
+    box-shadow: 0 0 0 3px rgba(30,30,30,.7), 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+
+  &.g-color-gray-light-v3 {
+    box-shadow: 0 0 0 3px $g-color-gray-light-v3, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-color-gray-light-v4 {
+    box-shadow: 0 0 0 3px $g-color-gray-light-v4, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-color-gray-dark-v5 {
+    box-shadow: 0 0 0 3px $g-color-gray-dark-v5, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+
+  &.g-bg-green {
+    box-shadow: 0 0 0 3px $g-color-green, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-blue {
+    box-shadow: 0 0 0 3px $g-color-blue, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-lightblue {
+    box-shadow: 0 0 0 3px $g-color-lightblue, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-lightblue-v1 {
+    box-shadow: 0 0 0 3px $g-color-lightblue-v1, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-darkblue {
+    box-shadow: 0 0 0 3px $g-color-darkblue, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-indigo {
+    box-shadow: 0 0 0 3px $g-color-indigo, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-red {
+    box-shadow: 0 0 0 3px $g-color-red, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-lightred {
+    box-shadow: 0 0 0 3px $g-color-lightred, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-darkred {
+    box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-purple {
+    box-shadow: 0 0 0 3px $g-color-purple, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-darkpurple {
+    box-shadow: 0 0 0 3px $g-color-darkpurple, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-pink {
+    box-shadow: 0 0 0 3px $g-color-pink, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-orange {
+    box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-deeporange {
+    box-shadow: 0 0 0 3px $g-color-deeporange, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-yellow {
+    box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-aqua {
+    box-shadow: 0 0 0 3px $g-color-aqua, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-cyan {
+    box-shadow: 0 0 0 3px $g-color-cyan, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-teal {
+    box-shadow: 0 0 0 3px $g-color-teal, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-brown {
+    box-shadow: 0 0 0 3px $g-color-darkred, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+  &.g-bg-bluegray {
+    box-shadow: 0 0 0 3px $g-color-bluegray, 0 21px 5px -18px rgba(0,0,0, .6);
+  }
+}

data/_sass/unify/base/_scroll-animations.scss

@@ -0,0 +1,14 @@
+/*------------------------------------
+  Animation on the scroll
+------------------------------------*/
+[data-animation]:not(.u-in-viewport) {
+  visibility: hidden;
+}
+
+[data-animation].js-carousel {
+  visibility: visible;
+}
+
+.u-in-viewport {
+  visibility: visible;
+}

data/_sass/unify/base/_stickers.scss

@@ -0,0 +1,18 @@
+/*------------------------------------
+  Stickers
+------------------------------------*/
+
+%u-sticker {
+  position: absolute;
+}
+
+/* Sticker Position
+------------------------------------*/
+.u-sticker {
+  @extend %u-sticker;
+
+  &-center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

data/_sass/unify/base/_sticky-blocks.scss

@@ -0,0 +1,7 @@
+/*------------------------------------
+  Sticky blocks
+------------------------------------*/
+
+[class*="sticky-block"] {
+  max-width: 100%;
+}

data/_sass/unify/base/_tables.scss

@@ -0,0 +1,78 @@
+/*------------------------------------
+  Tables
+------------------------------------*/
+
+[class*="text"][class*="center"] {
+  td,
+  th {
+    text-align: center;
+  }
+}
+
+.u-table {
+  &--v1 {
+    td,
+    th {
+      padding: 8px;
+    }
+
+    thead {
+      th {
+        border: {
+          bottom: {
+            width: 1px;
+          }
+        }
+      }
+    }
+  }
+
+  &--v2 {
+    td,
+    th {
+      padding: 15px;
+    }
+
+    thead {
+      th {
+        background: {
+          color: inherit;
+        }
+        border: {
+          bottom: {
+            width: 1px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.g-col {
+  &-border {
+    &-top-0 {
+      td,
+      th {
+        border: {
+          top: {
+            width: 0;
+          }
+        }
+      }
+    }
+
+    &-side-0 {
+      td,
+      th {
+        border: {
+          left: {
+            width: 0;
+          }
+          right: {
+            width: 0;
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/unify/base/_tags.scss

@@ -0,0 +1,18 @@
+/*------------------------------------
+  Tags
+------------------------------------*/
+/* Pagination v1 */
+.u-tags-v1 {
+  display: inline-block;
+  text-decoration: none;
+  transition: all .3s ease;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  &:focus {
+    color: inherit;
+  }
+}

data/_sass/unify/base/_text-animations.scss

@@ -0,0 +1,31 @@
+/*------------------------------------
+  Text Animation Slideshow
+------------------------------------*/
+.u-text-slideshow {
+	position: relative;
+
+	overflow: visible !important;
+	vertical-align: inherit;
+}
+
+.u-text-slideshow__slide {
+	position: relative;
+	z-index: 1;
+
+	display: inline-block;
+
+	opacity: 0;
+	transition: .3s ease;
+
+	&:not(:first-child) {
+		@include absolute(top 0 left 0);
+	}
+	&--current {
+		z-index: 2;
+		opacity: 1;
+	}
+
+	&-target{
+		flex-wrap: nowrap;
+	}
+}

data/_sass/unify/base/_text-shadows.scss

@@ -0,0 +1,62 @@
+/*------------------------------------
+  Text-shadow
+------------------------------------*/
+
+// Text shadow v1
+.u-txt-shadow-v1 {
+  text-shadow: 1px 1px rgba(67,70,72,.05),
+               2px 2px rgba(147,150,152,.07),
+               3px 3px rgba(178,182, 183,.086),
+               4px 4px rgba(195,199,200,.106),
+               5px 5px rgba(206,210,211,.125),
+               6px 6px rgba(213,217,218,.145),
+               7px 7px rgba(218,222,223,.165),
+               8px 8px rgba(222,226,227,.184),
+               9px 9px rgba(226,230,231,.204),
+               10px 10px rgba(228,232,233,.22),
+               11px 11px rgba(230,234,235,.24),
+               12px 12px rgba(232,236,237,.26),
+               13px 13px rgba(233,237,238,.28),
+               14px 14px rgba(235,239,240,.298),
+               15px 15px rgba(236,240,241,.318),
+               16px 16px rgba(237,241,242,.333),
+               17px 17px rgba(238,242,243,.353),
+               18px 18px rgba(238,242,243,.373),
+               19px 19px rgba(239,243,244,.392),
+               20px 20px rgba(240,244,245,.41),
+               21px 21px rgba(240,244,245,.43),
+               22px 22px rgba(241,245,246,.447),
+               23px 23px rgba(241,245,246,.467),
+               24px 24px rgba(242,246,247,.486),
+               25px 25px rgba(242,246,247,.506),
+               26px 26px rgba(242,246,247,.525),
+               27px 27px rgba(243,247,248,.545),
+               28px 28px rgba(243,247,248,.565),
+               29px 29px rgba(243,247,248,.58),
+               30px 30px rgba(244,248,249,.6),
+               31px 31px rgba(244,248,249,.62),
+               32px 32px rgba(244,248,249,.64),
+               33px 33px rgba(244,248,249,.66),
+               34px 34px rgba(245,249,250,.68),
+               35px 35px rgba(245,249,250,.694),
+               36px 36px rgba(245,249,250,.714),
+               37px 37px rgba(245,249,250,.733),
+               38px 38px rgba(245,249,250,.753),
+               39px 39px rgba(246,250,251,.773),
+               40px 40px rgba(246,250,251,.792),
+               41px 41px rgba(246,250,251,.81),
+               42px 42px rgba(246,250,251,.827),
+               43px 43px rgba(246,250,251,.847),
+               44px 44px rgba(246,250,251,.867),
+               45px 45px rgba(246,250,251,.886),
+               46px 46px rgba(246,250,251,.906),
+               47px 47px rgba(247,251,252,.925),
+               48px 48px rgba(247,251,252,.94),
+               49px 49px rgba(247,251,252,.96),
+               50px 50px rgba(247,251,252,.98)
+}
+
+// Text shadow v2
+.u-txt-shadow-v2 {
+  text-shadow: 0 6px 55px $g-color-gray-dark-v5;
+}