jekyll-theme-ethereal 0.4.4 → 0.5.4

data/_sass/main.scss

@@ -3,133 +3,40 @@
 @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-map';
+@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';

data/_sass/main/base/_page.scss

@@ -0,0 +1,99 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Page */
+
+@include keyframes('load-spinner') {
+    0% {
+        @include vendor('transform', 'rotate(0deg)');
+    }
+
+    100% {
+        @include vendor('transform', 'rotate(360deg)');
+    }
+}
+
+@-ms-viewport {
+    width: device-width;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+// Set box model to border-box.
+// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+    html {
+        box-sizing: border-box;
+    }
+
+    *, *:before, *:after {
+        box-sizing: inherit;
+    }
+
+body {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'flex-start');
+    -ms-overflow-style: scrollbar;
+    width: 100%;
+    height: 100%;
+    min-height: 30rem;
+    overflow: hidden;
+
+    &:before {
+        @include vendor('animation', 'load-spinner 1s infinite linear');
+        @include vendor('transition', 'opacity 0.25s ease');
+        @include vendor('transition-delay', '0s');
+        @include vendor('pointer-events', 'none');
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 4rem;
+        height: 4rem;
+        margin: -2rem 0 0 -2rem;
+        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(bg)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 4rem;
+        opacity: 0;
+    }
+
+    &:after {
+        @include vendor('pointer-events', 'none');
+        content: '';
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-attachment: fixed;
+        background-color: _palette(bg-alt);
+        background-image: url('./images/overlay.png'), url('./images/bg.jpg');
+        background-repeat: repeat, repeat-x;
+        background-size: 128px 128px, cover;
+    }
+
+    // Stops initial animations until page loads.
+        &.is-preload {
+            *, *:before, *:after {
+                @include vendor('animation', 'none !important');
+                @include vendor('transition', 'none !important');
+            }
+
+            &:before {
+                @include vendor('transition', 'opacity 1s ease');
+                @include vendor('transition-delay', '0.75s');
+                opacity: 0.25;
+            }
+        }
+
+}

data/_sass/main/base/_reset.scss

@@ -0,0 +1,76 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+// Reset.
+// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
+
+html, body, div, span, applet, object,
+iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
+pre, a, abbr, acronym, address, big, cite,
+code, del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var, b,
+u, i, center, dl, dt, dd, ol, ul, li, fieldset,
+form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td, article, aside,
+canvas, details, embed, figure, figcaption,
+footer, header, hgroup, menu, nav, output, ruby,
+section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol, ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes: none;
+
+    &:before,
+    &:after {
+        content: '';
+        content: none;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+body {
+    -webkit-text-size-adjust: none;
+}
+
+mark {
+    background-color: transparent;
+    color: inherit;
+}
+
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input, select, textarea {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -ms-appearance: none;
+    appearance: none;
+}

data/_sass/main/base/_typography.scss

@@ -0,0 +1,193 @@
+///
+/// Ethereal by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Typography */
+
+html {
+    font-size: 18pt;
+    font-size: 1vmax;
+}
+
+body, input, select, textarea {
+    color: _palette(fg);
+    font-family: _font(family);
+    font-size: 1rem;
+    font-weight: _font(weight);
+    line-height: 1.65;
+}
+
+a {
+    @include vendor('transition', (
+        'color #{_duration(transition)} ease-in-out',
+        'border-bottom-color #{_duration(transition)} ease-in-out'
+    ));
+    color: inherit;
+    border-bottom: dotted 1px;
+    text-decoration: none;
+
+    &:hover {
+        border-bottom-color: transparent;
+        color: _palette(accent3);
+    }
+}
+
+strong, b {
+    color: _palette(fg-bold);
+    font-weight: _font(weight-bold);
+}
+
+em, i {
+    font-style: italic;
+}
+
+p {
+    margin: 0 0 _size(element-margin) 0;
+
+    body.is-ie & {
+        width: 100%;
+    }
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: _palette(fg-bold);
+    font-family: _font(family-heading);
+    font-weight: _font(weight-heading);
+    line-height: 1.3;
+    margin: 0 0 (_size(element-margin) * 0.5) 0;
+    letter-spacing: -0.05em;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+h1, h2, h3 {
+    &.major {
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            width: 3.5rem;
+            height: 0.1rem;
+            background-color: _palette(border);
+        }
+    }
+}
+
+h1 {
+    font-size: 3rem;
+    line-height: 1.2;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.75) 0;
+
+        &:after {
+            bottom: -1.325rem;
+        }
+    }
+}
+
+h2 {
+    font-size: 1.75rem;
+    line-height: 1.2;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.325) 0;
+
+        &:after {
+            bottom: -1.2rem;
+        }
+    }
+}
+
+h3 {
+    font-size: 1.325rem;
+
+    &.major {
+        margin: 0 0 (_size(element-margin) * 1.25) 0;
+
+        &:after {
+            bottom: -0.75rem;
+        }
+    }
+}
+
+h4 {
+    font-size: 1rem;
+}
+
+h5 {
+    font-size: 0.9rem;
+}
+
+h6 {
+    font-size: 0.7rem;
+}
+
+sub {
+    font-size: 0.8rem;
+    position: relative;
+    top: 0.5rem;
+}
+
+sup {
+    font-size: 0.8rem;
+    position: relative;
+    top: -0.5rem;
+}
+
+blockquote {
+    border-left: solid 0.25rem _palette(border);
+    font-style: italic;
+    margin: 0 0 _size(element-margin) 0;
+    padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+}
+
+code {
+    background: _palette(border-bg);
+    border-radius: _size(border-radius);
+    font-family: _font(family-fixed);
+    font-size: 0.8rem;
+    margin: 0 0.25rem;
+    padding: 0.25rem 0.65rem;
+}
+
+pre {
+    -webkit-overflow-scrolling: touch;
+    font-family: _font(family-fixed);
+    font-size: 0.8rem;
+    margin: 0 0 _size(element-margin) 0;
+        white-space: pre-wrap;
+
+    code {
+        display: block;
+        line-height: 1.625;
+        padding: 1rem 1.5rem;
+        overflow-x: auto;
+        margin: 0;
+    }
+}
+
+hr {
+    border: 0;
+    border-bottom: solid 2px _palette(border);
+    margin: (_size(element-margin) * 1.25) 0;
+}
+
+.align-left {
+    text-align: left;
+}
+
+.align-center {
+    text-align: center;
+}
+
+.align-right {
+    text-align: right;
+}