jekyll-theme-ethereal 0.1.0

data/_sass/components/_panel-banner.scss

@@ -0,0 +1,90 @@
+///
+/// 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');
+		}
+	}
+
+	@include breakpoint('<=small') {
+		.panel.banner {
+			.content {
+				@include padding($pad-small-tb, $pad-small-lr);
+				@include vendor('flex-basis', '60%');
+
+				> .actions:last-child {
+					margin-bottom: _size(element-margin);
+				}
+			}
+
+			.image {
+				@include vendor('flex-basis', '40%');
+			}
+		}
+
+		@include orientation(portrait) {
+			.panel.banner {
+				.content {
+					@include vendor('flex-basis', 'auto');
+				}
+
+				.image {
+					@include vendor('flex-basis', 'auto');
+					height: 18rem;
+				}
+
+				&.left {
+					@include vendor('flex-direction', 'column');
+				}
+
+				&.right {
+					@include vendor('flex-direction', 'column-reverse');
+				}
+			}
+		}
+	}

data/_sass/components/_panel-spotlight.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)
+///
+
+/* 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%);
+			}
+		}
+	}
+
+	@include breakpoint('<=small') {
+		.panel.spotlight {
+			.content {
+				@include padding($pad-small-tb, $pad-small-lr);
+				@include vendor('flex-direction', 'column !important');
+				background-image: linear-gradient(0deg, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.175)) !important;
+				min-height: 25rem;
+			}
+		}
+	}
+
+	@include breakpoint('<=xsmall') {
+		.panel.spotlight {
+			.content {
+				min-height: 30rem;
+			}
+		}
+	}

data/_sass/components/_panel.scss

@@ -0,0 +1,300 @@
+///
+/// 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: _palette(accent3);
+		}
+
+		&.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), $darken), $desaturate);
+		}
+
+		&.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);
+		}
+	}
+
+	@include breakpoint('<=small') {
+		.panel {
+			@include vendor('flex-direction', 'column');
+			height: auto;
+
+			> * {
+				@include panel-colors-small;
+			}
+
+			> .intro {
+				@include padding($pad-small-tb, $pad-small-lr);
+				width: 100% !important;
+
+				&.joined {
+					padding-bottom: 0;
+					padding-right: $pad-small-lr;
+
+					& + .inner {
+						padding-top: 0;
+						padding-left: $pad-small-lr;
+					}
+				}
+			}
+
+			> .inner {
+				@include padding($pad-small-tb, $pad-small-lr);
+
+				&.columns {
+					@include vendor('flex-direction', 'column');
+
+					> * {
+						margin-left: 0;
+						margin-top: 0;
+					}
+
+					> :first-child {
+						margin-top: 0;
+					}
+
+					&.divided {
+						> * {
+							margin-left: 0;
+							margin-top: ($pad-small-lr * 2);
+
+							&:before {
+								content: '';
+								position: absolute;
+								top: auto;
+								left: $pad-small-lr;
+								width: calc(100% - #{$pad-small-lr * 2});
+								height: 2px;
+								margin-left: 0;
+								margin-top: ($pad-small-lr * -1);
+							}
+						}
+
+						> :first-child {
+							margin-top: 0;
+						}
+					}
+				}
+			}
+
+			@include spans-small(_size(span-fixed));
+
+			&.small,
+			&.medium,
+			&.large {
+				@include spans-small(_size(span-variable));
+				width: 100% !important;
+			}
+
+			@include panel-colors-small;
+		}
+	}