jekyll-theme-ethereal 0.4.4 → 0.5.4

data/_sass/libs/_functions.scss

@@ -5,33 +5,33 @@
 /// @return {list} Updated list.
 @function remove-nth($list, $index) {
 
-	$result: null;
+    $result: null;
 
-	@if type-of($index) != number {
-		@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
-	}
-	@else if $index == 0 {
-		@warn "List index 0 must be a non-zero integer for `remove-nth`.";
-	}
-	@else if abs($index) > length($list) {
-		@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
-	}
-	@else {
+    @if type-of($index) != number {
+        @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
+    }
+    @else if $index == 0 {
+        @warn "List index 0 must be a non-zero integer for `remove-nth`.";
+    }
+    @else if abs($index) > length($list) {
+        @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
+    }
+    @else {
 
-		$result: ();
-		$index: if($index < 0, length($list) + $index + 1, $index);
+        $result: ();
+        $index: if($index < 0, length($list) + $index + 1, $index);
 
-		@for $i from 1 through length($list) {
+        @for $i from 1 through length($list) {
 
-			@if $i != $index {
-				$result: append($result, nth($list, $i));
-			}
+            @if $i != $index {
+                $result: append($result, nth($list, $i));
+            }
 
-		}
+        }
 
-	}
+    }
 
-	@return $result;
+    @return $result;
 
 }
 
@@ -42,15 +42,15 @@
 /// @return {string} Value.
 @function val($map, $keys...) {
 
-	@if nth($keys, 1) == null {
-		$keys: remove-nth($keys, 1);
-	}
+    @if nth($keys, 1) == null {
+        $keys: remove-nth($keys, 1);
+    }
 
-	@each $key in $keys {
-		$map: map-get($map, $key);
-	}
+    @each $key in $keys {
+        $map: map-get($map, $key);
+    }
 
-	@return $map;
+    @return $map;
 
 }
 
@@ -58,33 +58,33 @@
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _duration($keys...) {
-	@return val($duration, $keys...);
+    @return val($duration, $keys...);
 }
 
 /// Gets a font value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _font($keys...) {
-	@return val($font, $keys...);
+    @return val($font, $keys...);
 }
 
 /// Gets a misc value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _misc($keys...) {
-	@return val($misc, $keys...);
+    @return val($misc, $keys...);
 }
 
 /// Gets a palette value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _palette($keys...) {
-	@return val($palette, $keys...);
+    @return val($palette, $keys...);
 }
 
 /// Gets a size value.
 /// @param {string} $keys Key(s).
 /// @return {string} Value.
 @function _size($keys...) {
-	@return val($size, $keys...);
+    @return val($size, $keys...);
 }

data/_sass/libs/_mixins.scss

@@ -4,36 +4,36 @@
 /// @param {string} $where Optional pseudoelement to target (before or after).
 @mixin icon($content: false, $category: regular, $where: before) {
 
-	text-decoration: none;
-
-	&:#{$where} {
-
-		@if $content {
-			content: $content;
-		}
-
-		-moz-osx-font-smoothing: grayscale;
-		-webkit-font-smoothing: antialiased;
-		display: inline-block;
-		font-style: normal;
-		font-variant: normal;
-		text-rendering: auto;
-		line-height: 1;
-		text-transform: none !important;
-
-		@if ($category == brands) {
-			font-family: 'Font Awesome 5 Brands';
-		}
-		@elseif ($category == solid) {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 900;
-		}
-		@else {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 400;
-		}
-
-	}
+    text-decoration: none;
+
+    &:#{$where} {
+
+        @if $content {
+            content: $content;
+        }
+
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+        line-height: 1;
+        text-transform: none !important;
+
+        @if ($category == brands) {
+            font-family: 'Font Awesome 5 Brands';
+        }
+        @elseif ($category == solid) {
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 900;
+        }
+        @else {
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 400;
+        }
+
+    }
 
 }
 
@@ -44,17 +44,17 @@
 /// @param {bool} $important If true, adds !important.
 @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
 
-	@if $important {
-		$important: '!important';
-	}
+    @if $important {
+        $important: '!important';
+    }
 
-	$x: 0.1em;
+    $x: 0.1em;
 
-	@if unit(_size(element-margin)) == 'rem' {
-		$x: 0.1rem;
-	}
+    @if unit(_size(element-margin)) == 'rem' {
+        $x: 0.1rem;
+    }
 
-	padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
+    padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
 
 }
 
