jekyll-theme-ethereal 0.4.4 → 0.5.0

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;
+        }
+    }
+}

data/_sass/main/layout/_footer.scss

@@ -0,0 +1,30 @@
+/* Header */
+
+#footer {
+    z-index: 1000;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    @include vendor('display', 'flex');
+    @include vendor('justify-content', 'space-between');
+    color: _palette(accent4);
+
+    .copyright {
+        li {
+            display: inline-block;
+            margin-left: 1em;
+            padding-left: 1em;
+            border-left: solid 1px rgba(255, 255, 255, 0.25);
+            line-height: 1em;
+
+            &:first-child {
+                border-left: 0;
+                margin-left: 0;
+                padding-left: 0;
+            }
+        }
+    }
+}

data/_sass/main/layout/_header.scss

@@ -0,0 +1,35 @@
+#language-selector {
+    z-index: 10002;
+    position: fixed;
+    top: 0;
+    right: 0;
+    text-align: right;
+    color: _palette(accent4);
+
+    li {
+        display: inline-block;
+        margin: 0;
+        margin-right: 1em;
+        padding: 0 1em 0 0;
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        .icon {
+            color: inherit;
+
+            &:before {
+                font-size: 1.25em;
+            }
+        }
+    }
+
+    a {
+        border: none;
+    }
+    
+    .en:lang(en), .fr:lang(fr), .de:lang(de){
+        font-weight: bold;
+    }
+}

data/_sass/main/layout/_page-wrapper.scss

@@ -0,0 +1,22 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Page Wrapper */
+
+#page-wrapper {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'flex-start');
+    @include vendor('flex-grow', '1');
+    @include vendor('flex-shrink', '1');
+    height: 100%;
+    padding: 5rem;
+
+    @include orientation(portrait) {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+}

data/_sass/main/layout/_wrapper.scss

@@ -0,0 +1,85 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Wrapper */
+
+#wrapper {
+    @include vendor('display', 'flex');
+    @include vendor('flex-direction', 'row');
+    @include vendor('transition', (
+        'opacity 1s ease-out',
+        'transform 0.75s ease-out'
+    ));
+    @include vendor('transition-delay', '0.25s');
+    cursor: default;
+    position: relative;
+    height: 32rem;
+    box-shadow: 0 2rem 4rem 0.25rem transparentize(_palette(bg), 0.425);
+
+    > .scrollZone {
+        position: fixed;
+        width: 6rem;
+        height: inherit;
+        cursor: -moz-grab;
+        cursor: -webkit-grab;
+        cursor: -ms-grab;
+        cursor: grab;
+        z-index: _misc(z-index-base) + 100;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 0;
+        }
+    }
+
+    > .copyright {
+        position: absolute;
+        bottom: -3rem;
+        right: 0;
+        font-size: 0.8rem;
+        color: transparentize(_palette(bg), 0.625);
+        margin-bottom: 0;
+
+        a {
+            &:hover {
+                color: inherit;
+            }
+        }
+    }
+
+    &.is-dragging {
+        @include vendor('user-select', 'none');
+        cursor: -moz-grab;
+        cursor: -webkit-grab;
+        cursor: -ms-grab;
+        cursor: grab;
+
+        * {
+            @include vendor('user-select', 'none');
+        }
+
+        *:not(a, .image) {
+            cursor: -moz-grab;
+            cursor: -webkit-grab;
+            cursor: -ms-grab;
+            cursor: grab;
+        }
+    }
+
+    &.is-dragged {
+        * {
+            @include vendor('pointer-events', 'none');
+        }
+    }
+
+    body.is-preload & {
+        @include vendor('transform', 'translateX(2rem)');
+        opacity: 0;
+    }
+}

data/_sass/main.scss

@@ -3,133 +3,39 @@
 @import 'libs/mixins';
 @import 'libs/vendor';
 @import 'libs/breakpoints';
