jekyll-theme-ethereal 0.4.4 → 0.5.0

data/_sass/main/base/_page.scss

@@ -0,0 +1,99 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Page */
+
+@include keyframes('load-spinner') {
+    0% {
+        @include vendor('transform', 'rotate(0deg)');
+    }
+
+    100% {
+        @include vendor('transform', 'rotate(360deg)');
+    }
+}
+
+@-ms-viewport {
+    width: device-width;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+// Set box model to border-box.
+// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+    html {
+        box-sizing: border-box;
+    }
+
+    *, *:before, *:after {
+        box-sizing: inherit;
+    }
+
+body {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'flex-start');
+    -ms-overflow-style: scrollbar;
+    width: 100%;
+    height: 100%;
+    min-height: 30rem;
+    overflow: hidden;
+
+    &:before {
+        @include vendor('animation', 'load-spinner 1s infinite linear');
+        @include vendor('transition', 'opacity 0.25s ease');
+        @include vendor('transition-delay', '0s');
+        @include vendor('pointer-events', 'none');
+        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(bg)}; 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 {
+        @include vendor('pointer-events', 'none');
+        content: '';
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-attachment: fixed;
+        background-color: _palette(bg-alt);
+        background-image: url('./images/overlay.png'), url('./images/bg.jpg');
+        background-repeat: repeat, repeat-x;
+        background-size: 128px 128px, cover;
+    }
+
+    // Stops initial animations until page loads.
+        &.is-preload {
+            *, *:before, *:after {
+                @include vendor('animation', 'none !important');
+                @include vendor('transition', 'none !important');
+            }
+
+            &:before {
+                @include vendor('transition', 'opacity 1s ease');
+                @include vendor('transition-delay', '0.75s');
+                opacity: 0.25;
+            }
+        }
+
+}

data/_sass/main/base/_reset.scss

@@ -0,0 +1,76 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+html, body, div, span, applet, object,
+iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+pre, a, abbr, acronym, address, big, cite,
+code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var, b,
+u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside,
+canvas, details, embed, figure, figcaption,
+footer, header, hgroup, menu, nav, output, ruby,
+section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes: none;
+
+    &:before,
+    &:after {
+        content: '';
+        content: none;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+}
+
+mark {
+    background-color: transparent;
+    color: inherit;
+}
+
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input, select, textarea {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+}

data/_sass/main/base/_typography.scss

