jekyll-theme-ethereal 0.4.4 → 0.5.0

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