juicelang-theme 0.1.0

data/_sass/uikit/components/align.scss

@@ -0,0 +1,142 @@
+// Name:            Align
+// Description:     Utilities to align embedded content
+//
+// Component:       `uk-align-left-*`
+//                  `uk-align-right-*`
+//                  `uk-align-center`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$align-margin-horizontal:                        $global-gutter !default;
+$align-margin-vertical:                          $global-gutter !default;
+
+$align-margin-horizontal-l:                      $global-medium-gutter !default;
+
+
+/* ========================================================================
+   Component: Align
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+[class*='uk-align'] {
+    display: block;
+    margin-bottom: $align-margin-vertical;
+}
+
+* + [class*='uk-align'] { margin-top: $align-margin-vertical; }
+
+/*
+ * Center
+ */
+
+.uk-align-center {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/*
+ * Left/Right
+ */
+
+.uk-align-left {
+    margin-top: 0;
+    margin-right: $align-margin-horizontal;
+    float: left;
+}
+
+.uk-align-right {
+    margin-top: 0;
+    margin-left: $align-margin-horizontal;
+    float: right;
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-align-left\@s {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal;
+        float: left;
+    }
+
+    .uk-align-right\@s {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal;
+        float: right;
+    }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-align-left\@m {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal;
+        float: left;
+    }
+
+    .uk-align-right\@m {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal;
+        float: right;
+    }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-align-left\@l {
+        margin-top: 0;
+        float: left;
+    }
+
+    .uk-align-right\@l {
+        margin-top: 0;
+        float: right;
+    }
+
+    .uk-align-left,
+    .uk-align-left\@s,
+    .uk-align-left\@m,
+    .uk-align-left\@l { margin-right: $align-margin-horizontal-l; }
+
+    .uk-align-right,
+    .uk-align-right\@s,
+    .uk-align-right\@m,
+    .uk-align-right\@l { margin-left: $align-margin-horizontal-l; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-align-left\@xl {
+        margin-top: 0;
+        margin-right: $align-margin-horizontal-l;
+        float: left;
+    }
+
+    .uk-align-right\@xl {
+        margin-top: 0;
+        margin-left: $align-margin-horizontal-l;
+        float: right;
+    }
+
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-align-misc)) {@include hook-align-misc();}
+
+// @mixin hook-align-misc(){}

data/_sass/uikit/components/animation.scss

@@ -0,0 +1,283 @@
+// Name:            Animation
+// Description:     Utilities for keyframe animations
+//
+// Component:       `uk-animation-*`
+//
+// Modifiers:       `uk-animation-fade`
+//                  `uk-animation-scale-up`
+//                  `uk-animation-scale-down`
+//                  `uk-animation-slide-top-*`
+//                  `uk-animation-slide-bottom-*`
+//                  `uk-animation-slide-left-*`
+//                  `uk-animation-slide-right-*`
+//                  `uk-animation-kenburns`
+//                  `uk-animation-shake`
+//                  `uk-animation-stroke`
+//                  `uk-animation-reverse`
+//                  `uk-animation-fast`
+//
+// Sub-objects:     `uk-animation-toggle`
+//
+// States:          `uk-active`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$animation-duration:                             0.5s !default;
+$animation-fade-duration:                        0.8s !default;
+$animation-stroke-duration:                      2s !default;
+$animation-kenburns-duration:                    15s !default;
+$animation-fast-duration:                        0.1s !default;
+
+$animation-slide-small-translate:                10px !default;
+$animation-slide-medium-translate:               50px !default;
+
+
+/* ========================================================================
+   Component: Animation
+ ========================================================================== */
+
+[class*='uk-animation-'] { animation: $animation-duration ease-out both; }
+
+
+/* Animations
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+.uk-animation-fade {
+    animation-name: uk-fade;
+    animation-duration: $animation-fade-duration;
+    animation-timing-function: linear;
+}
+
+/*
+ * Scale
+ */
+
+.uk-animation-scale-up { animation-name: uk-fade, uk-scale-up; }
+.uk-animation-scale-down { animation-name: uk-fade, uk-scale-down; }
+
+/*
+ * Slide
+ */
+
+.uk-animation-slide-top { animation-name: uk-fade, uk-slide-top; }
+.uk-animation-slide-bottom { animation-name: uk-fade, uk-slide-bottom; }
+.uk-animation-slide-left { animation-name: uk-fade, uk-slide-left; }
+.uk-animation-slide-right { animation-name: uk-fade, uk-slide-right; }
+
+/*
+ * Slide Small
+ */
+
+.uk-animation-slide-top-small { animation-name: uk-fade, uk-slide-top-small; }
+.uk-animation-slide-bottom-small { animation-name: uk-fade, uk-slide-bottom-small; }
+.uk-animation-slide-left-small { animation-name: uk-fade, uk-slide-left-small; }
+.uk-animation-slide-right-small { animation-name: uk-fade, uk-slide-right-small; }
+
+/*
+ * Slide Medium
+ */
+
+.uk-animation-slide-top-medium { animation-name: uk-fade, uk-slide-top-medium; }
+.uk-animation-slide-bottom-medium { animation-name: uk-fade, uk-slide-bottom-medium; }
+.uk-animation-slide-left-medium { animation-name: uk-fade, uk-slide-left-medium; }
+.uk-animation-slide-right-medium { animation-name: uk-fade, uk-slide-right-medium; }
+
+/*
+ * Kenburns
+ */
+
+.uk-animation-kenburns {
+    animation-name: uk-kenburns;
+    animation-duration: $animation-kenburns-duration;
+}
+
+/*
+ * Shake
+ */
+
+.uk-animation-shake { animation-name: uk-shake; }
+
+/*
+ * SVG Stroke
+ * The `--uk-animation-stroke` custom property contains the longest path length.
+ * Set it manually or use `uk-svg="stroke-animation: true"` to set it automatically.
+ * All strokes are animated by the same pace and doesn't end simultaneously.
+ * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
+ */
+
+.uk-animation-stroke {
+    animation-name: uk-stroke;
+    animation-duration: $animation-stroke-duration;
+    stroke-dasharray: var(--uk-animation-stroke);
+}
+
+
+/* Direction modifier
+ ========================================================================== */
+
+.uk-animation-reverse {
+    animation-direction: reverse;
+    animation-timing-function: ease-in;
+}
+
+
+/* Duration modifier
+ ========================================================================== */
+
+.uk-animation-fast { animation-duration: $animation-fast-duration; }
+
+
+/* Toggle animation based on the State of the Parent Element
+ ========================================================================== */
+
+.uk-animation-toggle:not(:hover):not(:focus) [class*='uk-animation-'] { animation-name: none; }
+
+
+/* Keyframes used by animation classes
+ ========================================================================== */
+
+/*
+ * Fade
+ */
+
+@keyframes uk-fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/*
+ * Scale
+ */
+
+@keyframes uk-scale-up {
+    0% { transform: scale(0.9); }
+    100% { transform: scale(1); }
+}
+
+@keyframes uk-scale-down {
+    0% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+/*
+ * Slide
+ */
+
+@keyframes uk-slide-top {
+    0% { transform: translateY(-100%); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-bottom {
+    0% { transform: translateY(100%); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-left {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes uk-slide-right {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(0); }
+}
+
+/*
+ * Slide Small
+ */
+
+@keyframes uk-slide-top-small {
+    0% { transform: translateY(-$animation-slide-small-translate); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-bottom-small {
+    0% { transform: translateY($animation-slide-small-translate); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-left-small {
+    0% { transform: translateX(-$animation-slide-small-translate); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes uk-slide-right-small {
+    0% { transform: translateX($animation-slide-small-translate); }
+    100% { transform: translateX(0); }
+}
+
+/*
+ * Slide Medium
+ */
+
+@keyframes uk-slide-top-medium {
+    0% { transform: translateY(-$animation-slide-medium-translate); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-bottom-medium {
+    0% { transform: translateY($animation-slide-medium-translate); }
+    100% { transform: translateY(0); }
+}
+
+@keyframes uk-slide-left-medium {
+    0% { transform: translateX(-$animation-slide-medium-translate); }
+    100% { transform: translateX(0); }
+}
+
+@keyframes uk-slide-right-medium {
+    0% { transform: translateX($animation-slide-medium-translate); }
+    100% { transform: translateX(0); }
+}
+
+/*
+ * Kenburns
+ */
+
+@keyframes uk-kenburns {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.2); }
+}
+
+/*
+ * Shake
+ */
+
+@keyframes uk-shake {
+    0%, 100% { transform: translateX(0); }
+    10% { transform: translateX(-9px); }
+    20% { transform: translateX(8px); }
+    30% { transform: translateX(-7px); }
+    40% { transform: translateX(6px); }
+    50% { transform: translateX(-5px); }
+    60% { transform: translateX(4px); }
+    70% { transform: translateX(-3px); }
+    80% { transform: translateX(2px); }
+    90% { transform: translateX(-1px); }
+}
+
+/*
+ * Stroke
+ */
+
+ @keyframes uk-stroke {
+    0% { stroke-dashoffset: var(--uk-animation-stroke); }
+    100% { stroke-dashoffset: 0; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-animation-misc)) {@include hook-animation-misc();}
+
+// @mixin hook-animation-misc(){}

data/_sass/uikit/components/article.scss

@@ -0,0 +1,99 @@
+// Name:            Article
+// Description:     Component to create articles
+//
+// Component:       `uk-article`
+//
+// Sub-objects:     `uk-article-title`
+//                  `uk-article-meta`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$article-margin-top:                             $global-large-margin !default;
+
+$article-title-font-size-m:                      $global-2xlarge-font-size !default;
+$article-title-font-size:                        $article-title-font-size-m * 0.85 !default;
+$article-title-line-height:                      1.2 !default;
+
+$article-meta-font-size:                         $global-small-font-size !default;
+$article-meta-line-height:                       1.4 !default;
+$article-meta-color:                             $global-muted-color !default;
+
+
+/* ========================================================================
+   Component: Article
+ ========================================================================== */
+
+.uk-article {
+    display: flow-root;
+    @if(mixin-exists(hook-article)) {@include hook-article();}
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-article > :last-child { margin-bottom: 0; }
+
+
+/* Adjacent sibling
+ ========================================================================== */
+
+.uk-article + .uk-article {
+    margin-top: $article-margin-top;
+    @if(mixin-exists(hook-article-adjacent)) {@include hook-article-adjacent();}
+}
+
+
+/* Title
+ ========================================================================== */
+
+.uk-article-title {
+    font-size: $article-title-font-size;
+    line-height: $article-title-line-height;
+    @if(mixin-exists(hook-article-title)) {@include hook-article-title();}
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-article-title { font-size: $article-title-font-size-m; }
+
+}
+
+
+/* Meta
+ ========================================================================== */
+
+.uk-article-meta {
+    font-size: $article-meta-font-size;
+    line-height: $article-meta-line-height;
+    color: $article-meta-color;
+    @if(mixin-exists(hook-article-meta)) {@include hook-article-meta();}
+}
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-article-misc)) {@include hook-article-misc();}
+
+// @mixin hook-article(){}
+// @mixin hook-article-adjacent(){}
+// @mixin hook-article-title(){}
+// @mixin hook-article-meta(){}
+// @mixin hook-article-misc(){}
+
+
+// Inverse
+// ========================================================================
+
+$inverse-article-meta-color:                    $inverse-global-muted-color !default;
+
+
+
+// @mixin hook-inverse-article-title(){}
+// @mixin hook-inverse-article-meta(){}

data/_sass/uikit/components/background.scss

@@ -0,0 +1,148 @@
+// Name:            Background
+// Description:     Utilities for backgrounds
+//
+// Component:       `uk-background-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+$background-default-background:                  $global-background !default;
+$background-muted-background:                    $global-muted-background !default;
+$background-primary-background:                  $global-primary-background !default;
+$background-secondary-background:                $global-secondary-background !default;
+
+
+/* ========================================================================
+   Component: Background
+ ========================================================================== */
+
+
+/* Color
+ ========================================================================== */
+
+.uk-background-default { background-color: $background-default-background; }
+.uk-background-muted { background-color: $background-muted-background; }
+.uk-background-primary { background-color: $background-primary-background; }
+.uk-background-secondary { background-color: $background-secondary-background; }
+
+
+/* Size
+ ========================================================================== */
+
+.uk-background-cover,
+.uk-background-contain,
+.uk-background-width-1-1,
+.uk-background-height-1-1 {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.uk-background-cover { background-size: cover; }
+.uk-background-contain { background-size: contain; }
+.uk-background-width-1-1 { background-size: 100%; }
+.uk-background-height-1-1 { background-size: auto 100%; }
+
+
+/* Position
+ ========================================================================== */
+
+.uk-background-top-left { background-position: 0 0; }
+.uk-background-top-center { background-position: 50% 0; }
+.uk-background-top-right { background-position: 100% 0; }
+.uk-background-center-left { background-position: 0 50%; }
+.uk-background-center-center { background-position: 50% 50%; }
+.uk-background-center-right { background-position: 100% 50%; }
+.uk-background-bottom-left { background-position: 0 100%; }
+.uk-background-bottom-center { background-position: 50% 100%; }
+.uk-background-bottom-right { background-position: 100% 100%; }
+
+
+/* Repeat
+ ========================================================================== */
+
+.uk-background-norepeat { background-repeat: no-repeat; }
+
+
+/* Attachment
+ ========================================================================== */
+
+/*
+ * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
+ */
+
+.uk-background-fixed {
+    background-attachment: fixed;
+    /* 1 */
+    backface-visibility: hidden;
+}
+
+/*
+ * Exclude touch devices because `fixed` doesn't work on iOS and Android
+ */
+
+@media (pointer: coarse) {
+    .uk-background-fixed { background-attachment: scroll; }
+}
+
+
+/* Image
+ ========================================================================== */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-background-image\@s { background-image: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-background-image\@m { background-image: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-background-image\@l { background-image: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+
+    .uk-background-image\@xl {background-image: none !important; }
+
+}
+
+
+/* Blend modes
+ ========================================================================== */
+
+.uk-background-blend-multiply { background-blend-mode: multiply; }
+.uk-background-blend-screen { background-blend-mode: screen; }
+.uk-background-blend-overlay { background-blend-mode: overlay; }
+.uk-background-blend-darken { background-blend-mode: darken; }
+.uk-background-blend-lighten { background-blend-mode: lighten; }
+.uk-background-blend-color-dodge { background-blend-mode: color-dodge; }
+.uk-background-blend-color-burn { background-blend-mode: color-burn; }
+.uk-background-blend-hard-light { background-blend-mode: hard-light; }
+.uk-background-blend-soft-light { background-blend-mode: soft-light; }
+.uk-background-blend-difference { background-blend-mode: difference; }
+.uk-background-blend-exclusion { background-blend-mode: exclusion; }
+.uk-background-blend-hue { background-blend-mode: hue; }
+.uk-background-blend-saturation { background-blend-mode: saturation; }
+.uk-background-blend-color { background-blend-mode: color; }
+.uk-background-blend-luminosity { background-blend-mode: luminosity; }
+
+
+// Hooks
+// ========================================================================
+
+@if(mixin-exists(hook-background-misc)) {@include hook-background-misc();}
+
+// @mixin hook-background-misc(){}