@@ -63,16 +63,192 @@
 /// @return {string} Encoded SVG data URL.
 @function svg-url($svg) {
 
-	$svg: str-replace($svg, '"', '\'');
-	$svg: str-replace($svg, '%', '%25');
-	$svg: str-replace($svg, '<', '%3C');
-	$svg: str-replace($svg, '>', '%3E');
-	$svg: str-replace($svg, '&', '%26');
-	$svg: str-replace($svg, '#', '%23');
-	$svg: str-replace($svg, '{', '%7B');
-	$svg: str-replace($svg, '}', '%7D');
-	$svg: str-replace($svg, ';', '%3B');
+    $svg: str-replace($svg, '"', '\'');
+    $svg: str-replace($svg, '%', '%25');
+    $svg: str-replace($svg, '<', '%3C');
+    $svg: str-replace($svg, '>', '%3E');
+    $svg: str-replace($svg, '&', '%26');
+    $svg: str-replace($svg, '#', '%23');
+    $svg: str-replace($svg, '{', '%7B');
+    $svg: str-replace($svg, '}', '%7D');
+    $svg: str-replace($svg, ';', '%3B');
 
-	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+    @return url("data:image/svg+xml;charset=utf8,#{$svg}");
 
-}
+}
+
+/// Defines a unit of width: size the elements so their width is a multiple of the unit.
+/// @param {mixed} $x the actual size of the unit.
+@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%;
+            }
+        }
+    }
+}
+
+/// 
+@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 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);
+    }
+}
+
+@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/libs/_vars.scss

@@ -1,49 +1,49 @@
 // Misc.
-	$misc: (
-		z-index-base:					10000,
-		gallery-lightbox-opacity:		0.875
-	);
+$misc: (
+    z-index-base:                   10000,
+    gallery-lightbox-opacity:       0.875
+);
 
 // Duration.
-	$duration: (
-		transition:						0.2s,
-		gallery-lightbox-fadein:		0.5s
-	);
+$duration: (
+    transition:                     0.2s,
+    gallery-lightbox-fadein:        0.5s
+);
 
 // Size.
-	$size: (
-		border-radius:					0.25rem,
-		element-height:					2.5rem,
-		element-margin:					1.5rem,
-		pad:							3.5rem,
-		pad-small-tb:					3.5rem * 0.825,
-		pad-small-lr:					3.5rem * 0.5,
-		span-fixed:						10rem,
-		span-variable:					10%
-	);
+$size: (
+    border-radius:                  0.25rem,
+    element-height:                 2.5rem,
+    element-margin:                 1.5rem,
+    pad:                            3.5rem,
+    pad-small-tb:                   3.5rem * 0.825,
+    pad-small-lr:                   3.5rem * 0.5,
+    span-fixed:                     10rem,
+    span-variable:                  10%
+);
 
 // Font.
-	$font: (
-		family:							('Source Sans Pro', Helvetica, sans-serif),
-		family-heading:					(Arial, Helvetica, sans-serif),
-		family-fixed:					('Courier New', monospace),
-		weight:							300,
-		weight-bold:					400,
-		weight-heading:					700
-	);
+$font: (
+    family:                         ('Source Sans Pro', Helvetica, sans-serif),
+    family-heading:                 (Arial, Helvetica, sans-serif),
+    family-fixed:                   ('Courier New', monospace),
+    weight:                         300,
+    weight-bold:                    400,
+    weight-heading:                 700
+);
 
 // Palette.
-	$palette: (
-		bg:								#2e2b37,
-		bg-alt:							#e1e6e1,
-		fg:								rgba(255,255,255,0.75),
-		fg-bold:						rgba(255,255,255,0.875),
-		fg-light:						rgba(255,255,255,0.5),
-		border:							rgba(255,255,255,0.25),
-		border-bg:						rgba(255,255,255,0.075),
-		border-bg-alt:					rgba(255,255,255,0.125),
-		accent1:						#726193,
-		accent2:						#e37b7c,
-		accent3:						#ffe4b4,
-		accent4:						#353865
-	);
+$palette: (
+    bg:                             #2e2b37,
+    bg-alt:                         #e1e6e1,
+    fg:                             rgba(255,255,255,0.75),
+    fg-bold:                        rgba(255,255,255,0.875),
+    fg-light:                       rgba(255,255,255,0.5),
+    border:                         rgba(255,255,255,0.25),
+    border-bg:                      rgba(255,255,255,0.075),
+    border-bg-alt:                  rgba(255,255,255,0.125),
+    accent1:                        #726193,
+    accent2:                        #e37b7c,
+    accent3:                        #ffe4b4,
+    accent4:                        #353865
+);