-@import 'fontawesome-all.min.css';
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i");
 
 /*
-	Ethereal by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+Ethereal by HTML5 UP
+html5up.net | @ajlkn
+Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
-// Breakpoints.
-
-	@include breakpoints((
-		xlarge:   ( 1281px,  1680px ),
-		large:    ( 981px,   1280px ),
-		medium:   ( 737px,   980px  ),
-		small:    ( 481px,   736px  ),
-		xsmall:   ( 361px,   480px  ),
-		xxsmall:  ( null,    360px  ),
-		short:    '(min-aspect-ratio: 16/7)',
-		xshort:   '(min-aspect-ratio: 16/6)'
-	));
-
-// Mixins.
-
-	@mixin gradient-background($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%, $angle: 45deg) {
-		$background-image: (
-			url('./images/overlay.png'),
-			linear-gradient($angle, transparentize(_palette(accent1), (1 - $opacity)) $stop1, transparentize(_palette(accent2), (1 - $opacity)) $stop2, transparentize(_palette(accent3), (1 - $opacity)))
-		);
-
-		$background-size: (
-			128px 128px,
-			auto
-		);
-
-		@if ($tint) {
-			$x: linear-gradient(0deg, rgba(0,0,0,0.125), rgba(0,0,0,0.125));
-			$y: auto;
-			$background-image: append($background-image, $x);
-			$background-size: append($background-size, $y);
-		}
-
-		background-image: $background-image;
-		background-size: $background-size;
-	}
-
-	@mixin gradient-background-small($tint: false, $opacity: 0.25, $stop1: 25%, $stop2: 50%) {
-		@include gradient-background($tint, $opacity, $stop1, $stop2, 135deg);
-	}
-
-	@mixin spans($x) {
-		@for $i from 0 through 10 {
-
-			@if ($i > 0) {
-				.span-#{$i} {
-					width: ($x * $i);
-				}
-			}
-
-			@if ($i < 10) {
-				.span-#{$i}-25 {
-					width: ($x * $i) + ($x * 0.25);
-				}
-
-				.span-#{$i}-5 {
-					width: ($x * $i) + ($x * 0.5);
-				}
-
-				.span-#{$i}-75 {
-					width: ($x * $i) + ($x * 0.75);
-				}
-			}
-		}
-	}
-
-	@mixin spans-small($x) {
-		@for $i from 0 through 10 {
-
-			@if ($i > 0) {
-				.span-#{$i} {
-					width: 100%;
-				}
-			}
-
-			@if ($i < 10) {
-				.span-#{$i}-25 {
-					width: 100%;
-				}
-
-				.span-#{$i}-5 {
-					width: 100%;
-				}
-
-				.span-#{$i}-75 {
-					width: 100%;
-				}
-			}
-		}
-	}
-
 // Base.
 
-	@import 'base/reset';
-	@import 'base/page';
-	@import 'base/typography';
+@import 'main/base/reset';
+@import 'main/base/page';
+@import 'main/base/typography';
 
 // Component.
 
-	@import 'components/cookieconsent';
-	@import 'components/form';
-	@import 'components/icon';
-	@import 'components/image';
-	@import 'components/list';
-	@import 'components/actions';
-	@import 'components/icons';
-	@import 'components/grid-icons';
-	@import 'components/contact-icons';
-	@import 'components/table';
-	@import 'components/button';
-	@import 'components/gallery';
-	@import 'components/panel';
-	@import 'components/panel-banner';
-	@import 'components/panel-spotlight';
+@import 'main/components/form';
+@import 'main/components/icon';
+@import 'main/components/image';
+@import 'main/components/list';
+@import 'main/components/actions';
+@import 'main/components/icons';
+@import 'main/components/grid-icons';
+@import 'main/components/contact-icons';
+@import 'main/components/table';
+@import 'main/components/button';
+@import 'main/components/gallery';
+@import 'main/components/panel';
+@import 'main/components/panel-banner';
+@import 'main/components/panel-spotlight';
 
 // Layout.
 
-	@import 'layout/footer';
-	@import 'layout/header';
-	@import 'layout/page-wrapper';
-	@import 'layout/wrapper';
+@import 'main/layout/footer';
+@import 'main/layout/header';
+@import 'main/layout/page-wrapper';
+@import 'main/layout/wrapper';