jekyll-theme-ethereal 0.4.4 → 0.5.4

data/_sass/main/components/_gallery.scss

@@ -0,0 +1,168 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Gallery */
+
+$pad: _size(pad);
+$pad-small-tb: _size(pad-small-tb);
+$pad-small-lr: _size(pad-small-lr);
+
+@include keyframes('gallery-modal-spinner') {
+    0% {
+        @include vendor('transform', 'rotate(0deg)');
+    }
+
+    100% {
+        @include vendor('transform', 'rotate(360deg)');
+    }
+}
+
+.gallery {
+    @include vendor('align-items', 'stretch');
+    @include vendor('display', 'flex');
+    height: 100%;
+
+    > * {
+        width: 20rem;
+        height: 100%;
+    }
+
+    .image {
+        display: block;
+        position: relative;
+        border-bottom: 0;
+        overflow: hidden;
+
+        img {
+            @include vendor('transition', 'transform #{_duration(transition)} ease-in-out');
+        }
+
+        &:after {
+            @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+        }
+
+        &:hover {
+            img {
+                @include vendor('transform', 'scale(1.025)');
+            }
+
+            &:after {
+                opacity: 0;
+            }
+        }
+    }
+
+    .group {
+        @include vendor('display', 'flex');
+        @include vendor('flex-wrap', 'wrap');
+
+        > * {
+            height: 50%;
+        }
+    }
+}
+
+
+.modal {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'center');
+    @include vendor('pointer-events', 'none');
+    @include vendor('user-select', 'none');
+    @include vendor('transition', (
+        'opacity #{_duration(gallery-lightbox-fadein)} ease',
+        'visibility #{_duration(gallery-lightbox-fadein)}',
+        'z-index #{_duration(gallery-lightbox-fadein)}'
+    ));
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
+    opacity: 0;
+    outline: 0;
+    visibility: none;
+    z-index: 0;
+
+    &:before {
+        @include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
+        @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
+        @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 4rem;
+        height: 4rem;
+        margin: -2rem 0 0 -2rem;
+        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 4rem;
+        opacity: 0;
+    }
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 4rem;
+        height: 4rem;
+        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 3rem;
+        cursor: pointer;
+    }
+
+    .inner {
+        @include vendor('transform', 'translateY(0.75rem)');
+        @include vendor('transition', (
+            'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
+            'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease'
+        ));
+        opacity: 0;
+
+        img {
+            display: block;
+            max-width: 90vw;
+            max-height: 85vh;
+            box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
+        }
+    }
+
+    &.visible {
+        @include vendor('pointer-events', 'auto');
+        opacity: 1;
+        visibility: visible;
+        z-index: _misc(z-index-base) + 1000;
+
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    &.loaded {
+        .inner {
+            @include vendor('transform', 'translateY(0)');
+            @include vendor('transition', (
+                'opacity #{_duration(gallery-lightbox-fadein)} ease',
+                'transform #{_duration(gallery-lightbox-fadein)} ease'
+            ));
+            opacity: 1;
+        }
+
+        &:before {
+            @include vendor('transition-delay', '0s');
+            opacity: 0;
+        }
+    }
+}

data/_sass/main/components/_grid-icons.scss