@@ -0,0 +1,193 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Typography */
+
+html {
+    font-size: 18pt;
+    font-size: 1vmax;
+}
+
+body, input, select, textarea {
+    color: _palette(fg);
+    font-family: _font(family);
+    font-size: 1rem;
+    font-weight: _font(weight);
+    line-height: 1.65;
+}
+
+a {
+    @include vendor('transition', (
+        'color #{_duration(transition)} ease-in-out',
+        'border-bottom-color #{_duration(transition)} ease-in-out'
+    ));
+    color: inherit;
+    border-bottom: dotted 1px;
+    text-decoration: none;
+
+    &:hover {
+        border-bottom-color: transparent;
+        color: _palette(accent3);
+    }
+}
+
+strong, b {
+    color: _palette(fg-bold);
+    font-weight: _font(weight-bold);
+}
+
+em, i {
+    font-style: italic;
+}
+
+p {
+    margin: 0 0 _size(element-margin) 0;
+
+    body.is-ie & {
+        width: 100%;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: _palette(fg-bold);
+    font-family: _font(family-heading);
+    font-weight: _font(weight-heading);
+    line-height: 1.3;
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+    letter-spacing: -0.05em;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+h1, h2, h3 {
+    &.major {
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            width: 3.5rem;
+            height: 0.1rem;
+            background-color: _palette(border);
+        }
+    }
+}
+
+h1 {
+    font-size: 3rem;
+    line-height: 1.2;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.75) 0;
+
+        &:after {
+            bottom: -1.325rem;
+        }
+    }
+}
+
+h2 {
+    font-size: 1.75rem;
+    line-height: 1.2;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.325) 0;
+
+        &:after {
+            bottom: -1.2rem;
+        }
+    }
+}
+
+h3 {
+    font-size: 1.325rem;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.25) 0;
+
+        &:after {
+            bottom: -0.75rem;
+        }
+    }
+}
+
+h4 {
+    font-size: 1rem;
+}
+
+h5 {
+    font-size: 0.9rem;
+}
+
+h6 {
+    font-size: 0.7rem;
+}
+
+sub {
+    font-size: 0.8rem;
+    position: relative;
+    top: 0.5rem;
+}
+
+sup {
+    font-size: 0.8rem;
+    position: relative;
+    top: -0.5rem;
+}
+
+blockquote {
+    border-left: solid 0.25rem _palette(border);
+    font-style: italic;
+    margin: 0 0 _size(element-margin) 0;
+    padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+}
+
+code {
+    background: _palette(border-bg);
+    border-radius: _size(border-radius);
+    font-family: _font(family-fixed);
+    font-size: 0.8rem;
+    margin: 0 0.25rem;
+    padding: 0.25rem 0.65rem;
+}
+
+pre {
+    -webkit-overflow-scrolling: touch;
+    font-family: _font(family-fixed);
+    font-size: 0.8rem;
+    margin: 0 0 _size(element-margin) 0;
+        white-space: pre-wrap;
+
+    code {
+        display: block;
+        line-height: 1.625;
+        padding: 1rem 1.5rem;
+        overflow-x: auto;
+        margin: 0;
+    }
+}
+
+hr {
+    border: 0;
+    border-bottom: solid 2px _palette(border);
+    margin: (_size(element-margin) * 1.25) 0;
+}
+
+.align-left {
+    text-align: left;
+}
+
+.align-center {
+    text-align: center;
+}
+
+.align-right {
+    text-align: right;
+}

data/_sass/main/components/_actions.scss

