jekyll-theme-ethereal 0.1.0

data/_sass/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/layout/_footer.scss

@@ -0,0 +1,49 @@
+/* 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;
+			}
+		}
+	}
+
+	@include breakpoint('<=small') {
+		@include vendor('flex-direction', 'column');
+		text-align: center;
+		padding: 3em;
+
+		.copyright {
+			li {
+				display: block;
+				margin: 0.75em 0 0 0;
+				padding-left: 0;
+				border-left: 0;
+
+				&:first-child {
+					margin-top: 0;
+				}
+			}
+		}
+	}
+}

data/_sass/layout/_header.scss

@@ -0,0 +1,37 @@
+/* Header */
+
+#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/layout/_page-wrapper.scss

@@ -0,0 +1,43 @@
+///
+/// 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;
+		}
+
+		@include breakpoint('short') {
+			padding: 6vh;
+		}
+
+		@include breakpoint('xshort') {
+			padding: 0;
+		}
+	}
+
+	@include breakpoint('<=small') {
+		#page-wrapper {
+			height: auto;
+			padding: 1rem;
+		}
+	}
+
+	@include breakpoint('<=xsmall') {
+		#page-wrapper {
+			padding: 0;
+		}
+	}

data/_sass/layout/_wrapper.scss

@@ -0,0 +1,118 @@
+///
+/// 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;
+		}
+	}
+
+	@include breakpoint('<=small') {
+		#wrapper {
+			@include vendor('flex-direction', 'column');
+			height: auto;
+			margin: 0 0 5rem 0;
+			box-shadow: 0 0.25rem 1.5rem 0.25rem transparentize(_palette(bg), 0.5);
+
+			> .scrollZone {
+				display: none;
+			}
+
+			> .copyright {
+				display: block;
+				width: 100%;
+				text-align: center;
+			}
+
+			body.is-preload & {
+				@include vendor('transform', 'translateY(1rem)');
+			}
+		}
+	}
+
+	@include breakpoint('<=xsmall') {
+		#wrapper {
+			box-shadow: none;
+
+			body.is-preload & {
+				@include vendor('transform', 'none');
+			}
+		}
+	}

data/_sass/libs/_breakpoints.scss

@@ -0,0 +1,223 @@
+// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Breakpoints.
+	/// @var {list}
+	$breakpoints: () !global;
+
+// Mixins.
+
+	/// Sets breakpoints.
+	/// @param {map} $x Breakpoints.
+	@mixin breakpoints($x: ()) {
+		$breakpoints: $x !global;
+	}
+
+	/// Wraps @content in a @media block targeting a specific orientation.
+	/// @param {string} $orientation Orientation.
+	@mixin orientation($orientation) {
+		@media screen and (orientation: #{$orientation}) {
+			@content;
+		}
+	}
+
+	/// Wraps @content in a @media block using a given query.
+	/// @param {string} $query Query.
+	@mixin breakpoint($query: null) {
+
+		$breakpoint: null;
+		$op: null;
+		$media: null;
+
+		// Determine operator, breakpoint.
+
+			// Greater than or equal.
+				@if (str-slice($query, 0, 2) == '>=') {
+
+					$op: 'gte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Less than or equal.
+				@elseif (str-slice($query, 0, 2) == '<=') {
+
+					$op: 'lte';
+					$breakpoint: str-slice($query, 3);
+
+				}
+
+			// Greater than.
+				@elseif (str-slice($query, 0, 1) == '>') {
+
+					$op: 'gt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Less than.
+				@elseif (str-slice($query, 0, 1) == '<') {
+
+					$op: 'lt';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Not.
+				@elseif (str-slice($query, 0, 1) == '!') {
+
+					$op: 'not';
+					$breakpoint: str-slice($query, 2);
+
+				}
+
+			// Equal.
+				@else {
+
+					$op: 'eq';
+					$breakpoint: $query;
+
+				}
+
+		// Build media.
+			@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+
+				$a: map-get($breakpoints, $breakpoint);
+
+				// Range.
+					@if (type-of($a) == 'list') {
+
+						$x: nth($a, 1);
+						$y: nth($a, 2);
+
+						// Max only.
+							@if ($x == null) {
+
+								// Greater than or equal (>= 0 / anything)
+									@if ($op == 'gte') {
+										$media: 'screen';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< 0 / invalid)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Not (> y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (<= y)
+									@else {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+							}
+
+						// Min only.
+							@else if ($y == null) {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= inf / anything)
+									@elseif ($op == 'lte') {
+										$media: 'screen';
+									}
+
+								// Greater than (> inf / invalid)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (max-width: -1px)';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Equal (>= x)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+							}
+
+						// Min and max.
+							@else {
+
+								// Greater than or equal (>= x)
+									@if ($op == 'gte') {
+										$media: 'screen and (min-width: ' + $x + ')';
+									}
+
+								// Less than or equal (<= y)
+									@elseif ($op == 'lte') {
+										$media: 'screen and (max-width: ' + $y + ')';
+									}
+
+								// Greater than (> y)
+									@elseif ($op == 'gt') {
+										$media: 'screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Less than (< x)
+									@elseif ($op == 'lt') {
+										$media: 'screen and (max-width: ' + ($x - 1) + ')';
+									}
+
+								// Not (< x and > y)
+									@elseif ($op == 'not') {
+										$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
+									}
+
+								// Equal (>= x and <= y)
+									@else {
+										$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
+									}
+
+							}
+
+					}
+
+				// String.
+					@else {
+
+						// Missing a media type? Prefix with "screen".
+							@if (str-slice($a, 0, 1) == '(') {
+								$media: 'screen and ' + $a;
+							}
+
+						// Otherwise, use as-is.
+							@else {
+								$media: $a;
+							}
+
+					}
+
+			}
+
+		// Output.
+	        @media #{$media} {
+				@content;
+			}
+
+	}