@@ -0,0 +1,139 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Grid Icons */
+
+ul.grid-icons {
+    @include vendor('display', 'flex');
+    @include vendor('flex-wrap', 'wrap');
+    @include vendor('justify-content', 'center');
+    list-style: none;
+    margin: 0 0 _size(element-margin) 0;
+    padding-left: 0;
+
+    .icon {
+        display: block;
+        position: relative;
+        width: 100%;
+        text-align: center;
+
+        &:before {
+            display: block;
+            width: 6rem;
+            height: 6rem;
+            line-height: 6rem;
+            border-radius: 6rem;
+            box-shadow: inset 0 0 0 2px _palette(border);
+            font-size: 2.5rem;
+            margin: 0 auto;
+            text-align: center;
+
+            body.is-ie & {
+                line-height: 2.375;
+            }
+        }
+    }
+
+    > li {
+        @include vendor('flex-grow', '0');
+        @include vendor('flex-shrink', '0');
+        position: relative;
+        margin: 1.5rem 0 0 1.5rem;
+        padding-left: 0;
+    }
+
+    &.connected {
+        > li {
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 1.5rem;
+                height: 2px;
+                top: 50%;
+                left: -1.5rem;
+                background-color: _palette(border);
+            }
+
+            &:after {
+                content: '';
+                display: block;
+                position: absolute;
+                width: 2px;
+                height: 1.5rem;
+                top: -1.5rem;
+                left: 50%;
+                background-color: _palette(border);
+            }
+        }
+    }
+
+    &.two {
+        width: 14rem;
+
+        > li {
+            &:nth-child(-n + 2) {
+                margin-top: 0;
+
+                &:after {
+                    display: none;
+                }
+            }
+
+            &:nth-child(2n - 1) {
+                margin-left: 0;
+
+                &:before {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &.three {
+        width: 21.5rem;
+
+        > li {
+            &:nth-child(-n + 3) {
+                margin-top: 0;
+
+                &:after {
+                    display: none;
+                }
+            }
+
+            &:nth-child(3n - 2) {
+                margin-left: 0;
+
+                &:before {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &.four {
+        width: 29rem;
+
+        > li {
+            &:nth-child(-n + 4) {
+                margin-top: 0;
+
+                &:after {
+                    display: none;
+                }
+            }
+
+            &:nth-child(4n - 3) {
+                margin-left: 0;
+
+                &:before {
+                    display: none;
+                }
+            }
+        }
+    }
+}

data/_sass/main/components/_icon.scss

@@ -0,0 +1,33 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icon */
+
+.icon {
+    @include icon;
+    position: relative;
+    border-bottom: none;
+
+    > .label {
+        display: none;
+    }
+
+    &:before {
+        line-height: inherit;
+    }
+
+    &.solid {
+        &:before {
+            font-weight: 900;
+        }
+    }
+
+    &.brands {
+        &:before {
+            font-family: 'Font Awesome 5 Brands';
+        }
+    }
+}

data/_sass/main/components/_icons.scss

@@ -0,0 +1,28 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Icons */
+
+ul.icons {
+    cursor: default;
+    list-style: none;
+    padding-left: 0;
+
+    li {
+        display: inline-block;
+        padding: 0 1rem 0 0;
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        .icon {
+            &:before {
+                font-size: 1.25em;
+            }
+        }
+    }
+}

data/_sass/main/components/_image.scss

@@ -0,0 +1,169 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Image */
+
+.image {
+    display: inline-block;
+    position: relative;
+    border: 0;
+
+    &.filtered {
+        &:after {
+            @include gradient-background;
+            @include vendor('pointer-events', 'none');
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            z-index: 1;
+        }
+
+        &.tinted {
+            &:after {
+                @include gradient-background(true);
+            }
+        }
+    }
+
+    &[data-position] {
+        img {
+            @include vendor('object-fit', 'cover');
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &[data-position="top left"] {
+        img {
+            @include vendor('object-position', 'top left');
+        }
+    }
+
+    &[data-position="top"] {
+        img {
+            @include vendor('object-position', 'top');
+        }
+    }
+
+    &[data-position="top right"] {
+        img {
+            @include vendor('object-position', 'top right');
+        }
+    }
+
+    &[data-position="right"] {
+        img {
+            @include vendor('object-position', 'right');
+        }
+    }
+
+    &[data-position="bottom right"] {
+        img {
+            @include vendor('object-position', 'bottom right');
+        }
+    }
+
+    &[data-position="bottom"] {
+        img {
+            @include vendor('object-position', 'bottom');
+        }
+    }
+
+    &[data-position="bottom left"] {
+        img {
+            @include vendor('object-position', 'bottom left');
+        }
+    }
+
+    &[data-position="left"] {
+        img {
+            @include vendor('object-position', 'left');
+        }
+    }
+
+    &[data-position="center"] {
+        img {
+            @include vendor('object-position', 'center');
+        }
+    }
+
+    &[data-position="25% 25%"] {
+        img {
+            @include vendor('object-position', '25% 25%');
+        }
+    }
+
+    &[data-position="75% 25%"] {
+        img {
+            @include vendor('object-position', '75% 25%');
+        }
+    }
+
+    &[data-position="75% 75%"] {
+        img {
+            @include vendor('object-position', '75% 75%');
+        }
+    }
+
+    &[data-position="25% 75%"] {
+        img {
+            @include vendor('object-position', '25% 75%');
+        }
+    }
+
+    img {
+        display: block;
+    }
+
+    &.left,
+    &.right {
+        max-width: 40%;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &.left {
+        float: left;
+        padding: 0 1.5rem 1rem 0;
+        top: 0.25rem;
+    }
+
+    &.right {
+        float: right;
+        padding: 0 0 1rem 1.5rem;
+        top: 0.25rem;
+    }
+
+    &.fit {
+        display: block;
+        margin: 0 0 _size(element-margin) 0;
+        width: 100%;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &.main {
+        display: block;
+        margin: 0 0 (_size(element-margin) * 1.5) 0;
+        width: 100%;
+
+        img {
+            width: 100%;
+        }
+    }
+}