@@ -0,0 +1,63 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Actions */
+
+ul.actions {
+    @include vendor('display', 'flex');
+    cursor: default;
+    list-style: none;
+    margin-left: (_size(element-margin) * -0.5);
+    padding-left: 0;
+
+    li {
+        padding: 0 0 0 (_size(element-margin) * 0.5);
+        vertical-align: middle;
+    }
+
+    &.special {
+        @include vendor('justify-content', 'center');
+        width: 100%;
+        margin-left: 0;
+
+        li {
+            &:first-child {
+                padding-left: 0;
+            }
+        }
+    }
+
+    &.stacked {
+        @include vendor('flex-direction', 'column');
+        margin-left: 0;
+
+        li {
+            padding: (_size(element-margin) * 0.65) 0 0 0;
+
+            &:first-child {
+                padding-top: 0;
+            }
+        }
+    }
+
+    &.fit {
+        width: calc(100% + #{_size(element-margin) * 0.5});
+
+        li {
+            @include vendor('flex-grow', '1');
+            @include vendor('flex-shrink', '1');
+            width: 100%;
+
+            > * {
+                width: 100%;
+            }
+        }
+
+        &.stacked {
+            width: 100%;
+        }
+    }
+}

data/_sass/main/components/_button.scss

@@ -0,0 +1,154 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Button */
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+button,
+.button {
+    @include vendor('appearance', 'none');
+    @include vendor('transition', (
+        'background-color #{_duration(transition)} ease-in-out',
+        'box-shadow #{_duration(transition)} ease-in-out',
+        'color #{_duration(transition)} ease-in-out'
+    ));
+    background-color: transparent;
+    border: 0;
+    border-radius: _size(border-radius);
+    box-shadow: inset 0 0 0 2px _palette(border);
+    color: _palette(fg-bold) !important;
+    cursor: pointer;
+    display: inline-block;
+    font-family: _font(family-heading);
+    font-size: 0.6rem;
+    font-weight: _font(weight-heading);
+    height: _size(element-height) * 1.1;
+    letter-spacing: 0.15rem;
+    line-height: _size(element-height) * 1.1;
+    padding: 0 1.5rem 0 (1.5rem + 0.15rem);
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    &:hover {
+        box-shadow: inset 0 0 0 2px _palette(accent3);
+        color: _palette(accent3) !important;
+    }
+
+    &:active {
+        background-color: transparentize(_palette(accent3), 0.875);
+    }
+
+    &.icon {
+        &:before {
+            display: inline-block;
+            position: relative;
+            top: -0.075rem;
+            vertical-align: middle;
+            font-size: 0.8rem;
+            margin: 0 0.375rem 0 -0.325rem;
+        }
+
+        &.circle {
+            position: relative;
+            width: _size(element-height) * 1.25;
+            height: _size(element-height) * 1.25;
+            line-height: _size(element-height) * 1.25;
+            text-indent: _size(element-height) * 1.25;
+            border-radius: 100%;
+            overflow: hidden;
+            padding: 0;
+            letter-spacing: 0;
+
+            &:before {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: inherit;
+                height: inherit;
+                font-size: 1.25rem;
+                line-height: inherit;
+                margin: 0;
+                text-indent: 0;
+            }
+
+            &.fa-angle-left {
+                &:before {
+                    position: relative;
+                    left: -0.1rem;
+                    font-size: 1.75rem;
+                }
+            }
+
+            &.fa-angle-right {
+                &:before {
+                    position: relative;
+                    left: 0.1rem;
+                    font-size: 1.75rem;
+                }
+            }
+        }
+    }
+
+    &.fit {
+        width: 100%;
+    }
+
+    &.small {
+        font-size: 0.4rem;
+        height: _size(element-height) * 0.75;
+        line-height: _size(element-height) * 0.75;
+        padding: 0 1.25rem 0 (1.25rem + 0.15rem);
+    }
+
+    &.large {
+        font-size: 0.8rem;
+        height: _size(element-height) * 1.325;
+        line-height: _size(element-height) * 1.325;
+        padding: 0 2rem 0 (2rem + 0.15rem);
+    }
+
+    &.primary {
+        background-color: rgba(_palette(fg-bold), 1);
+        box-shadow: none;
+        color: _palette(bg) !important;
+
+        &.color1 {
+            color: _palette(accent1) !important;
+        }
+
+        &.color2 {
+            color: _palette(accent2) !important;
+        }
+
+        &.color3 {
+            color: _palette(accent3) !important;
+        }
+
+        &.color4 {
+            color: _palette(accent4) !important;
+        }
+
+        &:hover {
+            background-color: _palette(accent3);
+        }
+
+        &:active {
+            background-color: desaturate(darken(_palette(accent3), 6), 3);
+        }
+    }
+
+    &.disabled,
+    &:disabled {
+        @include vendor('pointer-events', 'none');
+        cursor: default;
+        opacity: 0.5;
+    }
+}

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

@@ -0,0 +1,72 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Contact Icons */
+
+ul.contact-icons {
+    list-style: none;
+    padding-left: 0;
+
+    > li {
+        margin: 1.25rem 0 0 0;
+        padding-left: 0;
+
+        &:before {
+            display: inline-block;
+            width: 2.25rem;
+            height: 2.25rem;
+            line-height: 2.25rem;
+            border-radius: 2.25rem;
+            background-color: rgba(_palette(fg-bold), 1);
+            color: _palette(bg);
+            cursor: default;
+            font-size: 1.125rem;
+            margin-right: 1rem;
+            text-align: center;
+            vertical-align: middle;
+
+            body.is-ie & {
+                line-height: 2.125;
+            }
+        }
+
+        a {
+            border-bottom: 0;
+        }
+    }
+
+    &.color1 {
+        > li {
+            &:before {
+                color: _palette(accent1);
+            }
+        }
+    }
+
+    &.color2 {
+        > li {
+            &:before {
+                color: _palette(accent2);
+            }
+        }
+    }
+
+    &.color3 {
+        > li {
+            &:before {
+                color: _palette(accent3);
+            }
+        }
+    }
+
+    &.color4 {
+        > li {
+            &:before {
+                color: _palette(accent4);
+            }
+        }
+    }
+}