jekyll-theme-glueckkanja 1.0.2 → 1.1.0

data/_sass/unify/base/nonstandard-bg/_nonstandard-bg-v5.scss

@@ -0,0 +1,183 @@
+/*------------------------------------
+  Nonstandard Background v5
+------------------------------------*/
+
+[class*="u-ns-bg-v5"] {
+  position: relative;
+
+  .u-ns-bg-before {
+    position: absolute;
+    z-index: 2;
+  }
+
+  &.g-bg-primary {
+    svg {
+      polygon,
+      path {
+        fill: $g-color-primary;
+      }
+    }
+  }
+
+  &.g-bg-white {
+    svg {
+      polygon,
+      path {
+        fill: $g-color-white;
+      }
+    }
+  }
+
+  &.g-bg-gray-light-v2 {
+    svg {
+      polygon,
+      path {
+        fill: $g-color-gray-light-v2;
+      }
+    }
+  }
+
+  &.g-bg-black {
+    svg {
+      polygon,
+      path {
+        fill: $g-color-black;
+      }
+    }
+  }
+}
+
+.u-ns-bg-v5 {
+  &-top,
+  &-bottom {
+    .u-ns-bg-before {
+      width: 100%;
+    }
+
+    svg {
+      width: 100%;
+    }
+  }
+
+  &-left,
+  &-right {
+    .u-ns-bg-before {
+      height: 100%;
+    }
+
+    svg {
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+
+  &-top {
+    .u-ns-bg-before {
+      bottom: 100%;
+    }
+
+    svg {
+      vertical-align: bottom;
+    }
+  }
+
+  &-bottom {
+    .u-ns-bg-before {
+      top: 100%;
+    }
+
+    svg {
+      vertical-align: top;
+    }
+  }
+
+  &-left {
+    .u-ns-bg-before {
+      left: 100%;
+    }
+  }
+
+  &-right {
+    .u-ns-bg-before {
+      right: 100%;
+    }
+  }
+}
+
+@media (min-width: $g-md) {
+  .u-ns-bg-v5 {
+    &-top--md,
+    &-bottom--md,
+    &-left--md,
+    &-right--md {
+      .u-ns-bg-before {
+        top: auto;
+        bottom: auto;
+        left: auto;
+        right: auto;
+        width: auto;
+        height: auto;
+      }
+
+      svg {
+        width: auto;
+        height: auto;
+      }
+    }
+
+    &-top--md,
+    &-bottom--md {
+      .u-ns-bg-before {
+        width: 100%;
+      }
+
+      svg {
+        width: 100%;
+      }
+    }
+
+    &-left--md,
+    &-right--md {
+      .u-ns-bg-before {
+        height: 100%;
+      }
+
+      svg {
+        height: 100%;
+        vertical-align: middle;
+      }
+    }
+
+    &-top--md {
+      .u-ns-bg-before {
+        bottom: 100%;
+      }
+
+      svg {
+        vertical-align: bottom;
+      }
+    }
+
+    &-bottom--md {
+      .u-ns-bg-before {
+        top: 100%;
+      }
+
+      svg {
+        vertical-align: top;
+      }
+    }
+
+    &-left--md {
+      .u-ns-bg-before {
+        left: 100%;
+      }
+    }
+
+    &-right--md {
+      .u-ns-bg-before {
+        right: 100%;
+      }
+    }
+  }
+}

data/_sass/unify/base/nonstandard-bg/_nonstandard-bg-v6.scss

@@ -0,0 +1,518 @@
+/*------------------------------------
+  Nonstandard Background v6
+------------------------------------*/
+
+[class*="u-ns-bg-v6"] {
+  position: relative;
+
+  .u-ns-bg-before {
+    position: absolute;
+    z-index: 2;
+  }
+}
+
+.u-ns-bg-v6 {
+  &-top,
+  &-bottom,
+  &-left,
+  &-right {
+    .u-ns-bg-before {
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        width: 0;
+        height: 0;
+        border: {
+          style: solid;
+          color: transparent;
+        }
+      }
+
+      &::after {
+        position: absolute;
+      }
+    }
+  }
+
+  &-top,
+  &-bottom {
+    .u-ns-bg-before {
+      left: 20px;
+    }
+  }
+
+  &-left,
+  &-right {
+    .u-ns-bg-before {
+      top: 30px;
+    }
+  }
+
+  &-top {
+    .u-ns-bg-before {
+      top: -15px;
+
+      &::before {
+        border-width: 0 15px 15px 15px;
+      }
+
+      &::after {
+        bottom: 0;
+        left: 1px;
+        border-width: 0 14px 14px 14px;
+      }
+    }
+
+    &.g-brd-primary {
+      .u-ns-bg-before {
+        &::before {
+          border-bottom-color: $g-color-primary;
+        }
+
+        &::after {
+          border-bottom-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-gray-light-v2 {
+      .u-ns-bg-before {
+        &::before {
+          border-bottom-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-bottom-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-black {
+      .u-ns-bg-before {
+        &::before {
+          border-bottom-color: $g-color-black;
+        }
+
+        &::after {
+          border-bottom-color: $g-color-white;
+        }
+      }
+    }
+  }
+
+  &-bottom {
+    .u-ns-bg-before {
+      bottom: -15px;
+
+      &::before {
+        border-width: 15px 15px 0 15px;
+      }
+
+      &::after {
+        bottom: 1px;
+        left: 1px;
+        border-width: 14px 14px 0 14px;
+      }
+    }
+
+    &.g-brd-primary {
+      .u-ns-bg-before {
+        &::before {
+          border-top-color: $g-color-primary;
+        }
+
+        &::after {
+          border-top-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-gray-light-v2 {
+      .u-ns-bg-before {
+        &::before {
+          border-top-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-top-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-black {
+      .u-ns-bg-before {
+        &::before {
+          border-top-color: $g-color-black;
+        }
+
+        &::after {
+          border-top-color: $g-color-white;
+        }
+      }
+    }
+  }
+
+  &-left {
+    .u-ns-bg-before {
+      left: -15px;
+
+      &::before {
+        border-width: 15px 15px 15px 0;
+      }
+
+      &::after {
+        top: 1px;
+        right: 0;
+        border-width: 14px 14px 14px 0;
+      }
+    }
+
+    &.g-brd-primary {
+      .u-ns-bg-before {
+        &::before {
+          border-right-color: $g-color-primary;
+        }
+
+        &::after {
+          border-right-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-gray-light-v2 {
+      .u-ns-bg-before {
+        &::before {
+          border-right-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-right-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-black {
+      .u-ns-bg-before {
+        &::before {
+          border-right-color: $g-color-black;
+        }
+
+        &::after {
+          border-right-color: $g-color-white;
+        }
+      }
+    }
+  }
+
+  &-right {
+    .u-ns-bg-before {
+      right: -15px;
+
+      &::before {
+        border-width: 15px 0 15px 15px;
+      }
+
+      &::after {
+        top: 1px;
+        left: 0;
+        border-width: 14px 0 14px 14px;
+      }
+    }
+
+    &.g-brd-primary {
+      .u-ns-bg-before {
+        &::before {
+          border-left-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-left-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-gray-light-v2 {
+      .u-ns-bg-before {
+        &::before {
+          border-left-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-left-color: $g-color-white;
+        }
+      }
+    }
+
+    &.g-brd-black {
+      .u-ns-bg-before {
+        &::before {
+          border-left-color: $g-color-gray-light-v2;
+        }
+
+        &::after {
+          border-left-color: $g-color-white;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: $g-md) {
+  .u-ns-bg-v6 {
+    &-top--md,
+    &-bottom--md,
+    &-left--md,
+    &-right--md {
+      &.g-brd-primary,
+      &.g-brd-gray-light-v2,
+      &.g-brd-black {
+        .u-ns-bg-before {
+          &::before {
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: transparent;
+          }
+
+          &::after {
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: transparent;
+          }
+        }
+      }
+    }
+
+    &-top--md,
+    &-bottom--md {
+      .u-ns-bg-before {
+        left: 20px;
+      }
+    }
+
+    &-left--md,
+    &-right--md {
+      .u-ns-bg-before {
+        top: 30px;
+      }
+    }
+
+    &-top--md {
+      .u-ns-bg-before {
+        bottom: auto;
+        top: -15px;
+
+        &::before {
+          border-width: 0 15px 15px 15px;
+        }
+
+        &::after {
+          top: auto;
+          bottom: 0;
+          left: 1px;
+          border-width: 0 14px 14px 14px;
+        }
+      }
+
+      &.g-brd-primary {
+        .u-ns-bg-before {
+          &::before {
+            border-bottom-color: $g-color-primary;
+          }
+
+          &::after {
+            border-bottom-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-gray-light-v2 {
+        .u-ns-bg-before {
+          &::before {
+            border-bottom-color: $g-color-gray-light-v2;
+          }
+
+          &::after {
+            border-bottom-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-black {
+        .u-ns-bg-before {
+          &::before {
+            border-bottom-color: $g-color-black;
+          }
+
+          &::after {
+            border-bottom-color: $g-color-white;
+          }
+        }
+      }
+    }
+
+    &-bottom--md {
+      .u-ns-bg-before {
+        top: auto;
+        bottom: -15px;
+
+        &::before {
+          border-width: 15px 15px 0 15px;
+        }
+
+        &::after {
+          top: auto;
+          bottom: 1px;
+          left: 1px;
+          border-width: 14px 14px 0 14px;
+        }
+      }
+
+      &.g-brd-primary {
+        .u-ns-bg-before {
+          &::before {
+            border-top-color: $g-color-primary;
+          }
+
+          &::after {
+            border-top-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-gray-light-v2 {
+        .u-ns-bg-before {
+          &::before {
+            border-top-color: $g-color-gray-light-v2;
+          }
+
+          &::after {
+            border-top-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-black {
+        .u-ns-bg-before {
+          &::before {
+            border-top-color: $g-color-black;
+          }
+
+          &::after {
+            border-top-color: $g-color-white;
+          }
+        }
+      }
+    }
+
+    &-left--md {
+      .u-ns-bg-before {
+        left: -15px;
+        right: auto;
+
+        &::before {
+          border-width: 15px 15px 15px 0;
+        }
+
+        &::after {
+          top: 1px;
+          bottom: auto;
+          right: 0;
+          border-width: 14px 14px 14px 0;
+        }
+      }
+
+      &.g-brd-primary {
+        .u-ns-bg-before {
+          &::before {
+            border-right-color: $g-color-primary;
+          }
+
+          &::after {
+            border-right-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-gray-light-v2 {
+        .u-ns-bg-before {
+          &::before {
+            border-right-color: $g-color-gray-light-v2;
+          }
+
+          &::after {
+            border-right-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-black {
+        .u-ns-bg-before {
+          &::before {
+            border-right-color: $g-color-black;
+          }
+
+          &::after {
+            border-right-color: $g-color-white;
+          }
+        }
+      }
+    }
+
+    &-right--md {
+      .u-ns-bg-before {
+        left: auto;
+        right: -15px;
+
+        &::before {
+          border-width: 15px 0 15px 15px;
+        }
+
+        &::after {
+          top: 1px;
+          bottom: auto;
+          left: 0;
+          border-width: 14px 0 14px 14px;
+        }
+      }
+
+      &.g-brd-primary {
+        .u-ns-bg-before {
+          &::before {
+            border-left-color: $g-color-primary;
+          }
+
+          &::after {
+            border-left-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-gray-light-v2 {
+        .u-ns-bg-before {
+          &::before {
+            border-left-color: $g-color-gray-light-v2;
+          }
+
+          &::after {
+            border-left-color: $g-color-white;
+          }
+        }
+      }
+
+      &.g-brd-black {
+        .u-ns-bg-before {
+          &::before {
+            border-left-color: $g-color-black;
+          }
+
+          &::after {
+            border-left-color: $g-color-white;
+          }
+        }
+      }
+    }
+  }
+}