jekyll-theme-ethereal 0.4.4 → 0.5.4

data/_sass/main/components/_list.scss

@@ -0,0 +1,56 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* List */
+
+ol {
+    list-style: decimal;
+    margin: 0 0 _size(element-margin) 0;
+    padding-left: 1.25rem;
+
+    li {
+        padding-left: 0.25rem;
+    }
+}
+
+ul {
+    list-style: disc;
+    margin: 0 0 _size(element-margin) 0;
+    padding-left: 1rem;
+
+    li {
+        padding-left: 0.5rem;
+    }
+
+    &.alt {
+        list-style: none;
+        padding-left: 0;
+
+        li {
+            border-top: solid 1px _palette(border);
+            padding: 0.5rem 0;
+
+            &:first-child {
+                border-top: 0;
+                padding-top: 0;
+            }
+        }
+    }
+}
+
+dl {
+    margin: 0 0 _size(element-margin) 0;
+
+    dt {
+        display: block;
+        font-weight: _font(weight-bold);
+        margin: 0 0 (_size(element-margin) * 0.5) 0;
+    }
+
+    dd {
+        margin-left: _size(element-margin);
+    }
+}

data/_sass/main/components/_panel-banner.scss

@@ -0,0 +1,52 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel (Banner) */
+
+$pad: _size(pad);
+$pad-small-tb: _size(pad-small-tb);
+$pad-small-lr: _size(pad-small-lr);
+
+.panel.banner {
+    @include vendor('align-items', 'stretch');
+
+    .content {
+        @include padding($pad, $pad);
+        @include vendor('display', 'flex');
+        @include vendor('flex-direction', 'column');
+        @include vendor('justify-content', 'center');
+        @include vendor('flex-grow', '0');
+        @include vendor('flex-shrink', '0');
+
+        > .actions:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .image {
+        @include vendor('flex-grow', '0');
+        @include vendor('flex-shrink', '0');
+        position: relative;
+
+        img {
+            @include vendor('object-fit', 'cover');
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &.left {
+        @include vendor('flex-direction', 'row');
+    }
+
+    &.right {
+        @include vendor('flex-direction', 'row-reverse');
+    }
+}

data/_sass/main/components/_panel-spotlight.scss

@@ -0,0 +1,62 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel (Spotlight) */
+
+$pad: _size(pad);
+$pad-small-tb: _size(pad-small-tb);
+$pad-small-lr: _size(pad-small-lr);
+
+.panel.spotlight {
+    @include vendor('align-items', 'stretch');
+    position: relative;
+
+    > * {
+        z-index: 1;
+    }
+
+    .content {
+        @include vendor('display', 'flex');
+        @include vendor('flex-direction', 'column');
+        @include vendor('justify-content', 'center');
+        @include padding($pad, $pad);
+    }
+
+    .image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+
+        img {
+            @include vendor('object-fit', 'cover');
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &.left {
+        @include vendor('justify-content', 'flex-start');
+
+        .content {
+            background-image: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+        }
+    }
+
+    &.right {
+        @include vendor('justify-content', 'flex-end');
+
+        .content {
+            background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.125) 30%, rgba(0,0,0,0.175) 50%);
+        }
+    }
+}

data/_sass/main/components/_panel.scss

@@ -0,0 +1,224 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Panel */
+
+$pad: _size(pad);
+$pad-small-tb: _size(pad-small-tb);
+$pad-small-lr: _size(pad-small-lr);
+
+@mixin panel-colors {
+    $opacity: 0.175;
+    $darken: 3;
+    $desaturate: 3;
+
+    &.color0 {
+        @include gradient-background(false, 1, 20%, 60%);
+    }
+
+    &.color1 {
+        @include gradient-background;
+        background-color: _palette(accent1);
+    }
+
+    &.color2 {
+        @include gradient-background;
+        background-color: _palette(accent2);
+    }
+
+    &.color3 {
+        @include gradient-background;
+        background-color: desaturate(darken(_palette(accent3), 9), 9);
+    }
+
+    &.color4 {
+        @include gradient-background;
+        background-color: _palette(accent4);
+    }
+
+    &.color1-alt {
+        @include gradient-background(false, $opacity);
+        background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
+    }
+
+    &.color2-alt {
+        @include gradient-background(false, $opacity);
+        background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
+    }
+
+    &.color3-alt {
+        @include gradient-background(false, $opacity);
+        background-color: desaturate(darken(_palette(accent3), 12), 12);
+    }
+
+    &.color4-alt {
+        @include gradient-background(false, $opacity);
+        background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
+    }
+}
+
+.panel {
+    @include vendor('display', 'flex');
+    @include vendor('flex-grow', '0');
+    @include vendor('flex-shrink', '0');
+    @include vendor('justify-content', 'center');
+    @include vendor('align-items', 'stretch');
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > * {
+        position: relative;
+        min-width: 10rem;
+
+        @include panel-colors;
+    }
+
+    > .intro {
+        @include padding($pad, $pad);
+        @include vendor('display', 'flex');
+        @include vendor('flex-grow', '0');
+        @include vendor('flex-shrink', '0');
+        @include vendor('justify-content', 'center');
+        @include vendor('align-items', 'flex-start');
+        @include vendor('flex-direction', 'column');
+        width: 22rem;
+
+        &.joined {
+            width: (22rem - $pad);
+            padding-right: 0;
+
+            & + .inner {
+                padding-left: ($pad * 0.75);
+            }
+        }
+    }
+
+    > .inner {
+        @include padding($pad, $pad);
+        @include vendor('display', 'flex');
+        @include vendor('flex-grow', '1');
+        @include vendor('flex-shrink', '1');
+        @include vendor('justify-content', 'center');
+        @include vendor('align-items', 'flex-start');
+        @include vendor('flex-direction', 'column');
+        position: relative;
+        width: 100%;
+
+        &.columns {
+            @include vendor('display', 'flex');
+            @include vendor('justify-content', 'center');
+            @include vendor('align-items', 'center');
+            @include vendor('flex-direction', 'row');
+
+            > * {
+                @include vendor('flex-grow', '0');
+                @include vendor('flex-shrink', '0');
+                margin-left: $pad;
+            }
+
+            > :first-child {
+                margin-left: 0;
+            }
+
+            &.divided {
+                > * {
+                    margin-left: ($pad * 2);
+
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        top: $pad;
+                        width: 2px;
+                        height: calc(100% - #{$pad * 2});
+                        margin-left: ($pad * -1);
+                        background-color: _palette(border);
+                    }
+                }
+
+                > :first-child {
+                    margin-left: 0;
+
+                    &:before {
+                        display: none;
+                    }
+                }
+            }
+
+            &.aligned {
+                @include vendor('align-items', 'flex-start');
+            }
+        }
+    }
+
+    @include spans(_size(span-fixed));
+
+    &.small {
+        width: 35rem;
+    }
+
+    &.medium {
+        width: 50rem;
+    }
+
+    &.large {
+        width: 65rem;
+    }
+
+    &.small,
+    &.medium,
+    &.large {
+        @include spans(_size(span-variable));
+    }
+
+    @include panel-colors;
+}
+
+@mixin panel-colors-small {
+    $opacity: 0.175;
+    $darken: 3;
+    $desaturate: 3;
+
+    &.color1 {
+        @include gradient-background-small;
+        background-color: _palette(accent1);
+    }
+
+    &.color2 {
+        @include gradient-background-small;
+        background-color: _palette(accent2);
+    }
+
+    &.color3 {
+        @include gradient-background-small;
+        background-color: _palette(accent3);
+    }
+
+    &.color4 {
+        @include gradient-background-small;
+        background-color: _palette(accent4);
+    }
+
+    &.color1-alt {
+        @include gradient-background-small(false, $opacity);
+        background-color: desaturate(darken(_palette(accent1), $darken), $desaturate);
+    }
+
+    &.color2-alt {
+        @include gradient-background-small(false, $opacity);
+        background-color: desaturate(darken(_palette(accent2), $darken), $desaturate);
+    }
+
+    &.color3-alt {
+        @include gradient-background-small(false, $opacity);
+        background-color: desaturate(darken(_palette(accent3), $darken), $desaturate);
+    }
+
+    &.color4-alt {
+        @include gradient-background-small(false, $opacity);
+        background-color: desaturate(darken(_palette(accent4), $darken), $desaturate);
+    }
+}

data/_sass/main/components/_table.scss

@@ -0,0 +1,81 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Table */
+
+.table-wrapper {
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+}
+
+table {
+    margin: 0 0 _size(element-margin) 0;
+    width: 100%;
+
+    tbody {
+        tr {
+            border: solid 1px _palette(border);
+            border-left: 0;
+            border-right: 0;
+
+            &:nth-child(2n + 1) {
+                background-color: _palette(border-bg);
+            }
+        }
+    }
+
+    td {
+        padding: 0.75rem 0.75rem;
+    }
+
+    th {
+        color: _palette(fg-bold);
+        font-size: 0.9rem;
+        font-weight: _font(weight-bold);
+        padding: 0 0.75rem 0.75rem 0.75rem;
+        text-align: left;
+    }
+
+    thead {
+        border-bottom: solid 2px _palette(border);
+    }
+
+    tfoot {
+        border-top: solid 2px _palette(border);
+    }
+
+    &.alt {
+        border-collapse: separate;
+
+        tbody {
+            tr {
+                td {
+                    border: solid 1px _palette(border);
+                    border-left-width: 0;
+                    border-top-width: 0;
+
+                    &:first-child {
+                        border-left-width: 1px;
+                    }
+                }
+
+                &:first-child {
+                    td {
+                        border-top-width: 1px;
+                    }
+                }
+            }
+        }
+
+        thead {
+            border-bottom: 0;
+        }
+
+        tfoot {
+            border-top: 0;
+        }
+    }
+}