First Commit - Hugo Story

LICENSE

@@ -0,0 +1,3 @@
+# License
+
+The Hugo Story theme is licensed under the [Creative Commons Attribution 3.0 License](https://creativecommons.org/licenses/by/3.0/).

assets/js/breakpoints.min.js

@@ -0,0 +1,2 @@
+/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
+var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

assets/js/browser.min.js

@@ -0,0 +1,2 @@
+/* browser.js v1.0 | @ajlkn | MIT licensed */
+var browser=function(){"use strict";var e={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(n){e._canUse||(e._canUse=document.createElement("div"));var o=e._canUse.style,r=n.charAt(0).toUpperCase()+n.slice(1);return n in o||"Moz"+r in o||"Webkit"+r in o||"O"+r in o||"ms"+r in o},init:function(){var n,o,r,i,t=navigator.userAgent;for(n="other",o=0,r=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(RegExp.$1);break}for(e.name=n,e.version=o,n="other",o=0,r=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],i=0;i<r.length;i++)if(t.match(r[i][1])){n=r[i][0],o=parseFloat(r[i][2]?r[i][2](RegExp.$1):RegExp.$1);break}e.os=n,e.osVersion=o,e.touch="wp"==e.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

assets/js/demo.js

@@ -0,0 +1,562 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+(function($) {
+
+	var $window = $(window);
+
+	// Styles.
+		$(
+			'<style>' +
+				'.demo-animate-all:not(.gallery), .demo-animate-all:not(.gallery) *, .demo-animate-all:not(.gallery) *:before, .demo-animate-all:not(.gallery) *:after { transition: all 0.5s ease-in-out; }' +
+				'.demo-controls .property .classes { display: none; }' +
+				'.demo-controls .property[data-requires] { display: none; }' +
+				'.demo-controls .property[data-requires].active { display: inline; }' +
+				'.demo-controls .property .tooltip { position: relative; }' +
+				'.demo-controls .property .tooltip:before { content: \'Click to change!\'; font-size: 0.7rem; position: absolute; bottom: 100%; left: 0; background: #47D3E5; color: #ffffff; line-height: 1; white-space: nowrap; font-weight: bold; border-radius: 0.125rem; padding: 0.325rem 0.425rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
+				'.demo-controls .property .tooltip:after { content: \'\'; position: absolute; bottom: calc(100% - 0.25rem); left: 0.5rem; border-left: solid 0.5rem transparent; border-right: solid 0.5rem transparent; border-top: solid 0.5rem #47D3E5; width: 0.5rem; height: 0.5rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
+				'@keyframes demo-controls-tooltip {' +
+					'0% { opacity: 0; transform: translateY(0); }' +
+					'10% { opacity: 1; transform: translateY(0.125rem); }' +
+					'20% { opacity: 1; transform: translateY(-0.125rem); }' +
+					'30% { opacity: 1; transform: translateY(0.125rem); }' +
+					'40% { opacity: 1; transform: translateY(-0.125rem); }' +
+					'50% { opacity: 1; transform: translateY(0.125rem); }' +
+					'60% { opacity: 1; transform: translateY(0); }' +
+					'90% { opacity: 1; }' +
+					'100% { opacity: 0; }' +
+				'}' +
+			'</style>'
+		).appendTo($('head'));
+
+	// Functions.
+		$.fn.demo_controls = function(styles, userOptions) {
+
+			var $this = $(this),
+				$styleProperty, $stylePropertyClasses,
+				$controls, $x, $y, $z,
+				options,
+				current, i, j, k, s, n, count;
+
+			// No elements?
+				if (this.length == 0)
+					return $this;
+
+			// Multiple elements?
+				if (this.length > 1) {
+
+					for (var i=0; i < this.length; i++)
+						$(this[i]).demo_controls(styles, userOptions);
+
+					return $this;
+
+				}
+
+			// Options.
+				options = $.extend({
+					target: null,
+					palette: true
+				}, userOptions);
+
+			// Controls.
+				if (styles) {
+
+					$controls = $(
+						'<span class="demo-controls">' +
+							'<span class="property" data-name="style">' +
+								'<a href="#" class="title tooltip">style</a>' +
+								'<span class="classes"></span>' + (options.palette ? ', ' : ' ') +
+							'</span>' +
+							(options.palette ?
+								'<span class="property active" data-name="scheme">' +
+									'<a href="#" class="title">scheme</a>' +
+									'<span class="classes">' +
+										'<span data-class="-" class="active">default</span>' +
+										'<span data-class="invert">invert</span>' +
+									'</span>, ' +
+								'</span>' +
+								'<span class="property active" data-name="color">' +
+									'<a href="#" class="title">color</a>' +
+									'<span class="classes">' +
+										'<span data-class="-" class="active">default</span>' +
+										'<span data-class="color1">color1</span>' +
+										'<span data-class="color2">color2</span>' +
+										'<span data-class="color3">color3</span>' +
+										'<span data-class="color4">color4</span>' +
+										'<span data-class="color5">color5</span>' +
+										'<span data-class="color6">color6</span>' +
+										'<span data-class="color7">color7</span>' +
+									'</span>, ' +
+								'</span>'
+							: '') +
+						'</span>'
+					);
+
+				}
+				else {
+
+					$controls = $(
+						'<span class="demo-controls">' +
+							(options.palette ?
+								'<span class="property active" data-name="scheme">' +
+									'<a href="#" class="title">scheme</a>' +
+									'<span class="classes">' +
+										'<span data-class="-" class="active">default</span>' +
+										'<span data-class="invert">invert</span>' +
+									'</span> and ' +
+								'</span>' +
+								'<span class="property active" data-name="color">' +
+									'<a href="#" class="title">color</a>' +
+									'<span class="classes">' +
+										'<span data-class="-" class="active">default</span>' +
+										'<span data-class="color1">color1</span>' +
+										'<span data-class="color2">color2</span>' +
+										'<span data-class="color3">color3</span>' +
+										'<span data-class="color4">color4</span>' +
+										'<span data-class="color5">color5</span>' +
+										'<span data-class="color6">color6</span>' +
+										'<span data-class="color7">color7</span>' +
+									'</span>' +
+								'</span>'
+							: '') +
+						'</span>'
+					);
+
+				}
+
+			// Target.
+				switch (options.target) {
+
+					case 'previous':
+						$this.prev().find('.demo-controls').replaceWith($controls);
+						break;
+
+					default:
+						$this.find('.demo-controls').replaceWith($controls);
+						break;
+
+				}
+
+			// Styles.
+				if (styles) {
+
+					$styleProperty = $controls.find('.property[data-name="style"]');
+					$stylePropertyClasses = $styleProperty.children('.classes');
+
+					for (i in styles) {
+
+						current = false;
+						count = Object.keys(styles[i]).length;
+						n = 1;
+
+						// Add to style property.
+							$x = $('<span data-class="' + i + '">, ' + i + '</span>')
+								.appendTo($stylePropertyClasses);
+
+							if ($this.hasClass(i)) {
+
+								$x.addClass('active');
+								current = true;
+
+							}
+
+						// Step through properties.
+							for (j in styles[i]) {
+
+								$x = $(
+									'<span class="property" data-name="' + j + '" data-requires="' + i + '">' +
+										(n == count ? '<span>and </span>' : '') +
+										'<a href="#" class="title">' + j + '</a>' +
+										'<span class="classes">' +
+										'</span>' + (n < count ? ', ' : '') +
+									'</span>'
+								).appendTo($controls);
+
+								$y = $x.children('.classes');
+
+								if (current)
+									$x.addClass('active');
+
+								for (k in styles[i][j]) {
+
+									$z = $('<span data-class="' + k + '">, ' + styles[i][j][k].replace('*', '') + '</span>')
+										.appendTo($y);
+
+									if (styles[i][j][k].substr(-1, 1) == '*')
+										$z.addClass('default');
+
+									if (current
+									&&	$this.hasClass(k))
+										$z.addClass('active');
+
+								}
+
+								n++;
+
+							}
+
+					}
+
+				}
+
+			// Events.
+				$controls.on('click', 'a', function(event) {
+					event.preventDefault();
+				});
+
+				$controls.on('click', '.property.active', function(event) {
+
+					var $property = $(this);
+					var $classes = $property.find('.classes > *');
+					var $current = $classes.filter('.active');
+					var $next;
+
+					// Determine next.
+						if ($current.length == 0
+						||	$current.index() == $classes.length - 1)
+							$next = $classes.first();
+						else
+							$next = $current.next();
+
+					// Turn on animate all.
+						$this.addClass('demo-animate-all');
+
+					// Deactivate current.
+						$current.removeClass('active');
+						$this.removeClass($current.data('class'));
+
+					// Activate next.
+						$next.addClass('active');
+						$this.addClass($next.data('class'));
+
+					// Turn off animate all.
+						setTimeout(function() {
+							$this.removeClass('demo-animate-all');
+						}, 500);
+
+				});
+
+				$controls.on('click', '.property[data-name="style"]', function(event) {
+
+					var $property = $(this);
+					var $classes = $property.find('.classes > *');
+					var $current = $classes.filter('.active');
+					var $next;
+
+					// Determine next.
+						if ($current.length == 0
+						||	$current.index() == $classes.length - 1)
+							$next = $classes.first();
+						else
+							$next = $current.next();
+
+					// Turn on animate all.
+						$this.addClass('demo-animate-all');
+
+					// Deactivate current.
+						$current.removeClass('active');
+						$this.removeClass($current.data('class'));
+
+						$controls.find('.property[data-requires="' + $current.data('class') + '"]')
+							.removeClass('active');
+
+						$controls.find('.property[data-requires="' + $current.data('class') + '"] > .classes > .active').each(function() {
+
+							$(this).removeClass('active');
+
+							if ($(this).data('class') != '-')
+								$this.removeClass($(this).data('class'));
+
+						});
+
+					// Activate next.
+						$next.addClass('active');
+						$this.addClass($next.data('class'));
+
+						$controls.find('.property[data-requires="' + $next.data('class') + '"]')
+							.addClass('active');
+
+						$controls.find('.property[data-requires="' + $next.data('class') + '"] > .classes > .default').each(function() {
+
+							$(this).addClass('active');
+
+							if ($(this).data('class') != '-')
+								$this.addClass($(this).data('class'));
+
+						});
+
+					// Turn off animate all.
+						setTimeout(function() {
+							$this.removeClass('demo-animate-all');
+						}, 500);
+
+				});
+
+		};
+
+	// Elements.
+
+		// Wrappers.
+			$('.wrapper').demo_controls(null, {
+				palette: true
+			});
+
+		// Banner.
+			$('.banner').demo_controls({
+				style1: {
+					'size': {
+						'-': 'normal',
+						'fullscreen': 'fullscreen*'
+					},
+					'orientation': {
+						'orient-left': 'left*',
+						'orient-right': 'right'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style2: {
+					'size': {
+						'-': 'normal',
+						'fullscreen': 'fullscreen*'
+					},
+					'orientation': {
+						'orient-left': 'left',
+						'orient-center': 'center*',
+						'orient-right': 'right'
+					},
+					'content alignment': {
+						'content-align-left': 'left',
+						'content-align-center': 'center*',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style3: {
+					'size': {
+						'-': 'normal',
+						'fullscreen': 'fullscreen*'
+					},
+					'orientation': {
+						'orient-left': 'left',
+						'orient-right': 'right*'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style4: {
+					'size': {
+						'-': 'normal',
+						'fullscreen': 'fullscreen*'
+					},
+					'phone type': {
+						'iphone': 'iphone*',
+						'android': 'android'
+					},
+					'orientation': {
+						'orient-left': 'left',
+						'orient-right': 'right*'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style5: {
+					'size': {
+						'-': 'normal',
+						'fullscreen': 'fullscreen*'
+					},
+					'content alignment': {
+						'content-align-left': 'left',
+						'content-align-center': 'center*',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				}
+			});
+
+		// Spotlight.
+			$('.spotlight').demo_controls({
+				style1: {
+					'orientation': {
+						'orient-left': 'left',
+						'orient-right': 'right*'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left*',
+						'image-position-center': 'center',
+						'image-position-right': 'right'
+					}
+				},
+				style2: {
+					'orientation': {
+						'orient-left': 'left',
+						'orient-right': 'right*'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style3: {
+					'phone type': {
+						'iphone': 'iphone*',
+						'android': 'android'
+					},
+					'orientation': {
+						'orient-left': 'left',
+						'orient-right': 'right*'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style4: {
+					'size': {
+						'-size': 'normal',
+						'fullscreen': 'fullscreen*',
+						'halfscreen': 'halfscreen'
+					},
+					'orientation': {
+						'orient-left': 'left*',
+						'orient-center': 'center',
+						'orient-right': 'right'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+				style5: {
+					'size': {
+						'-size': 'normal',
+						'fullscreen': 'fullscreen*',
+						'halfscreen': 'halfscreen'
+					},
+					'orientation': {
+						'orient-left': 'left*',
+						'orient-center': 'center',
+						'orient-right': 'right'
+					},
+					'content alignment': {
+						'content-align-left': 'left*',
+						'content-align-center': 'center',
+						'content-align-right': 'right'
+					},
+					'image position': {
+						'image-position-left': 'left',
+						'image-position-center': 'center*',
+						'image-position-right': 'right'
+					}
+				},
+			});
+
+		// Gallery.
+			$('.gallery').demo_controls({
+				style1: {
+					'size': {
+						'small': 'small',
+						'medium': 'medium*',
+						'big': 'big'
+					}
+				},
+				style2: {
+					'size': {
+						'small': 'small',
+						'medium': 'medium*',
+						'big': 'big'
+					}
+				},
+			}, {
+				target: 'previous',
+				palette: false
+			});
+
+		// Items.
+			$('.items').demo_controls({
+				style1: {
+					'size': {
+						'small': 'small',
+						'medium': 'medium*',
+						'big': 'big'
+					}
+				},
+				style2: {
+					'size': {
+						'small': 'small',
+						'medium': 'medium*',
+						'big': 'big'
+					}
+				},
+				style3: {
+					'size': {
+						'small': 'small',
+						'medium': 'medium*',
+						'big': 'big'
+					}
+				}
+			}, {
+				target: 'previous',
+				palette: false
+			});
+
+})(jQuery);

assets/js/jquery.scrollex.min.js

@@ -0,0 +1,2 @@
+/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */
+!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r<this.length;r++)t(this[r]).scrollex(l);return s}if(s.data("_scrollexId"))return s;var a,u,h,c,p;switch(a=i++,u=jQuery.extend({top:0,bottom:0,delay:0,mode:"default",enter:null,leave:null,initialize:null,terminate:null,scroll:null},l),u.mode){case"top":h=function(t,e,n,i,o){return t>=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n<this.length;n++)t(this[n]).unscrollex();return e}var i,l;return(i=e.data("_scrollexId"))?(l=o[i],window.clearTimeout(l.timeoutId),delete o[i],e.removeData("_scrollexId"),l.options.terminate&&l.options.terminate.apply(this),e):e}}(jQuery);

assets/js/jquery.scrolly.min.js

@@ -0,0 +1,2 @@
+/* jquery.scrolly v1.0.0-dev | (c) @ajlkn | MIT licensed */
+(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);

assets/js/main.js

@@ -0,0 +1,342 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+(function($) {
+
+	var	$window = $(window),
+		$body = $('body'),
+		$wrapper = $('#wrapper');
+
+	// Breakpoints.
+		breakpoints({
+			xlarge:   [ '1281px',  '1680px' ],
+			large:    [ '981px',   '1280px' ],
+			medium:   [ '737px',   '980px'  ],
+			small:    [ '481px',   '736px'  ],
+			xsmall:   [ '361px',   '480px'  ],
+			xxsmall:  [ null,      '360px'  ]
+		});
+
+	// Play initial animations on page load.
+		$window.on('load', function() {
+			window.setTimeout(function() {
+				$body.removeClass('is-preload');
+			}, 100);
+		});
+
+	// Browser fixes.
+
+		// IE: Flexbox min-height bug.
+			if (browser.name == 'ie')
+				(function() {
+
+					var flexboxFixTimeoutId;
+
+					$window.on('resize.flexbox-fix', function() {
+
+						var $x = $('.fullscreen');
+
+						clearTimeout(flexboxFixTimeoutId);
+
+						flexboxFixTimeoutId = setTimeout(function() {
+
+							if ($x.prop('scrollHeight') > $window.height())
+								$x.css('height', 'auto');
+							else
+								$x.css('height', '100vh');
+
+						}, 250);
+
+					}).triggerHandler('resize.flexbox-fix');
+
+				})();
+
+		// Object fit workaround.
+			if (!browser.canUse('object-fit'))
+				(function() {
+
+					$('.banner .image, .spotlight .image').each(function() {
+
+						var $this = $(this),
+							$img = $this.children('img'),
+							positionClass = $this.parent().attr('class').match(/image-position-([a-z]+)/);
+
+						// Set image.
+							$this
+								.css('background-image', 'url("' + $img.attr('src') + '")')
+								.css('background-repeat', 'no-repeat')
+								.css('background-size', 'cover');
+
+						// Set position.
+							switch (positionClass.length > 1 ? positionClass[1] : '') {
+
+								case 'left':
+									$this.css('background-position', 'left');
+									break;
+
+								case 'right':
+									$this.css('background-position', 'right');
+									break;
+
+								default:
+								case 'center':
+									$this.css('background-position', 'center');
+									break;
+
+							}
+
+						// Hide original.
+							$img.css('opacity', '0');
+
+					});
+
+				})();
+
+	// Smooth scroll.
+		$('.smooth-scroll').scrolly();
+		$('.smooth-scroll-middle').scrolly({ anchor: 'middle' });
+
+	// Wrapper.
+		$wrapper.children()
+			.scrollex({
+				top:		'30vh',
+				bottom:		'30vh',
+				initialize:	function() {
+					$(this).addClass('is-inactive');
+				},
+				terminate:	function() {
+					$(this).removeClass('is-inactive');
+				},
+				enter:		function() {
+					$(this).removeClass('is-inactive');
+				},
+				leave:		function() {
+
+					var $this = $(this);
+
+					if ($this.hasClass('onscroll-bidirectional'))
+						$this.addClass('is-inactive');
+
+				}
+			});
+
+	// Items.
+		$('.items')
+			.scrollex({
+				top:		'30vh',
+				bottom:		'30vh',
+				delay:		50,
+				initialize:	function() {
+					$(this).addClass('is-inactive');
+				},
+				terminate:	function() {
+					$(this).removeClass('is-inactive');
+				},
+				enter:		function() {
+					$(this).removeClass('is-inactive');
+				},
+				leave:		function() {
+
+					var $this = $(this);
+
+					if ($this.hasClass('onscroll-bidirectional'))
+						$this.addClass('is-inactive');
+
+				}
+			})
+			.children()
+				.wrapInner('<div class="inner"></div>');
+
+	// Gallery.
+		$('.gallery')
+			.wrapInner('<div class="inner"></div>')
+			.prepend(browser.mobile ? '' : '<div class="forward"></div><div class="backward"></div>')
+			.scrollex({
+				top:		'30vh',
+				bottom:		'30vh',
+				delay:		50,
+				initialize:	function() {
+					$(this).addClass('is-inactive');
+				},
+				terminate:	function() {
+					$(this).removeClass('is-inactive');
+				},
+				enter:		function() {
+					$(this).removeClass('is-inactive');
+				},
+				leave:		function() {
+
+					var $this = $(this);
+
+					if ($this.hasClass('onscroll-bidirectional'))
+						$this.addClass('is-inactive');
+
+				}
+			})
+			.children('.inner')
+				//.css('overflow', 'hidden')
+				.css('overflow-y', browser.mobile ? 'visible' : 'hidden')
+				.css('overflow-x', browser.mobile ? 'scroll' : 'hidden')
+				.scrollLeft(0);
+
+		// Style #1.
+			// ...
+
+		// Style #2.
+			$('.gallery')
+				.on('wheel', '.inner', function(event) {
+
+					var	$this = $(this),
+						delta = (event.originalEvent.deltaX * 10);
+
+					// Cap delta.
+						if (delta > 0)
+							delta = Math.min(25, delta);
+						else if (delta < 0)
+							delta = Math.max(-25, delta);
+
+					// Scroll.
+						$this.scrollLeft( $this.scrollLeft() + delta );
+
+				})
+				.on('mouseenter', '.forward, .backward', function(event) {
+
+					var $this = $(this),
+						$inner = $this.siblings('.inner'),
+						direction = ($this.hasClass('forward') ? 1 : -1);
+
+					// Clear move interval.
+						clearInterval(this._gallery_moveIntervalId);
+
+					// Start interval.
+						this._gallery_moveIntervalId = setInterval(function() {
+							$inner.scrollLeft( $inner.scrollLeft() + (5 * direction) );
+						}, 10);
+
+				})
+				.on('mouseleave', '.forward, .backward', function(event) {
+
+					// Clear move interval.
+						clearInterval(this._gallery_moveIntervalId);
+
+				});
+
+		// Lightbox.
+			$('.gallery.lightbox')
+				.on('click', 'a', function(event) {
+
+					var $a = $(this),
+						$gallery = $a.parents('.gallery'),
+						$modal = $gallery.children('.modal'),
+						$modalImg = $modal.find('img'),
+						href = $a.attr('href');
+
+					// Not an image? Bail.
+						if (!href.match(/\.(jpg|gif|png|mp4)$/))
+							return;
+
+					// Prevent default.
+						event.preventDefault();
+						event.stopPropagation();
+
+					// Locked? Bail.
+						if ($modal[0]._locked)
+							return;
+
+					// Lock.
+						$modal[0]._locked = true;
+
+					// Set src.
+						$modalImg.attr('src', href);
+
+					// Set visible.
+						$modal.addClass('visible');
+
+					// Focus.
+						$modal.focus();
+
+					// Delay.
+						setTimeout(function() {
+
+							// Unlock.
+								$modal[0]._locked = false;
+
+						}, 600);
+
+				})
+				.on('click', '.modal', function(event) {
+
+					var $modal = $(this),
+						$modalImg = $modal.find('img');
+
+					// Locked? Bail.
+						if ($modal[0]._locked)
+							return;
+
+					// Already hidden? Bail.
+						if (!$modal.hasClass('visible'))
+							return;
+
+					// Lock.
+						$modal[0]._locked = true;
+
+					// Clear visible, loaded.
+						$modal
+							.removeClass('loaded')
+
+					// Delay.
+						setTimeout(function() {
+
+							$modal
+								.removeClass('visible')
+
+							setTimeout(function() {
+
+								// Clear src.
+									$modalImg.attr('src', '');
+
+								// Unlock.
+									$modal[0]._locked = false;
+
+								// Focus.
+									$body.focus();
+
+							}, 475);
+
+						}, 125);
+
+				})
+				.on('keypress', '.modal', function(event) {
+
+					var $modal = $(this);
+
+					// Escape? Hide modal.
+						if (event.keyCode == 27)
+							$modal.trigger('click');
+
+				})
+				.prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>')
+					.find('img')
+						.on('load', function(event) {
+
+							var $modalImg = $(this),
+								$modal = $modalImg.parents('.modal');
+
+							setTimeout(function() {
+
+								// No longer visible? Bail.
+									if (!$modal.hasClass('visible'))
+										return;
+
+								// Set loaded.
+									$modal.addClass('loaded');
+
+							}, 275);
+
+						});
+
+})(jQuery);

assets/js/util.js

@@ -0,0 +1,587 @@
+(function($) {
+
+	/**
+	 * Generate an indented list of links from a nav. Meant for use with panel().
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.navList = function() {
+
+		var	$this = $(this);
+			$a = $this.find('a'),
+			b = [];
+
+		$a.each(function() {
+
+			var	$this = $(this),
+				indent = Math.max(0, $this.parents('li').length - 1),
+				href = $this.attr('href'),
+				target = $this.attr('target');
+
+			b.push(
+				'<a ' +
+					'class="link depth-' + indent + '"' +
+					( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
+					( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
+				'>' +
+					'<span class="indent-' + indent + '"></span>' +
+					$this.text() +
+				'</a>'
+			);
+
+		});
+
+		return b.join('');
+
+	};
+
+	/**
+	 * Panel-ify an element.
+	 * @param {object} userConfig User config.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.panel = function(userConfig) {
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).panel(userConfig);
+
+				return $this;
+
+			}
+
+		// Vars.
+			var	$this = $(this),
+				$body = $('body'),
+				$window = $(window),
+				id = $this.attr('id'),
+				config;
+
+		// Config.
+			config = $.extend({
+
+				// Delay.
+					delay: 0,
+
+				// Hide panel on link click.
+					hideOnClick: false,
+
+				// Hide panel on escape keypress.
+					hideOnEscape: false,
+
+				// Hide panel on swipe.
+					hideOnSwipe: false,
+
+				// Reset scroll position on hide.
+					resetScroll: false,
+
+				// Reset forms on hide.
+					resetForms: false,
+
+				// Side of viewport the panel will appear.
+					side: null,
+
+				// Target element for "class".
+					target: $this,
+
+				// Class to toggle.
+					visibleClass: 'visible'
+
+			}, userConfig);
+
+			// Expand "target" if it's not a jQuery object already.
+				if (typeof config.target != 'jQuery')
+					config.target = $(config.target);
+
+		// Panel.
+
+			// Methods.
+				$this._hide = function(event) {
+
+					// Already hidden? Bail.
+						if (!config.target.hasClass(config.visibleClass))
+							return;
+
+					// If an event was provided, cancel it.
+						if (event) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+					// Hide.
+						config.target.removeClass(config.visibleClass);
+
+					// Post-hide stuff.
+						window.setTimeout(function() {
+
+							// Reset scroll position.
+								if (config.resetScroll)
+									$this.scrollTop(0);
+
+							// Reset forms.
+								if (config.resetForms)
+									$this.find('form').each(function() {
+										this.reset();
+									});
+
+						}, config.delay);
+
+				};
+
+			// Vendor fixes.
+				$this
+					.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
+					.css('-webkit-overflow-scrolling', 'touch');
+
+			// Hide on click.
+				if (config.hideOnClick) {
+
+					$this.find('a')
+						.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
+
+					$this
+						.on('click', 'a', function(event) {
+
+							var $a = $(this),
+								href = $a.attr('href'),
+								target = $a.attr('target');
+
+							if (!href || href == '#' || href == '' || href == '#' + id)
+								return;
+
+							// Cancel original event.
+								event.preventDefault();
+								event.stopPropagation();
+
+							// Hide panel.
+								$this._hide();
+
+							// Redirect to href.
+								window.setTimeout(function() {
+
+									if (target == '_blank')
+										window.open(href);
+									else
+										window.location.href = href;
+
+								}, config.delay + 10);
+
+						});
+
+				}
+
+			// Event: Touch stuff.
+				$this.on('touchstart', function(event) {
+
+					$this.touchPosX = event.originalEvent.touches[0].pageX;
+					$this.touchPosY = event.originalEvent.touches[0].pageY;
+
+				})
+
+				$this.on('touchmove', function(event) {
+
+					if ($this.touchPosX === null
+					||	$this.touchPosY === null)
+						return;
+
+					var	diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
+						diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
+						th = $this.outerHeight(),
+						ts = ($this.get(0).scrollHeight - $this.scrollTop());
+
+					// Hide on swipe?
+						if (config.hideOnSwipe) {
+
+							var result = false,
+								boundary = 20,
+								delta = 50;
+
+							switch (config.side) {
+
+								case 'left':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
+									break;
+
+								case 'right':
+									result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
+									break;
+
+								case 'top':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
+									break;
+
+								case 'bottom':
+									result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
+									break;
+
+								default:
+									break;
+
+							}
+
+							if (result) {
+
+								$this.touchPosX = null;
+								$this.touchPosY = null;
+								$this._hide();
+
+								return false;
+
+							}
+
+						}
+
+					// Prevent vertical scrolling past the top or bottom.
+						if (($this.scrollTop() < 0 && diffY < 0)
+						|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
+
+							event.preventDefault();
+							event.stopPropagation();
+
+						}
+
+				});
+
+			// Event: Prevent certain events inside the panel from bubbling.
+				$this.on('click touchend touchstart touchmove', function(event) {
+					event.stopPropagation();
+				});
+
+			// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
+				$this.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.removeClass(config.visibleClass);
+
+				});
+
+		// Body.
+
+			// Event: Hide panel on body click/tap.
+				$body.on('click touchend', function(event) {
+					$this._hide(event);
+				});
+
+			// Event: Toggle.
+				$body.on('click', 'a[href="#' + id + '"]', function(event) {
+
+					event.preventDefault();
+					event.stopPropagation();
+
+					config.target.toggleClass(config.visibleClass);
+
+				});
+
+		// Window.
+
+			// Event: Hide on ESC.
+				if (config.hideOnEscape)
+					$window.on('keydown', function(event) {
+
+						if (event.keyCode == 27)
+							$this._hide(event);
+
+					});
+
+		return $this;
+
+	};
+
+	/**
+	 * Apply "placeholder" attribute polyfill to one or more forms.
+	 * @return {jQuery} jQuery object.
+	 */
+	$.fn.placeholder = function() {
+
+		// Browser natively supports placeholders? Bail.
+			if (typeof (document.createElement('input')).placeholder != 'undefined')
+				return $(this);
+
+		// No elements?
+			if (this.length == 0)
+				return $this;
+
+		// Multiple elements?
+			if (this.length > 1) {
+
+				for (var i=0; i < this.length; i++)
+					$(this[i]).placeholder();
+
+				return $this;
+
+			}
+
+		// Vars.
+			var $this = $(this);
+
+		// Text, TextArea.
+			$this.find('input[type=text],textarea')
+				.each(function() {
+
+					var i = $(this);
+
+					if (i.val() == ''
+					||  i.val() == i.attr('placeholder'))
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('blur', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == '')
+						i
+							.addClass('polyfill-placeholder')
+							.val(i.attr('placeholder'));
+
+				})
+				.on('focus', function() {
+
+					var i = $(this);
+
+					if (i.attr('name').match(/-polyfill-field$/))
+						return;
+
+					if (i.val() == i.attr('placeholder'))
+						i
+							.removeClass('polyfill-placeholder')
+							.val('');
+
+				});
+
+		// Password.
+			$this.find('input[type=password]')
+				.each(function() {
+
+					var i = $(this);
+					var x = $(
+								$('<div>')
+									.append(i.clone())
+									.remove()
+									.html()
+									.replace(/type="password"/i, 'type="text"')
+									.replace(/type=password/i, 'type=text')
+					);
+
+					if (i.attr('id') != '')
+						x.attr('id', i.attr('id') + '-polyfill-field');
+
+					if (i.attr('name') != '')
+						x.attr('name', i.attr('name') + '-polyfill-field');
+
+					x.addClass('polyfill-placeholder')
+						.val(x.attr('placeholder')).insertAfter(i);
+
+					if (i.val() == '')
+						i.hide();
+					else
+						x.hide();
+
+					i
+						.on('blur', function(event) {
+
+							event.preventDefault();
+
+							var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+							if (i.val() == '') {
+
+								i.hide();
+								x.show();
+
+							}
+
+						});
+
+					x
+						.on('focus', function(event) {
+
+							event.preventDefault();
+
+							var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
+
+							x.hide();
+
+							i
+								.show()
+								.focus();
+
+						})
+						.on('keypress', function(event) {
+
+							event.preventDefault();
+							x.val('');
+
+						});
+
+				});
+
+		// Events.
+			$this
+				.on('submit', function() {
+
+					$this.find('input[type=text],input[type=password],textarea')
+						.each(function(event) {
+
+							var i = $(this);
+
+							if (i.attr('name').match(/-polyfill-field$/))
+								i.attr('name', '');
+
+							if (i.val() == i.attr('placeholder')) {
+
+								i.removeClass('polyfill-placeholder');
+								i.val('');
+
+							}
+
+						});
+
+				})
+				.on('reset', function(event) {
+
+					event.preventDefault();
+
+					$this.find('select')
+						.val($('option:first').val());
+
+					$this.find('input,textarea')
+						.each(function() {
+
+							var i = $(this),
+								x;
+
+							i.removeClass('polyfill-placeholder');
+
+							switch (this.type) {
+
+								case 'submit':
+								case 'reset':
+									break;
+
+								case 'password':
+									i.val(i.attr('defaultValue'));
+
+									x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
+
+									if (i.val() == '') {
+										i.hide();
+										x.show();
+									}
+									else {
+										i.show();
+										x.hide();
+									}
+
+									break;
+
+								case 'checkbox':
+								case 'radio':
+									i.attr('checked', i.attr('defaultValue'));
+									break;
+
+								case 'text':
+								case 'textarea':
+									i.val(i.attr('defaultValue'));
+
+									if (i.val() == '') {
+										i.addClass('polyfill-placeholder');
+										i.val(i.attr('placeholder'));
+									}
+
+									break;
+
+								default:
+									i.val(i.attr('defaultValue'));
+									break;
+
+							}
+						});
+
+				});
+
+		return $this;
+
+	};
+
+	/**
+	 * Moves elements to/from the first positions of their respective parents.
+	 * @param {jQuery} $elements Elements (or selector) to move.
+	 * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
+	 */
+	$.prioritize = function($elements, condition) {
+
+		var key = '__prioritize';
+
+		// Expand $elements if it's not already a jQuery object.
+			if (typeof $elements != 'jQuery')
+				$elements = $($elements);
+
+		// Step through elements.
+			$elements.each(function() {
+
+				var	$e = $(this), $p,
+					$parent = $e.parent();
+
+				// No parent? Bail.
+					if ($parent.length == 0)
+						return;
+
+				// Not moved? Move it.
+					if (!$e.data(key)) {
+
+						// Condition is false? Bail.
+							if (!condition)
+								return;
+
+						// Get placeholder (which will serve as our point of reference for when this element needs to move back).
+							$p = $e.prev();
+
+							// Couldn't find anything? Means this element's already at the top, so bail.
+								if ($p.length == 0)
+									return;
+
+						// Move element to top of parent.
+							$e.prependTo($parent);
+
+						// Mark element as moved.
+							$e.data(key, $p);
+
+					}
+
+				// Moved already?
+					else {
+
+						// Condition is true? Bail.
+							if (condition)
+								return;
+
+						$p = $e.data(key);
+
+						// Move element back to its original location (using our placeholder).
+							$e.insertAfter($p);
+
+						// Unmark element as moved.
+							$e.removeData(key);
+
+					}
+
+			});
+
+	};
+
+})(jQuery);

assets/sass/base/_page.scss

@@ -0,0 +1,48 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Basic */
+
+	// MSIE: Required for IEMobile.
+		@-ms-viewport {
+			width: device-width;
+		}
+
+	// MSIE: Prevents scrollbar from overlapping content.
+		body {
+			-ms-overflow-style: scrollbar;
+		}
+
+	// Ensures page width is always >=320px.
+		@include breakpoint('<=xsmall') {
+			html, body {
+				min-width: 320px;
+			}
+		}
+
+	// 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 {
+		background: _palette(bg);
+
+		// Stops initial animations until page loads.
+			&.is-preload {
+				*, *:before, *:after {
+					@include vendor('animation', 'none !important');
+					@include vendor('transition', 'none !important');
+				}
+			}
+
+	}

assets/sass/base/_reset.scss

@@ -0,0 +1,77 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 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;
+	}

assets/sass/base/_typography.scss

@@ -0,0 +1,237 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Type */
+
+	html {
+		font-size: 18pt;
+
+		@include breakpoint('<=xlarge') {
+			font-size: 14pt;
+		}
+
+		@include breakpoint('<=large') {
+			font-size: 12pt;
+		}
+
+		@include breakpoint('<=small') {
+			font-size: 11pt;
+		}
+
+		@include breakpoint('<=xxsmall') {
+			font-size: 10pt;
+		}
+	}
+
+	body {
+		background-color: _palette(bg);
+		color: _palette(fg);
+	}
+
+	body, input, select, textarea {
+		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');
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	strong, b {
+		font-weight: _font(weight-bold);
+	}
+
+	em, i {
+		font-style: italic;
+	}
+
+	p {
+		margin: 0 0 _size(element-margin) 0;
+
+		&.major {
+			font-size: 1.25rem;
+		}
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		font-weight: _font(weight);
+		line-height: 1.375;
+		letter-spacing: _font(kerning);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+		a {
+			color: inherit;
+			text-decoration: none;
+		}
+	}
+
+	h1 {
+		font-size: 3.5rem;
+		line-height: 1.2;
+	}
+
+	h2 {
+		font-size: 2.25rem;
+	}
+
+	h3 {
+		font-size: 1.5rem;
+	}
+
+	h4 {
+		font-size: 1.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 (_size(border-width) * 4);
+		font-style: italic;
+		margin: 0 0 _size(element-margin) 0;
+		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+	}
+
+	code {
+		border-radius: _size(border-radius);
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0.25rem;
+		padding: 0.25rem 0.325rem;
+	}
+
+	pre {
+		-webkit-overflow-scrolling: touch;
+		font-family: _font(family-fixed);
+		font-size: 0.9em;
+		margin: 0 0 _size(element-margin) 0;
+
+		code {
+			display: block;
+			line-height: 1.5;
+			padding: 0.75rem 1rem;
+			overflow-x: auto;
+		}
+	}
+
+	hr {
+		border: 0;
+		border-bottom: solid _size(border-width);
+		margin: (_size(element-margin) * 1.25) 0;
+
+		&.major {
+			margin: (_size(element-margin) * 1.75) 0;
+		}
+	}
+
+	.align-left {
+		text-align: left;
+	}
+
+	.align-center {
+		text-align: center;
+	}
+
+	.align-right {
+		text-align: right;
+	}
+
+	.footerspacer {
+		padding-left: 15px;
+		padding-right: 15px;
+	}
+
+	@include breakpoint('<=small') {
+		p {
+			&.major {
+				font-size: 1.1rem;
+			}
+		}
+
+		h1 {
+			font-size: 2.5rem;
+		}
+
+		h2 {
+			font-size: 2rem;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+		}
+
+		h4 {
+			font-size: 1rem;
+		}
+	}
+
+	@mixin color-typography($p: null) {
+
+		@if $p != null {
+			background-color: _palette($p, bg);
+			color: _palette($p, fg);
+		}
+
+		input, select, textarea {
+			color: _palette($p, fg-bold);
+		}
+
+		a {
+			color: _palette($p, fg-bold);
+
+			&:hover {
+				color: _palette($p, accent);
+			}
+		}
+
+		strong, b {
+			color: _palette($p, fg-bold);
+		}
+
+		h1, h2, h3, h4, h5, h6 {
+			color: _palette($p, fg-bold);
+		}
+
+		blockquote {
+			border-left-color: _palette($p, border);
+		}
+
+		code {
+			background: _palette($p, border-bg);
+			border-color: _palette($p, border);
+		}
+
+		hr {
+			border-bottom-color: _palette($p, border);
+		}
+	}
+
+	@include color-typography;

assets/sass/components/_actions.scss

@@ -0,0 +1,102 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Actions */
+
+	ul.actions {
+		@include vendor('display', 'flex');
+		cursor: default;
+		list-style: none;
+		margin-left: (_size(element-margin) * -0.5);
+		padding-left: 0;
+
+		li {
+			padding: 0 0 0 (_size(element-margin) * 0.5);
+			vertical-align: middle;
+		}
+
+		&.special {
+			@include vendor('justify-content', 'center');
+			width: 100%;
+			margin-left: 0;
+
+			li {
+				&:first-child {
+					padding-left: 0;
+				}
+			}
+		}
+
+		&.stacked {
+			@include vendor('flex-direction', 'column');
+			margin-left: 0;
+
+			li {
+				padding: (_size(element-margin) * 0.65) 0 0 0;
+
+				&:first-child {
+					padding-top: 0;
+				}
+			}
+		}
+
+		&.fit {
+			width: calc(100% + #{_size(element-margin) * 0.5});
+
+			li {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+				width: 100%;
+
+				> * {
+					width: 100%;
+				}
+			}
+
+			&.stacked {
+				width: 100%;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			&:not(.fixed) {
+				@include vendor('flex-direction', 'column');
+				margin-left: 0;
+				width: 100% !important;
+
+				li {
+					@include vendor('flex-grow', '1');
+					@include vendor('flex-shrink', '1');
+					padding: (_size(element-margin) * 0.5) 0 0 0;
+					text-align: center;
+					width: 100%;
+
+					> * {
+						width: 100%;
+					}
+
+					&:first-child {
+						padding-top: 0;
+					}
+
+					input[type="submit"],
+					input[type="reset"],
+					input[type="button"],
+					button,
+					.button {
+						width: 100%;
+
+						&.icon {
+							&:before {
+								margin-left: -0.5rem;
+							}
+						}
+					}
+				}
+			}
+		}
+	}

assets/sass/components/_banner.scss

@@ -0,0 +1,991 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Banner (transitions) */
+
+	.banner {
+
+		// Mixin.
+			@mixin transition-banner($event) {
+				$x: null;
+				$y: null;
+
+				@if ($event == 'load') {
+					$x: 'body.is-preload &';
+					$y: _duration(on-load);
+				}
+				@else if ($event == 'scroll') {
+					$x: '&.is-inactive';
+					$y: _duration(on-scroll);
+				}
+
+				// Content.
+					&.on#{$event}-content-fade-up {
+						.content {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'translateY(1rem)');
+								opacity: 0;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-down {
+						.content {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'translateY(-1rem)');
+								opacity: 0;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-left {
+						.content {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'translateX(1rem)');
+								opacity: 0;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-right {
+						.content {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'translateX(-1rem)');
+								opacity: 0;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-in {
+						.content {
+							@include vendor('transition', 'opacity #{$y} ease-in-out');
+						}
+
+						#{$x} {
+							.content {
+								opacity: 0;
+							}
+						}
+					}
+
+				// Image.
+					&.on#{$event}-image-fade-up {
+						.image {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+								@include vendor('transition-delay', '#{$y * 0.75}');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'translateY(1rem)');
+								opacity: 0;
+
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-down {
+						.image {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+								@include vendor('transition-delay', '#{$y * 0.75}');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'translateY(-1rem)');
+								opacity: 0;
+
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-left {
+						.image {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+								@include vendor('transition-delay', '#{$y * 0.75}');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'translateX(1rem)');
+								opacity: 0;
+
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-right {
+						.image {
+							@include vendor('transition', (
+								'opacity #{$y} ease-in-out',
+								'transform #{$y} ease-in-out'
+							));
+
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+								@include vendor('transition-delay', '#{$y * 0.75}');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'translateX(-1rem)');
+								opacity: 0;
+
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-in {
+						.image {
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+							}
+						}
+
+						#{$x} {
+							.image {
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+
+			}
+
+		// On Load.
+			@include transition-banner('load');
+
+		// On Scroll.
+			@include transition-banner('scroll');
+
+	}
+
+/* Banner (style1) */
+
+	.banner.style1 {
+		@include vendor('align-items', 'stretch');
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'row');
+		@include vendor('justify-content', 'flex-end');
+		position: relative;
+		text-align: left;
+		overflow-x: hidden;
+
+		.content {
+			@include padding(_size(padding, default), _size(padding, default));
+			@include vendor('align-self', 'center');
+			@include vendor('flex-grow', '1');
+			@include vendor('flex-shrink', '1');
+			width: 50%;
+			max-width: (_size(inner) * 0.75);
+			margin: 0 auto;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			border-radius: 0;
+			width: 50%;
+
+			img {
+				@include vendor('object-fit', 'cover');
+				@include vendor('object-position', 'center');
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 0;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			.content {
+				@include padding(_size(padding, xlarge), _size(padding, xlarge));
+			}
+		}
+
+		@include breakpoint('<=large') {
+			.content {
+				@include padding(_size(padding, large), _size(padding, large));
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			.content {
+				@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
+			}
+		}
+
+		@include breakpoint('<=small') {
+			.content {
+				@include padding(_size(padding, small) * 1.25, _size(padding, small));
+			}
+		}
+
+		@include orientation(portrait) {
+			@include vendor('flex-direction', 'column-reverse');
+			text-align: center;
+
+			.content {
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				width: 100%;
+				max-width: 100%;
+			}
+
+			.image {
+				width: 100%;
+				max-width: 100%;
+				height: 45vh;
+			}
+		}
+
+		// Modifiers.
+
+			// Size.
+				&.fullscreen {
+					min-height: 100vh;
+
+					@include orientation(portrait) {
+						.content {
+							min-height: 50vh;
+						}
+
+						.image {
+							height: 50vh;
+						}
+					}
+				}
+
+			// Orientation.
+				&.orient-left {
+					// ...
+				}
+
+				&.orient-right {
+					@include vendor('flex-direction', 'row-reverse');
+
+					@include orientation(portrait) {
+						@include vendor('flex-direction', 'column-reverse');
+					}
+				}
+
+			// Content Alignment.
+				&.content-align-left {
+					// ...
+				}
+
+				&.content-align-center {
+					text-align: center;
+				}
+
+				&.content-align-right {
+					text-align: right;
+
+					@include orientation(portrait) {
+						text-align: center;
+					}
+				}
+
+			// Image Position.
+				&.image-position-left {
+					.image {
+						img {
+							@include vendor('object-position', 'left');
+						}
+					}
+				}
+
+				&.image-position-center {
+					.image {
+						img {
+							// ...
+						}
+					}
+				}
+
+				&.image-position-right {
+					.image {
+						img {
+							@include vendor('object-position', 'right');
+						}
+					}
+				}
+
+	}
+
+/* Banner (style2) */
+
+	.banner.style2 {
+		@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('justify-content', 'center');
+		background-color: inherit;
+		position: relative;
+		text-align: center;
+		overflow-x: hidden;
+
+		.content {
+			@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
+			position: relative;
+			width: (_size(inner) * 0.625);
+			max-width: 100%;
+			background-color: inherit;
+			border-radius: _size(border-radius-alt);
+			margin-bottom: _size(element-margin);
+			z-index: 1;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			border-radius: 0;
+
+			img {
+				@include vendor('object-fit', 'cover');
+				@include vendor('object-position', 'center');
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 0;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
+
+			.content {
+				@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
+			}
+		}
+
+		@include breakpoint('<=large') {
+			@include padding(_size(padding, large), _size(padding, large) * 0.75);
+
+			.content {
+				@include padding(_size(padding, large), _size(padding, large) * 0.75);
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			@include padding(_size(padding, medium), _size(padding, medium));
+
+			.content {
+				@include padding(_size(padding, medium) * 1.25, _size(padding, medium) * 0.75);
+			}
+		}
+
+		@include breakpoint('<=small') {
+			@include padding(_size(padding, small), _size(padding, small));
+
+			.content {
+				@include padding(_size(padding, small) * 1.25, _size(padding, small) * 0.75);
+			}
+		}
+
+		// Modifiers.
+
+			// Size.
+				&.fullscreen {
+					min-height: 100vh;
+				}
+
+			// Orientation.
+				&.orient-left {
+					@include vendor('justify-content', 'flex-start');
+					padding-left: 0;
+
+					.content {
+						border-top-left-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+				}
+
+				&.orient-center {
+					// ...
+				}
+
+				&.orient-right {
+					@include vendor('justify-content', 'flex-end');
+					padding-right: 0;
+
+					.content {
+						border-top-right-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+				}
+
+			// Content Alignment.
+				&.content-align-left {
+					text-align: left;
+				}
+
+				&.content-align-center {
+					// ...
+				}
+
+				&.content-align-right {
+					text-align: right;
+				}
+
+			// Image Position.
+				&.image-position-left {
+					.image {
+						img {
+							@include vendor('object-position', 'left');
+						}
+					}
+				}
+
+				&.image-position-center {
+					.image {
+						img {
+							// ...
+						}
+					}
+				}
+
+				&.image-position-right {
+					.image {
+						img {
+							@include vendor('object-position', 'right');
+						}
+					}
+				}
+
+	}
+
+/* Banner (style3) */
+
+	.banner.style3 {
+		$image-size: 21rem;
+		$content-size: (_size(inner) * 0.875) - $image-size - (_size(element-margin) * 1.75);
+
+		@include padding(_size(padding, default), _size(padding, default));
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'row-reverse');
+		@include vendor('justify-content', 'center');
+		position: relative;
+		text-align: left;
+		overflow-x: hidden;
+
+		.content {
+			width: $content-size;
+			max-width: 100%;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			width: $image-size;
+			height: $image-size;
+			border-radius: 100%;
+			margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0;
+
+			img {
+				@include vendor('object-fit', 'cover');
+				@include vendor('object-position', 'center');
+				display: block;
+				width: 100%;
+				height: 100%;
+				border-radius: 100%;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			@include padding(_size(padding, xlarge), _size(padding, xlarge));
+		}
+
+		@include breakpoint('<=large') {
+			@include padding(_size(padding, large), _size(padding, large));
+		}
+
+		@include breakpoint('<=medium') {
+			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
+
+			.image {
+				width: ($image-size * 0.875);
+				height: ($image-size * 0.875);
+			}
+		}
+
+		@include breakpoint('<=small') {
+			@include padding(_size(padding, small) * 1.25, _size(padding, small));
+			@include vendor('align-items', 'flex-start');
+
+			.image {
+				width: ($image-size * 0.75);
+				height: ($image-size * 0.75);
+				margin: 0 (_size(element-margin) * 1) _size(element-margin) 0;
+			}
+		}
+
+		@include orientation(portrait) {
+			@include vendor('align-items', 'center');
+			@include vendor('flex-direction', 'column-reverse');
+			text-align: center;
+
+			.content {
+				width: 34rem;
+				max-width: 100%;
+			}
+
+			.image {
+				margin-right: 0;
+			}
+		}
+
+		// Modifiers.
+
+			// Size.
+				&.fullscreen {
+					min-height: 100vh;
+				}
+
+			// Orientation.
+				&.orient-left {
+					@include vendor('flex-direction', 'row');
+
+					.image {
+						margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75);
+					}
+
+					@include breakpoint('<=small') {
+						.image {
+							margin: 0 0 _size(element-margin) (_size(element-margin) * 1);
+						}
+					}
+
+					@include orientation(portrait) {
+						@include vendor('flex-direction', 'column-reverse');
+
+						.image {
+							margin-left: 0;
+						}
+					}
+				}
+
+				&.orient-right {
+					// ...
+				}
+
+			// Content Alignment.
+				&.content-align-left {
+					// ...
+				}
+
+				&.content-align-center {
+					text-align: center;
+				}
+
+				&.content-align-right {
+					text-align: right;
+				}
+
+			// Image Position.
+				&.image-position-left {
+					.image {
+						img {
+							@include vendor('object-position', 'left');
+						}
+					}
+				}
+
+				&.image-position-center {
+					// ...
+				}
+
+				&.image-position-right {
+					.image {
+						img {
+							@include vendor('object-position', 'right');
+						}
+					}
+				}
+
+	}
+
+/* Banner (style4) */
+
+	.banner.style4 {
+		$image-width: 13rem;
+		$content-size: (_size(inner) * 0.75) - $image-width - (_size(element-margin) * 1.75);
+
+		@include padding(_size(padding, default), _size(padding, default));
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('flex-direction', 'row-reverse');
+		@include vendor('justify-content', 'center');
+		position: relative;
+		text-align: left;
+		overflow-x: hidden;
+
+		.content {
+			width: $content-size;
+			max-width: 100%;
+		}
+
+		.image {
+			@include phone($image-width);
+			margin-right: (_size(element-margin) * 1.75);
+		}
+
+		@include breakpoint('<=xlarge') {
+			@include padding(_size(padding, xlarge), _size(padding, xlarge));
+		}
+
+		@include breakpoint('<=large') {
+			@include padding(_size(padding, large), _size(padding, large));
+		}
+
+		@include breakpoint('<=medium') {
+			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
+
+			.image {
+				@include resize-phone($image-width, 0.875);
+			}
+		}
+
+		@include breakpoint('<=small') {
+			@include padding(_size(padding, small) * 1.25, _size(padding, small));
+			@include vendor('align-items', 'flex-start');
+
+			.image {
+				@include resize-phone($image-width, 0.625);
+			}
+		}
+
+		@include orientation(portrait) {
+			@include vendor('align-items', 'center');
+			@include vendor('flex-direction', 'column-reverse');
+			text-align: center;
+
+			.content {
+				width: 34rem;
+				max-width: 100%;
+			}
+
+			.image {
+				margin-right: 0;
+				margin-left: 0;
+			}
+		}
+
+		// Modifiers.
+
+			// Size.
+				&.fullscreen {
+					min-height: 100vh;
+				}
+
+			// Variant.
+				&.iphone {
+					// ...
+				}
+
+				&.android {
+					// ...
+				}
+
+			// Orientation.
+				&.orient-left {
+					@include vendor('flex-direction', 'row');
+
+					.image {
+						margin-right: 0;
+						margin-left: (_size(element-margin) * 1.75);
+					}
+
+					@include orientation(portrait) {
+						@include vendor('flex-direction', 'column-reverse');
+
+						.image {
+							margin-right: 0;
+							margin-left: 0;
+						}
+					}
+				}
+
+				&.orient-right {
+					// ...
+				}
+
+			// Content Alignment.
+				&.content-align-left {
+					// ...
+				}
+
+				&.content-align-center {
+					text-align: center;
+				}
+
+				&.content-align-right {
+					text-align: right;
+				}
+
+			// Image Position.
+				&.image-position-left {
+					.image {
+						img {
+							@include vendor('object-position', 'left');
+						}
+					}
+				}
+
+				&.image-position-center {
+					// ...
+				}
+
+				&.image-position-right {
+					.image {
+						img {
+							@include vendor('object-position', 'right');
+						}
+					}
+				}
+
+	}
+
+/* Banner (style5) */
+
+	.banner.style5 {
+		@include padding(_size(padding, default), _size(padding, default));
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('justify-content', 'center');
+		background-color: inherit;
+		position: relative;
+		text-align: center;
+		overflow-x: hidden;
+
+		.content {
+			position: relative;
+			width: (_size(inner) * 0.625);
+			max-width: 100%;
+			margin-bottom: _size(element-margin);
+			z-index: 1;
+		}
+
+		.image {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			border-radius: 0;
+			opacity: _misc(overlay-opacity);
+
+			img {
+				@include vendor('object-fit', 'cover');
+				@include vendor('object-position', 'center');
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 0;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			@include padding(_size(padding, xlarge), _size(padding, xlarge));
+		}
+
+		@include breakpoint('<=large') {
+			@include padding(_size(padding, large), _size(padding, large));
+		}
+
+		@include breakpoint('<=medium') {
+			@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
+		}
+
+		@include breakpoint('<=small') {
+			@include padding(_size(padding, small) * 1.25, _size(padding, small));
+		}
+
+		// Modifiers.
+
+			// Size.
+				&.fullscreen {
+					min-height: 100vh;
+				}
+
+			// Content Alignment.
+				&.content-align-left {
+					text-align: left;
+				}
+
+				&.content-align-center {
+					// ...
+				}
+
+				&.content-align-right {
+					text-align: right;
+				}
+
+			// Image Position.
+				&.image-position-left {
+					.image {
+						img {
+							@include vendor('object-position', 'left');
+						}
+					}
+				}
+
+				&.image-position-center {
+					// ...
+				}
+
+				&.image-position-right {
+					.image {
+						img {
+							@include vendor('object-position', 'right');
+						}
+					}
+				}
+
+	}
+
+// Mixin
+
+	@mixin color-banner($p: null) {
+		.banner {
+			.image {
+				background-color: transparentize(_palette($p, fg-bold), 0.875);
+			}
+
+			@if ($p != 'invert') {
+				&.invert {
+					.image {
+						background-color: transparentize(_palette(invert, fg-bold), 0.875);
+					}
+				}
+			}
+		}
+
+		.banner.style4 {
+			.image {
+				@include color-phone($p);
+			}
+
+			// Variant.
+				&.iphone {
+					.image {
+						@include color-phone-variant('iphone', $p);
+					}
+				}
+
+				&.android {
+					.image {
+						@include color-phone-variant('android', $p);
+					}
+				}
+
+			@if ($p != 'invert') {
+				&.invert {
+					.image {
+						@include color-phone(invert);
+					}
+
+					// Variant.
+						&.iphone {
+							.image {
+								@include color-phone-variant('iphone', invert);
+							}
+						}
+
+						&.android {
+							.image {
+								@include color-phone-variant('android', invert);
+							}
+						}
+
+				}
+			}
+		}
+	}
+
+	@include color-banner;

assets/sass/components/_box.scss

@@ -0,0 +1,35 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Box */
+
+	.box {
+		border-radius: _size(border-radius);
+		border: solid _size(border-width);
+		margin-bottom: _size(element-margin);
+		padding: 1.5rem;
+
+		> :last-child,
+		> :last-child > :last-child,
+		> :last-child > :last-child > :last-child {
+			margin-bottom: 0;
+		}
+
+		&.alt {
+			border: 0;
+			border-radius: 0;
+			padding: 0;
+		}
+	}
+
+	@mixin color-box($p: null) {
+ 		.box {
+ 			border-color: _palette($p, border);
+ 		}
+	}
+
+	@include color-box;

assets/sass/components/_button.scss

@@ -0,0 +1,113 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'box-shadow #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		border: 0;
+		cursor: pointer;
+		display: inline-block;
+		font-weight: _font(weight-bold);
+		letter-spacing: _font(kerning-alt);
+		text-align: center;
+		text-decoration: none;
+		text-transform: uppercase;
+		white-space: nowrap;
+		font-size: 0.75rem;
+		max-width: 20rem;
+		height: 3.75em;
+		line-height: 3.75em;
+		border-radius: 3.75em;
+		padding: 0 2.5em;
+		text-overflow: ellipsis;
+		overflow: hidden;
+
+		&.icon {
+			&:before {
+				margin-right: 0.5rem;
+			}
+		}
+
+		&.fit {
+			width: 100%;
+		}
+
+		&.small {
+			font-size: 0.6rem;
+			height: 3.325em;
+			line-height: 3.325em;
+			border-radius: 3.325em;
+			padding: 0 2em;
+		}
+
+		&.large {
+			font-size: 0.8rem;
+			height: 4em;
+			line-height: 4em;
+			border-radius: 4em;
+			padding: 0 3em;
+		}
+
+		&.wide {
+			min-width: 14em;
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}
+
+	@mixin color-button($p: null) {
+		input[type="submit"],
+		input[type="reset"],
+		input[type="button"],
+		button,
+		.button {
+			background-color: transparent;
+			box-shadow: inset 0 0 0 _size(border-width) _palette($p, border);
+			color: _palette($p, fg-bold) !important;
+
+			&:hover {
+				box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
+				color: _palette($p, accent) !important;
+			}
+
+			&:active {
+				background-color: transparentize(_palette($p, accent), 0.8);
+				box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
+				color: _palette($p, accent) !important;
+			}
+
+			&.primary {
+				background-color: _palette($p, fg-bold);
+				box-shadow: none;
+				color: _palette($p, bg) !important;
+
+				&:hover {
+					background-color: _palette($p, accent);
+				}
+
+				&:active {
+					background-color: darken(_palette($p, accent), 12);
+				}
+			}
+		}
+	}
+
+	@include color-button;

assets/sass/components/_form.scss

@@ -0,0 +1,287 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Form */
+
+	form {
+		margin: 0 0 _size(element-margin) 0;
+
+		> :last-child {
+			margin-bottom: 0;
+		}
+
+		> .fields  {
+			$gutter: (_size(element-margin) * 0.75);
+
+			@include vendor('display', 'flex');
+			@include vendor('flex-wrap', 'wrap');
+			width: calc(100% + #{$gutter * 2});
+			margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+			> .field {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				padding: $gutter 0 0 $gutter;
+				width: calc(100% - #{$gutter * 1});
+
+				&.half {
+					width: calc(50% - #{$gutter * 0.5});
+				}
+
+				&.third {
+					width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
+				}
+
+				&.quarter {
+					width: calc(25% - #{$gutter * 0.25});
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			> .fields {
+				$gutter: (_size(element-margin) * 0.75);
+
+				width: calc(100% + #{$gutter * 2});
+				margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
+
+				> .field {
+					padding: $gutter 0 0 $gutter;
+					width: calc(100% - #{$gutter * 1});
+
+					&.half {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.third {
+						width: calc(100% - #{$gutter * 1});
+					}
+
+					&.quarter {
+						width: calc(100% - #{$gutter * 1});
+					}
+				}
+			}
+		}
+	}
+
+	label {
+		display: block;
+		font-size: 0.9rem;
+		font-weight: _font(weight-bold);
+		margin: 0 0 (_size(element-margin) * 0.5) 0;
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"],
+	select,
+	textarea {
+		@include vendor('appearance', 'none');
+		background-color: transparent;
+		border-radius: _size(border-radius);
+		border: none;
+		border: solid _size(border-width);
+		color: inherit;
+		display: block;
+		outline: 0;
+		padding: 0 0.825rem;
+		text-decoration: none;
+		width: 100%;
+
+		&:invalid {
+			box-shadow: none;
+		}
+	}
+
+	select {
+		background-size: 1.25rem;
+		background-repeat: no-repeat;
+		background-position: calc(100% - 1rem) center;
+		height: _size(element-height);
+		padding-right: _size(element-height);
+		text-overflow: ellipsis;
+
+		&:focus {
+			&::-ms-value {
+				background-color: transparent;
+			}
+		}
+
+		&::-ms-expand {
+			display: none;
+		}
+	}
+
+	input[type="text"],
+	input[type="password"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="search"],
+	input[type="url"],
+	select {
+		height: _size(element-height);
+	}
+
+	textarea {
+		padding: 0.75rem 1rem;
+	}
+
+	input[type="checkbox"],
+	input[type="radio"], {
+		@include vendor('appearance', 'none');
+		display: block;
+		float: left;
+		margin-right: -2rem;
+		opacity: 0;
+		width: 1rem;
+		z-index: -1;
+
+		& + label {
+			@include icon(false, solid);
+			@include vendor('user-select', 'none');
+			cursor: pointer;
+			display: inline-block;
+			font-size: 1rem;
+			font-weight: _font(weight);
+			padding-left: (_size(element-height) * 0.6) + 0.75rem;
+			padding-right: 0.75rem;
+			position: relative;
+			margin-bottom: 0;
+
+			&:before {
+				border-radius: _size(border-radius);
+				border: solid _size(border-width);
+				content: '';
+				display: inline-block;
+				font-size: 0.8rem;
+				height: (_size(element-height) * 0.6);
+				left: 0;
+				line-height: (_size(element-height) * 0.6);
+				position: absolute;
+				text-align: center;
+				top: 0;
+				width: (_size(element-height) * 0.6);
+			}
+		}
+
+		&:checked + label {
+			&:before {
+				content: '\f00c';
+			}
+		}
+	}
+
+	input[type="checkbox"] {
+		& + label {
+			&:before {
+				border-radius: _size(border-radius);
+			}
+		}
+	}
+
+	input[type="radio"] {
+		& + label {
+			&:before {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	::-webkit-input-placeholder {
+		opacity: 1.0;
+	}
+
+	:-moz-placeholder {
+		opacity: 1.0;
+	}
+
+	::-moz-placeholder {
+		opacity: 1.0;
+	}
+
+	:-ms-input-placeholder {
+		opacity: 1.0;
+	}
+
+	@mixin color-form($p: null) {
+		label {
+			color: _palette($p, fg-bold);
+		}
+
+		input[type="text"],
+		input[type="password"],
+		input[type="email"],
+		input[type="tel"],
+		input[type="search"],
+		input[type="url"],
+		select,
+		textarea {
+			border-color: _palette($p, border);
+
+			&:focus {
+				border-color: _palette($p, accent);
+				box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
+			}
+		}
+
+		select {
+			background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
+
+			option {
+				color: _palette(fg-bold);
+				background: _palette(bg);
+			}
+		}
+
+		input[type="checkbox"],
+		input[type="radio"], {
+			& + label {
+				color: _palette($p, fg);
+
+				&:before {
+					border-color: _palette($p, border);
+				}
+			}
+
+			&:checked + label {
+				&:before {
+					background-color: _palette($p, fg-bold);
+					border-color: _palette($p, fg-bold);
+					color: _palette($p, bg);
+				}
+			}
+
+			&:focus + label {
+				&:before {
+					border-color: _palette($p, accent);
+					box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
+				}
+			}
+		}
+
+		::-webkit-input-placeholder {
+			color: _palette($p, fg-light) !important;
+		}
+
+		:-moz-placeholder {
+			color: _palette($p, fg-light) !important;
+		}
+
+		::-moz-placeholder {
+			color: _palette($p, fg-light) !important;
+		}
+
+		:-ms-input-placeholder {
+			color: _palette($p, fg-light) !important;
+		}
+	}
+
+	@include color-form;

assets/sass/components/_gallery.scss

@@ -0,0 +1,617 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Gallery (transitions) */
+
+	.gallery {
+
+		// Mixin.
+			@mixin transition-gallery($event) {
+				$x: null;
+				$y: null;
+
+				@if ($event == 'load') {
+					$x: 'body.is-preload &';
+					$y: _duration(on-load);
+				}
+				@else if ($event == 'scroll') {
+					$x: '&.is-inactive';
+					$y: _duration(on-scroll);
+				}
+
+				&.on#{$event}-fade-in {
+					article {
+						.image {
+							img {
+								@include vendor('transition', 'opacity #{$y} ease-in-out');
+								@include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}');
+							}
+						}
+
+						@for $i from 0 through _misc(gallery-limit) {
+							&:nth-child(#{$i + 1}) {
+								.image {
+									img {
+										@include vendor('transition-delay', '#{$i * _duration(gallery-delay)}');
+									}
+								}
+							}
+						}
+					}
+
+					#{$x} {
+						article {
+							.image {
+								img {
+									opacity: 0;
+								}
+							}
+						}
+					}
+				}
+			}
+
+		// On Load.
+			@include transition-gallery('load');
+
+		// On Scroll.
+			@include transition-gallery('scroll');
+
+	}
+
+/* Gallery (style1) */
+
+	.gallery.style1 {
+		@include color-typography(invert);
+		@include color-button(invert);
+		@include vendor('align-items', 'center');
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		@include vendor('justify-content', 'center');
+		position: relative;
+		width: 100%;
+		background-color: transparent;
+
+		> .forward, >.backward {
+			display: none;
+		}
+
+		> .inner {
+			@include vendor('align-items', 'inherit');
+			@include vendor('display', 'inherit');
+			@include vendor('flex-wrap', 'inherit');
+			@include vendor('justify-content', 'inherit');
+		}
+
+		article {
+			overflow: hidden;
+			position: relative;
+			width: 25%;
+
+			.image {
+				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+				display: block;
+				width: 100%;
+				border-radius: 0;
+
+				img {
+					display: block;
+					width: 100%;
+					border-radius: 0;
+				}
+			}
+
+			.caption {
+				@include vendor('align-items', 'center');
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				@include vendor('pointer-events', 'none');
+				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
+				opacity: 0;
+				padding: 2rem;
+				z-index: 1;
+				font-size: 0.8rem;
+
+				a {
+					@include vendor('pointer-events', 'auto');
+				}
+
+				h2, h3, h4, h5, h6 {
+					font-size: 1.25rem;
+					margin-bottom: 0.25rem;
+				}
+
+				> * {
+					max-width: 100%;
+					margin-bottom: 1rem;
+				}
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			&:hover {
+				.caption {
+					opacity: 1;
+				}
+			}
+		}
+
+		@include breakpoint('<=large') {
+			article {
+				width: (100% / 3);
+
+				.caption {
+					padding: 1rem;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			article {
+				width: 50%;
+
+				.caption {
+					padding: 1rem;
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			article {
+				width: 100%;
+
+				.caption {
+					padding: 1rem;
+				}
+			}
+		}
+
+		// Modifiers.
+
+			// size
+				&.small {
+					article {
+						width: 20%;
+
+						.caption {
+							padding: 1rem;
+						}
+					}
+
+					@include breakpoint('<=large') {
+						article {
+							width: 25%;
+
+							.caption {
+								padding: 1rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=medium') {
+						article {
+							width: (100% / 3);
+
+							.caption {
+								padding: 1rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=xsmall') {
+						article {
+							width: 50%;
+
+							.caption {
+								padding: 1rem;
+							}
+						}
+					}
+				}
+
+				&.medium {
+					// ...
+				}
+
+				&.big {
+					article {
+						width: (100% / 3);
+
+						.caption {
+							padding: 3rem;
+						}
+					}
+
+					@include breakpoint('<=large') {
+						article {
+							width: 50%;
+
+							.caption {
+								padding: 2rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=medium') {
+						article {
+							width: 50%;
+
+							.caption {
+								padding: 2rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=xsmall') {
+						article {
+							width: 100%;
+
+							.caption {
+								padding: 1rem;
+							}
+						}
+					}
+				}
+
+	}
+
+/* Gallery (style2) */
+
+	.gallery.style2 {
+		@include color-typography(invert);
+		@include color-button(invert);
+		@include vendor('display', 'flex');
+		-webkit-overflow-scrolling: touch;
+		position: relative;
+		background-color: transparent;
+
+		> .forward, >.backward {
+			@include icon(false, solid);
+			@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+			position: absolute;
+			top: 0;
+			width: 5rem;
+			height: 100%;
+			cursor: pointer;
+			opacity: 0;
+			z-index: 2;
+
+			&:before {
+				display: block;
+				top: calc(50% - 1.5rem);
+				width: 4rem;
+				height: 3rem;
+				line-height: 1em;
+				font-size: 3rem;
+				position: absolute;
+				text-align: center;
+			}
+		}
+
+		&:hover {
+			> .forward, > .backward {
+				opacity: 1;
+			}
+		}
+
+		> .forward {
+			right: 0;
+			background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
+
+			&:before {
+				content: '\f105';
+				right: 0;
+			}
+		}
+
+		> .backward {
+			left: 0;
+			background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
+
+			&:before {
+				content: '\f104';
+				left: 0;
+			}
+		}
+
+		> .inner {
+			@include vendor('display', 'inherit');
+			overflow-x: auto;
+			overflow-y: hidden;
+			position: relative;
+			width: 100%;
+		}
+
+		article {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			display: block;
+			position: relative;
+			overflow: hidden;
+			width: 22.5rem;
+			max-width: 75vw;
+
+			.image {
+				display: block;
+				width: 100%;
+				border-radius: 0;
+
+				img {
+					display: block;
+					width: 100%;
+					border-radius: 0;
+				}
+			}
+
+			.caption {
+				@include vendor('align-items', 'center');
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				@include vendor('pointer-events', 'none');
+				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
+				opacity: 0;
+				padding: 3rem;
+				z-index: 1;
+				font-size: 0.8rem;
+
+				a {
+					@include vendor('pointer-events', 'auto');
+				}
+
+				h2, h3, h4, h5, h6 {
+					font-size: 1.25rem;
+					margin-bottom: 0.25rem;
+				}
+
+				> * {
+					max-width: 100%;
+					margin-bottom: 1rem;
+				}
+
+				> :last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			&:hover {
+				.caption {
+					opacity: 1;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			article {
+				.caption {
+					padding: 2rem;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			article {
+				.caption {
+					padding: 2rem;
+				}
+			}
+		}
+
+		// Modifiers.
+
+			// size
+				&.small {
+					article {
+						width: 17.5rem;
+
+						.caption {
+							padding: 2rem;
+						}
+					}
+
+					@include breakpoint('<=medium') {
+						article {
+							.caption {
+								padding: 2rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=small') {
+						article {
+							.caption {
+								padding: 2rem;
+							}
+						}
+					}
+				}
+
+				&.medium {
+					// ...
+				}
+
+				&.big {
+					article {
+						width: 30rem;
+
+						.caption {
+							padding: 4rem;
+						}
+					}
+
+					@include breakpoint('<=medium') {
+						article {
+							.caption {
+								padding: 3rem;
+							}
+						}
+					}
+
+					@include breakpoint('<=small') {
+						article {
+							.caption {
+								padding: 2rem;
+							}
+						}
+					}
+				}
+
+	}
+
+/* Gallery (lightbox) */
+
+	@include keyframes('gallery-modal-spinner') {
+		0% {
+			@include vendor('transform', 'rotate(0deg)');
+		}
+
+		100% {
+			@include vendor('transform', 'rotate(360deg)');
+		}
+	}
+
+	.gallery.lightbox {
+		.modal {
+			@include vendor('display', 'flex');
+			@include vendor('align-items', 'center');
+			@include vendor('justify-content', 'center');
+			@include vendor('pointer-events', 'none');
+			@include vendor('user-select', 'none');
+			@include vendor('transition', (
+				'opacity #{_duration(gallery-lightbox)} ease',
+				'visibility #{_duration(gallery-lightbox)}',
+				'z-index #{_duration(gallery-lightbox)}'
+			));
+			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			outline: 0;
+			background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity));
+			visibility: none;
+			opacity: 0;
+			z-index: 0;
+
+			&:before {
+				@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
+				@include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease');
+				@include vendor('transition-delay', '#{_duration(gallery-lightbox)}');
+				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(invert, fg-bold)}; 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 {
+				content: '';
+				display: block;
+				position: absolute;
+				top: 0.5rem;
+				right: 0.5rem;
+				width: 4rem;
+				height: 4rem;
+				cursor: pointer;
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(invert, fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 3rem;
+			}
+
+			.inner {
+				@include vendor('transform', 'translateY(0.75rem)');
+				@include vendor('transition', (
+					'opacity #{_duration(gallery-lightbox) * 0.5} ease',
+					'transform #{_duration(gallery-lightbox) * 0.5} ease'
+				));
+				opacity: 0;
+
+				img {
+					display: block;
+					max-width: 90vw;
+					max-height: 85vh;
+					box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
+				}
+			}
+
+			&.visible {
+				@include vendor('pointer-events', 'auto');
+				visibility: visible;
+				opacity: 1;
+				z-index: _misc(z-index-base) + 1;
+
+				&:before {
+					opacity: 1;
+				}
+			}
+
+			&.loaded {
+				.inner {
+					@include vendor('transform', 'translateY(0)');
+					@include vendor('transition', (
+						'opacity #{_duration(gallery-lightbox)} ease',
+						'transform #{_duration(gallery-lightbox)} ease'
+					));
+					opacity: 1;
+				}
+
+				&:before {
+					@include vendor('transition-delay', '0s');
+					opacity: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			.modal {
+				.inner {
+					img {
+						max-width: 100vw;
+					}
+				}
+			}
+		}
+	}
+
+// Mixin
+
+	@mixin color-gallery($p: null) {
+		.gallery {
+			article {
+				.image {
+					background-color: transparentize(_palette($p, fg-bold), 0.875);
+				}
+			}
+		}
+	}
+
+	@include color-gallery;

assets/sass/components/_icon.scss

@@ -0,0 +1,97 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Icon */
+
+	.icon {
+		@include icon;
+		border-bottom: none;
+		position: relative;
+		text-align: center;
+
+		> .label {
+			display: none;
+		}
+
+		&:before {
+			line-height: inherit;
+		}
+
+		&.solid {
+			&:before {
+				font-weight: 900;
+			}
+		}
+
+		&.brands {
+			&:before {
+				font-family: 'Font Awesome 5 Brands';
+			}
+		}
+
+		&.style2 {
+			&:before {
+				border-radius: 2.75em;
+				display: inline-block;
+				height: 2.75em;
+				line-height: 2.75em;
+				width: 2.75em;
+			}
+		}
+
+		&.major {
+			display: block;
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+			&:before {
+				font-size: 1.25rem;
+			}
+		}
+	}
+
+	a.icon {
+		&.style2 {
+			&:before {
+				@include vendor('transition', (
+					'background-color #{_duration(transition)} ease-in-out',
+					'box-shadow #{_duration(transition)} ease-in-out',
+					'color #{_duration(transition)} ease-in-out'
+				));
+			}
+		}
+	}
+
+	@mixin color-icon($p: null) {
+ 		.icon {
+ 			&.style2 {
+ 				&:before {
+					box-shadow: inset 0 0 0 _size(border-width) _palette($p, border);
+ 				}
+ 			}
+ 		}
+
+		a.icon {
+			&.style2 {
+				&:hover {
+					&:before {
+						box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
+						color: _palette($p, accent);
+					}
+				}
+
+				&:active {
+					&:before {
+						background-color: transparentize(_palette($p, accent), 0.9);
+						box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
+						color: _palette($p, accent);
+					}
+				}
+			}
+		}
+	}
+
+	@include color-icon;

assets/sass/components/_icons.scss

@@ -0,0 +1,23 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Icons */
+
+	ul.icons {
+		cursor: default;
+		list-style: none;
+		padding-left: 0;
+
+		li {
+			display: inline-block;
+			padding: 0 0.75rem 0 0;
+
+			&:last-child {
+				padding-right: 0;
+			}
+		}
+	}

assets/sass/components/_image.scss

@@ -0,0 +1,62 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Image */
+
+	.image {
+		border: 0;
+		border-radius: _size(border-radius);
+		display: inline-block;
+		position: relative;
+
+		img {
+			display: block;
+			border-radius: _size(border-radius);
+		}
+
+		&.left,
+		&.right {
+			width: 40%;
+			max-width: 10rem;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.left {
+			float: left;
+			margin: 0 1.5rem 1rem 0;
+			top: 0.25rem;
+		}
+
+		&.right {
+			float: right;
+			margin: 0 0 1rem 1.5rem;
+			top: 0.25rem;
+		}
+
+		&.fit {
+			display: block;
+			margin: 0 0 _size(element-margin) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		&.main {
+			display: block;
+			margin: 0 0 (_size(element-margin) * 1.5) 0;
+			width: 100%;
+
+			img {
+				width: 100%;
+			}
+		}
+	}

assets/sass/components/_index.scss

@@ -0,0 +1,67 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Index */
+
+	.index {
+		> * {
+			@include padding(3rem, 0);
+			@include vendor('display', 'flex');
+			border-top: solid 1px;
+
+			> header {
+				@include vendor('flex-grow', '0');
+				@include vendor('flex-shrink', '0');
+				width: 15rem;
+			}
+
+			> .content {
+				@include vendor('flex-grow', '1');
+				@include vendor('flex-shrink', '1');
+			}
+		}
+
+		> :first-child {
+			border-top: 0;
+		}
+
+		@include breakpoint('<=medium') {
+			> * {
+				> header {
+					width: 11rem;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> * {
+				> header {
+					width: 10rem;
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			> * {
+				@include vendor('flex-direction', 'column');
+
+				> header {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	@mixin color-index($p: null) {
+		.index {
+			> * {
+ 				border-top-color: _palette($p, border);
+ 			}
+ 		}
+	}
+
+	@include color-index;

assets/sass/components/_items.scss

@@ -0,0 +1,339 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Items (transitions) */
+
+	.items {
+
+		// Mixin.
+			@mixin transition-items($event) {
+				$x: null;
+				$y: null;
+
+				@if ($event == 'load') {
+					$x: 'body.is-preload &';
+					$y: _duration(on-load);
+				}
+				@else if ($event == 'scroll') {
+					$x: '&.is-inactive';
+					$y: _duration(on-scroll);
+				}
+
+				&.on#{$event}-fade-in {
+					> * {
+						> .inner {
+							@include vendor('transition', 'opacity #{$y} ease-in-out');
+							@include vendor('transition-delay', '#{_misc(items-limit) * _duration(items-delay)}');
+						}
+
+						@for $i from 0 through _misc(items-limit) {
+							&:nth-child(#{$i + 1}) {
+								> .inner {
+									@include vendor('transition-delay', '#{$i * _duration(items-delay)}');
+								}
+							}
+						}
+					}
+
+					#{$x} {
+						> * {
+							> .inner {
+								opacity: 0;
+							}
+						}
+					}
+				}
+			}
+
+		// On Load.
+			@include transition-items('load');
+
+		// On Scroll.
+			@include transition-items('scroll');
+
+	}
+
+/* Items (style1) */
+
+	@mixin items-style1-size($name, $size, $padding) {
+		&.#{$name} {
+			> * {
+				@include padding($padding, $padding);
+				width: #{100% / $size};
+
+				&:nth-child(-n + #{$size}) {
+					border-top-width: 0;
+				}
+
+				&:nth-child(#{$size}n + 1) {
+					border-left-width: 0;
+				}
+			}
+		}
+	}
+
+	@mixin items-style1-size-reset($name, $size) {
+		&.#{$name} {
+			> * {
+				&:nth-child(-n + #{$size}) {
+					border-top-width: _size(border-width);
+				}
+
+				&:nth-child(#{$size}n + 1) {
+					border-left-width: _size(border-width);
+				}
+			}
+		}
+	}
+
+	.items.style1 {
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		@include vendor('justify-content', 'center');
+		margin: (_size(element-margin) * 1.5) 0;
+		position: relative;
+
+		> * {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			border-style: solid;
+			border-left-width: _size(border-width);
+			border-top-width: _size(border-width);
+		}
+
+		// Modifiers.
+
+			// Size.
+				@include items-style1-size(big, 2, _size(gutter));
+				@include items-style1-size(medium, 3, _size(gutter) * 0.625);
+				@include items-style1-size(small, 4, _size(gutter) * 0.375);
+
+				@include breakpoint('<=large') {
+					@include items-style1-size-reset(small, 4);
+					@include items-style1-size(small, 3, _size(gutter) * 0.625);
+				}
+
+				@include breakpoint('<=medium') {
+					@include items-style1-size-reset(medium, 3);
+					@include items-style1-size(medium, 2, _size(gutter));
+
+					@include items-style1-size-reset(small, 3);
+					@include items-style1-size(small, 2, _size(gutter));
+				}
+
+				@include breakpoint('<=xsmall') {
+					@include items-style1-size-reset(big, 2);
+					@include items-style1-size(big, 1, _size(gutter) * 0.75);
+
+					@include items-style1-size-reset(medium, 2);
+					@include items-style1-size(medium, 1, _size(gutter) * 0.75);
+
+					@include items-style1-size-reset(small, 2);
+					@include items-style1-size(small, 1, _size(gutter) * 0.75);
+
+					&.big,
+					&.medium,
+					&.small {
+						> * {
+							padding-left: 0;
+							padding-right: 0;
+						}
+
+						> :first-child {
+							padding-top: 0;
+						}
+
+						> :last-child {
+							padding-bottom: 0;
+
+							> .inner {
+								> :last-child {
+									margin-bottom: 0;
+								}
+							}
+						}
+					}
+				}
+
+	}
+
+/* Items (style2) */
+
+	@mixin items-style2-size($name, $size, $padding) {
+		&.#{$name} {
+			> * {
+				@include padding($padding, $padding);
+				width: #{100% / $size};
+
+				&:nth-child(-n + #{$size}) {
+					border-top-width: 0;
+				}
+
+				&:nth-child(#{$size}n + 1) {
+					border-left-width: 0;
+				}
+			}
+		}
+	}
+
+	@mixin items-style2-size-reset($name, $size) {
+		&.#{$name} {
+			> * {
+				&:nth-child(-n + #{$size}) {
+					border-top-width: _size(border-width);
+				}
+
+				&:nth-child(#{$size}n + 1) {
+					border-left-width: _size(border-width);
+				}
+			}
+		}
+	}
+
+	.items.style2 {
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		@include vendor('justify-content', 'center');
+		margin: (_size(element-margin) * 1.5) 0;
+		position: relative;
+		border: solid _size(border-width);
+		border-radius: _size(border-radius);
+
+		> * {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+			border-style: solid;
+			border-left-width: _size(border-width);
+			border-top-width: _size(border-width);
+		}
+
+		// Modifiers.
+
+			// Size.
+				@include items-style2-size(big, 2, _size(gutter));
+				@include items-style2-size(medium, 3, _size(gutter) * 0.625);
+				@include items-style2-size(small, 4, _size(gutter) * 0.375);
+
+				@include breakpoint('<=large') {
+					@include items-style2-size-reset(small, 4);
+					@include items-style2-size(small, 3, _size(gutter) * 0.625);
+				}
+
+				@include breakpoint('<=medium') {
+					@include items-style2-size-reset(medium, 3);
+					@include items-style2-size(medium, 2, _size(gutter));
+
+					@include items-style2-size-reset(small, 3);
+					@include items-style2-size(small, 2, _size(gutter));
+				}
+
+				@include breakpoint('<=xsmall') {
+					@include items-style2-size-reset(big, 2);
+					@include items-style2-size(big, 1, _size(gutter) * 0.75);
+
+					@include items-style2-size-reset(medium, 2);
+					@include items-style2-size(medium, 1, _size(gutter) * 0.75);
+
+					@include items-style2-size-reset(small, 2);
+					@include items-style2-size(small, 1, _size(gutter) * 0.75);
+				}
+
+	}
+
+/* Items (style3) */
+
+	@mixin items-style3-size($name, $size, $padding) {
+		&.#{$name} {
+			> * {
+				@include padding($padding, $padding);
+				width: #{100% / $size};
+			}
+		}
+	}
+
+	.items.style3 {
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		@include vendor('justify-content', 'center');
+		margin: (_size(element-margin) * 1.5) 0;
+		position: relative;
+
+		> * {
+			@include vendor('flex-grow', '0');
+			@include vendor('flex-shrink', '0');
+		}
+
+		// Modifiers.
+
+			// Size.
+				@include items-style3-size(big, 2, _size(gutter) * 0.5);
+				@include items-style3-size(medium, 3, _size(gutter) * 0.5 * 0.625);
+				@include items-style3-size(small, 4, _size(gutter) * 0.5 * 0.375);
+
+				@include breakpoint('<=large') {
+					@include items-style3-size(small, 3, _size(gutter) * 0.5 * 0.625);
+				}
+
+				@include breakpoint('<=medium') {
+					@include items-style3-size(medium, 2, _size(gutter) * 0.5);
+					@include items-style3-size(small, 2, _size(gutter) * 0.5);
+				}
+
+				@include breakpoint('<=small') {
+					margin: _size(element-margin) 0;
+				}
+
+				@include breakpoint('<=xsmall') {
+					@include items-style3-size(big, 1, _size(gutter) * 0.5 * 0.75);
+					@include items-style3-size(medium, 1, _size(gutter) * 0.5 * 0.75);
+					@include items-style3-size(small, 1, _size(gutter) * 0.5 * 0.75);
+
+					&.big,
+					&.medium,
+					&.small {
+						> * {
+							padding-left: 0;
+							padding-right: 0;
+						}
+
+						> :first-child {
+							padding-top: 0;
+						}
+
+						> :last-child {
+							padding-bottom: 0;
+
+							> .inner {
+								> :last-child {
+									margin-bottom: 0;
+								}
+							}
+						}
+					}
+				}
+
+	}
+
+// Mixin
+
+	@mixin color-items($p: null) {
+ 		.items.style1 {
+ 			> * {
+	 			border-color: _palette($p, border);
+	 		}
+ 		}
+
+ 		.items.style2 {
+ 			border-color: _palette($p, border);
+
+ 			> * {
+	 			border-color: _palette($p, border);
+	 		}
+ 		}
+	}
+
+	@include color-items;

assets/sass/components/_list.scss

@@ -0,0 +1,87 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* List */
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1.25rem;
+
+		li {
+			padding-left: 0.25rem;
+		}
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 _size(element-margin) 0;
+		padding-left: 1rem;
+
+		li {
+			padding-left: 0.5rem;
+		}
+
+		&.alt {
+			list-style: none;
+			padding-left: 0;
+
+			li {
+				border-top: solid _size(border-width);
+				padding: 0.5rem 0;
+
+				&:first-child {
+					border-top: 0;
+					padding-top: 0;
+				}
+			}
+		}
+	}
+
+	dl {
+		margin: 0 0 _size(element-margin) 0;
+
+		dt {
+			display: block;
+			font-weight: _font(weight-bold);
+			margin: 0 0 (_size(element-margin) * 0.5) 0;
+		}
+
+		dd {
+			margin-left: _size(element-margin);
+		}
+
+		&.style2 {
+			dt {
+				width: 25%;
+				float: left;
+			}
+
+			dd {
+				width: 70%;
+				float: left;
+			}
+
+			&:after {
+				content: '';
+				display: block;
+				clear: both;
+			}
+		}
+	}
+
+	@mixin color-list($p: null) {
+		ul {
+			&.alt {
+				li {
+					border-top-color: _palette($p, border);
+				}
+			}
+		}
+	}
+
+	@include color-list;

assets/sass/components/_row.scss

@@ -0,0 +1,36 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Row */
+
+	.row {
+		@include html-grid(2rem);
+
+		@include breakpoint('<=xlarge') {
+			@include html-grid(2rem, 'xlarge');
+		}
+
+		@include breakpoint('<=large') {
+			@include html-grid(2rem, 'large');
+		}
+
+		@include breakpoint('<=medium') {
+			@include html-grid(2rem, 'medium');
+		}
+
+		@include breakpoint('<=small') {
+			@include html-grid(2rem, 'small');
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include html-grid(2rem, 'xsmall');
+		}
+
+		@include breakpoint('<=xxsmall') {
+			@include html-grid(2rem, 'xxsmall');
+		}
+	}

assets/sass/components/_section.scss

@@ -0,0 +1,50 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Section/Article */
+
+	section, article {
+		&.special {
+			text-align: center;
+		}
+	}
+
+	header {
+		p {
+			position: relative;
+			margin: (_size(element-margin) * -0.325) 0 (_size(element-margin) * 0.75) 0;
+			font-style: italic;
+		}
+
+		h1 + p {
+			font-size: 1.375rem;
+		}
+
+		h2 + p {
+			font-size: 1.25rem;
+		}
+
+		h3 + p {
+			font-size: 1.1rem;
+		}
+
+		h4 + p,
+		h5 + p,
+		h6 + p {
+			font-size: 0.9rem;
+		}
+	}
+
+	@mixin color-section($p: null) {
+		header {
+			p {
+				color: _palette($p, fg-light);
+			}
+		}
+	}
+
+	@include color-section;

assets/sass/components/_table.scss

@@ -0,0 +1,138 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Table */
+
+	.table-wrapper {
+		-webkit-overflow-scrolling: touch;
+		margin: 0 0 _size(element-margin) 0;
+		overflow-x: auto;
+
+		> table {
+			margin-bottom: 0;
+		}
+	}
+
+	table {
+		margin: 0 0 _size(element-margin) 0;
+		width: 100%;
+
+		tbody {
+			tr {
+				border: solid _size(border-width);
+				border-left: 0;
+				border-right: 0;
+			}
+		}
+
+		td {
+			padding: 0.75rem 0.75rem;
+		}
+
+		th {
+			font-size: 0.9rem;
+			font-weight: _font(weight-bold);
+			padding: 0 0.75rem 0.75rem 0.75rem;
+			text-align: left;
+		}
+
+		thead {
+			border-bottom: solid (_size(border-width) * 2);
+		}
+
+		tfoot {
+			border-top: solid (_size(border-width) * 2);
+		}
+
+		&.alt {
+			border-collapse: separate;
+
+			tbody {
+				tr {
+					td {
+						border: solid _size(border-width);
+						border-left-width: 0;
+						border-top-width: 0;
+
+						&:first-child {
+							border-left-width: _size(border-width);
+						}
+					}
+
+					&:first-child {
+						td {
+							border-top-width: _size(border-width);
+						}
+					}
+				}
+			}
+
+			thead {
+				border-bottom: 0;
+			}
+
+			tfoot {
+				border-top: 0;
+			}
+		}
+
+		&.fixed {
+			table-layout: fixed;
+		}
+	}
+
+	@mixin color-table($p: null) {
+		table {
+			tbody {
+				tr {
+					border-color: _palette($p, border);
+
+					&:nth-child(2n + 1) {
+						background-color: _palette($p, border-bg);
+					}
+
+					&.alt {
+						background-color: _palette($p, border-bg) !important;
+					}
+				}
+			}
+
+			th {
+				color: _palette($p, fg-bold);
+			}
+
+			thead {
+				border-bottom-color: _palette($p, border);
+			}
+
+			tfoot {
+				border-top-color: _palette($p, border);
+			}
+
+			&.alt {
+				tbody {
+					tr {
+						td {
+							border-color: _palette($p, border);
+						}
+					}
+				}
+			}
+
+			&.uniform {
+				tbody {
+					tr {
+						&:nth-child(2n + 1) {
+							background-color: transparent;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	@include color-table;

assets/sass/components/_wrapper.scss

@@ -0,0 +1,121 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Wrapper (style1) */
+
+	.wrapper.style1 {
+		> .inner {
+			@include padding(_size(padding, default), _size(padding, default) * 0.5);
+			margin: 0 auto;
+			max-width: 100%;
+			width: _size(inner);
+
+			&.medium {
+				width: _size(inner) * 0.75;
+			}
+
+			&.small {
+				width: _size(inner) * 0.5;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			> .inner {
+				@include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.5);
+			}
+		}
+
+		@include breakpoint('<=large') {
+			> .inner {
+				@include padding(_size(padding, large), _size(padding, large));
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			> .inner {
+				@include padding(_size(padding, medium) * 1.5, _size(padding, medium));
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> .inner {
+				@include padding(_size(padding, small) * 1.5, _size(padding, small));
+			}
+		}
+	}
+
+/* Wrapper (style2) */
+
+	.wrapper.style2 {
+		padding: _size(padding, default);
+		background-color: _palette(bg-alt);
+
+		> .inner {
+			@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.5);
+			background-color: _palette(bg);
+			border-radius: _size(border-radius-alt);
+			margin: 0 auto;
+			max-width: 100%;
+			position: relative;
+			width: _size(inner);
+			z-index: 1;
+
+			&.medium {
+				width: _size(inner) * 0.75;
+			}
+
+			&.small {
+				width: _size(inner) * 0.5;
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			padding: _size(padding, xlarge);
+
+			> .inner {
+				@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.5);
+			}
+		}
+
+		@include breakpoint('<=large') {
+			padding: _size(padding, large);
+
+			> .inner {
+				@include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.5);
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			padding: _size(padding, medium) * 0.75;
+
+			> .inner {
+				@include padding(_size(padding, medium), _size(padding, medium) * 0.75);
+			}
+		}
+
+		@include breakpoint('<=small') {
+			padding: _size(padding, small) * 0.75;
+
+			> .inner {
+				@include padding(_size(padding, small), _size(padding, small) * 0.75);
+			}
+		}
+	}
+
+	#wrapper {
+		> .wrapper.style2 {
+			&.invert {
+				&:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6):not(.color7) {
+					background-color: _palette(invert, bg-alt);
+				}
+
+				> .inner {
+					background-color: _palette(invert, bg);
+				}
+			}
+		}
+	}

assets/sass/layout/_wrapper.scss

@@ -0,0 +1,50 @@
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Wrapper */
+
+	@mixin wrapper-color($n) {
+		> .color#{$n} {
+			background-color: _palette(color#{$n});
+		}
+	}
+
+	#wrapper {
+		background-color: inherit;
+		width: 100%;
+		overflow-x: hidden;
+
+		> .invert {
+			@include color(invert);
+		}
+
+		@include wrapper-color(1);
+		@include wrapper-color(2);
+		@include wrapper-color(3);
+		@include wrapper-color(4);
+		@include wrapper-color(5);
+		@include wrapper-color(6);
+		@include wrapper-color(7);
+
+		&.divided {
+			> * {
+				box-shadow: inset 0 1px 0 0 _palette(border-alt);
+
+				&:first-child {
+					box-shadow: none !important;
+				}
+			}
+
+			> .invert {
+				box-shadow: inset 0 1px 0 0 _palette(invert, border-alt);
+
+				&:first-child {
+					box-shadow: none !important;
+				}
+			}
+		}
+	}

assets/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;
+			}
+
+	}

assets/sass/libs/_functions.scss

@@ -0,0 +1,90 @@
+/// Removes a specific item from a list.
+/// @author Hugo Giraudel
+/// @param {list} $list List.
+/// @param {integer} $index Index.
+/// @return {list} Updated list.
+@function remove-nth($list, $index) {
+
+	$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 {
+
+		$result: ();
+		$index: if($index < 0, length($list) + $index + 1, $index);
+
+		@for $i from 1 through length($list) {
+
+			@if $i != $index {
+				$result: append($result, nth($list, $i));
+			}
+
+		}
+
+	}
+
+	@return $result;
+
+}
+
+/// Gets a value from a map.
+/// @author Hugo Giraudel
+/// @param {map} $map Map.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function val($map, $keys...) {
+
+	@if nth($keys, 1) == null {
+		$keys: remove-nth($keys, 1);
+	}
+
+	@each $key in $keys {
+		$map: map-get($map, $key);
+	}
+
+	@return $map;
+
+}
+
+/// Gets a duration value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _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...);
+}
+
+/// Gets a misc value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _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...);
+}
+
+/// Gets a size value.
+/// @param {string} $keys Key(s).
+/// @return {string} Value.
+@function _size($keys...) {
+	@return val($size, $keys...);
+}

assets/sass/libs/_html-grid.scss

@@ -0,0 +1,149 @@
+// html-grid.scss v1.0 | @ajlkn | MIT licensed */
+
+// Mixins.
+
+	/// Initializes the current element as an HTML grid.
+	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+	/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
+	@mixin html-grid($gutters: 1.5em, $suffix: '') {
+
+		// Initialize.
+			$cols: 12;
+			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
+			$unit: 100% / $cols;
+
+			// Suffixes.
+				$suffixes: null;
+
+				@if (type-of($suffix) == 'list') {
+					$suffixes: $suffix;
+				}
+				@else {
+					$suffixes: ($suffix);
+				}
+
+			// Gutters.
+				$guttersCols: null;
+				$guttersRows: null;
+
+				@if (type-of($gutters) == 'list') {
+
+					$guttersCols: nth($gutters, 1);
+					$guttersRows: nth($gutters, 2);
+
+				}
+				@else {
+
+					$guttersCols: $gutters;
+					$guttersRows: 0;
+
+				}
+
+		// Row.
+			display: flex;
+			flex-wrap: wrap;
+			box-sizing: border-box;
+			align-items: stretch;
+
+			// Columns.
+				> * {
+					box-sizing: border-box;
+				}
+
+			// Gutters.
+				&.gtr-uniform {
+					> * {
+						> :last-child {
+							margin-bottom: 0;
+						}
+					}
+				}
+
+			// Alignment.
+				&.aln-left {
+					justify-content: flex-start;
+				}
+
+				&.aln-center {
+					justify-content: center;
+				}
+
+				&.aln-right {
+					justify-content: flex-end;
+				}
+
+				&.aln-top {
+					align-items: flex-start;
+				}
+
+				&.aln-middle {
+					align-items: center;
+				}
+
+				&.aln-bottom {
+					align-items: flex-end;
+				}
+
+		// Step through suffixes.
+			@each $suffix in $suffixes {
+
+				// Suffix.
+					@if ($suffix != '') {
+						$suffix: '-' + $suffix;
+					}
+					@else {
+						$suffix: '';
+					}
+
+				// Row.
+
+					// Important.
+						> .imp#{$suffix} {
+							order: -1;
+						}
+
+					// Columns, offsets.
+						@for $i from 1 through $cols {
+							> .col-#{$i}#{$suffix} {
+								width: $unit * $i;
+							}
+
+							> .off-#{$i}#{$suffix} {
+								margin-left: $unit * $i;
+							}
+						}
+
+					// Step through multipliers.
+						@each $multiplier in $multipliers {
+
+							// Gutters.
+								$class: null;
+
+								@if ($multiplier != 1) {
+									$class: '.gtr-' + ($multiplier * 100);
+								}
+
+								&#{$class} {
+									margin-top: ($guttersRows * $multiplier * -1);
+									margin-left: ($guttersCols * $multiplier * -1);
+
+									> * {
+										padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
+									}
+
+									// Uniform.
+										&.gtr-uniform {
+											margin-top: $guttersCols * $multiplier * -1;
+
+											> * {
+												padding-top: $guttersCols * $multiplier;
+											}
+										}
+
+								}
+
+						}
+
+			}
+
+	}

assets/sass/libs/_mixins.scss

@@ -0,0 +1,78 @@
+/// Makes an element's :before pseudoelement a FontAwesome icon.
+/// @param {string} $content Optional content value to use.
+/// @param {string} $category Optional category to use.
+/// @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 Pro';
+			font-weight: 900;
+		}
+		@else {
+			font-family: 'Font Awesome 5 Pro';
+			font-weight: 400;
+		}
+
+	}
+
+}
+
+/// Applies padding to an element, taking the current element-margin value into account.
+/// @param {mixed} $tb Top/bottom padding.
+/// @param {mixed} $lr Left/right padding.
+/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
+/// @param {bool} $important If true, adds !important.
+@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
+
+	@if $important {
+		$important: '!important';
+	}
+
+	$x: 0.1em;
+
+	@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};
+
+}
+
+/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
+/// @param {string} $svg SVG data URL.
+/// @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');
+
+	@return url("data:image/svg+xml;charset=utf8,#{$svg}");
+
+}

assets/sass/libs/_vars.scss

@@ -0,0 +1,80 @@
+// Misc.
+	$misc: (
+		z-index-base:		10000,
+		overlay-opacity:	0.5,
+		lightbox-opacity:	0.75,
+		gallery-limit:		32,
+		items-limit:		16
+	);
+
+// Duration.
+	$duration: (
+		menu:				0.5s,
+		transition:			0.2s,
+		gallery-lightbox:	0.5s,
+		gallery-delay:		0.15s,
+		items-delay:		0.15s,
+		on-load:			0.75s,
+		on-scroll:			0.75s
+	);
+
+// Size.
+	$size: (
+		border-radius:		4px,
+		border-radius-alt:	0.5rem,
+		border-width:		1px,
+		element-height:		2.75rem,
+		element-margin:		2rem,
+		gutter:				3.5rem,
+		inner:				64rem,
+		padding:			(
+			default:		7rem,
+			xlarge:			5rem,
+			large:			4rem,
+			medium:			3rem,
+			small:			2rem
+		)
+	);
+
+// Font.
+	$font: (
+		family:				('Source Sans Pro', Helvetica, sans-serif),
+		family-fixed:		('Courier New', monospace),
+		weight:				300,
+		weight-bold:		400,
+		kerning:			-0.05em,
+		kerning-alt:		0.125em
+	);
+
+// Palette.
+	$palette: (
+		color1:				#30363d,
+		color2:				#db8992,
+		color3:				#ab7aad,
+		color4:				#897cad,
+		color5:				#7794ce,
+		color6:				#64abb4,
+		color7:				#6ba78c,
+
+		bg:					#ffffff,
+		bg-alt:				#eeeeee,
+		fg:					#000000,
+		fg-bold:			#000000,
+		fg-light:			rgba(0,0,0,0.75),
+		border:				rgba(0,0,0,0.2),
+		border-alt:			rgba(0,0,0,0.075),
+		border-bg:			rgba(0,0,0,0.05),
+		accent:				#837164,
+
+		invert: (
+			bg:				#000000,
+			bg-alt:			#222222,
+			fg:				#ffffff,
+			fg-bold:		#ffffff,
+			fg-light:		#ffffff,
+			border:			rgba(255,255,255,1.0),
+			border-alt:		rgba(255,255,255,0.125),
+			border-bg:		rgba(255,255,255,0.125),
+			accent:			#837164
+		),
+	);

assets/sass/libs/_vendor.scss

@@ -0,0 +1,376 @@
+// vendor.scss v1.0 | @ajlkn | MIT licensed */
+
+// Vars.
+
+	/// Vendor prefixes.
+	/// @var {list}
+	$vendor-prefixes: (
+		'-moz-',
+		'-webkit-',
+		'-ms-',
+		''
+	);
+
+	/// Properties that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-properties: (
+
+		// Animation.
+			'animation',
+			'animation-delay',
+			'animation-direction',
+			'animation-duration',
+			'animation-fill-mode',
+			'animation-iteration-count',
+			'animation-name',
+			'animation-play-state',
+			'animation-timing-function',
+
+		// Appearance.
+			'appearance',
+
+		// Backdrop filter.
+			'backdrop-filter',
+
+		// Background image options.
+			'background-clip',
+			'background-origin',
+			'background-size',
+
+		// Box sizing.
+			'box-sizing',
+
+		// Clip path.
+			'clip-path',
+
+		// Filter effects.
+			'filter',
+
+		// Flexbox.
+			'align-content',
+			'align-items',
+			'align-self',
+			'flex',
+			'flex-basis',
+			'flex-direction',
+			'flex-flow',
+			'flex-grow',
+			'flex-shrink',
+			'flex-wrap',
+			'justify-content',
+			'order',
+
+		// Font feature.
+			'font-feature-settings',
+			'font-language-override',
+			'font-variant-ligatures',
+
+		// Font kerning.
+			'font-kerning',
+
+		// Fragmented borders and backgrounds.
+			'box-decoration-break',
+
+		// Grid layout.
+			'grid-column',
+			'grid-column-align',
+			'grid-column-end',
+			'grid-column-start',
+			'grid-row',
+			'grid-row-align',
+			'grid-row-end',
+			'grid-row-start',
+			'grid-template-columns',
+			'grid-template-rows',
+
+		// Hyphens.
+			'hyphens',
+			'word-break',
+
+		// Masks.
+			'mask',
+			'mask-border',
+			'mask-border-outset',
+			'mask-border-repeat',
+			'mask-border-slice',
+			'mask-border-source',
+			'mask-border-width',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
+
+		// Multicolumn.
+			'break-after',
+			'break-before',
+			'break-inside',
+			'column-count',
+			'column-fill',
+			'column-gap',
+			'column-rule',
+			'column-rule-color',
+			'column-rule-style',
+			'column-rule-width',
+			'column-span',
+			'column-width',
+			'columns',
+
+		// Object fit.
+			'object-fit',
+			'object-position',
+
+		// Regions.
+			'flow-from',
+			'flow-into',
+			'region-fragment',
+
+		// Scroll snap points.
+			'scroll-snap-coordinate',
+			'scroll-snap-destination',
+			'scroll-snap-points-x',
+			'scroll-snap-points-y',
+			'scroll-snap-type',
+
+		// Shapes.
+			'shape-image-threshold',
+			'shape-margin',
+			'shape-outside',
+
+		// Tab size.
+			'tab-size',
+
+		// Text align last.
+			'text-align-last',
+
+		// Text decoration.
+			'text-decoration-color',
+			'text-decoration-line',
+			'text-decoration-skip',
+			'text-decoration-style',
+
+		// Text emphasis.
+			'text-emphasis',
+			'text-emphasis-color',
+			'text-emphasis-position',
+			'text-emphasis-style',
+
+		// Text size adjust.
+			'text-size-adjust',
+
+		// Text spacing.
+			'text-spacing',
+
+		// Transform.
+			'transform',
+			'transform-origin',
+
+		// Transform 3D.
+			'backface-visibility',
+			'perspective',
+			'perspective-origin',
+			'transform-style',
+
+		// Transition.
+			'transition',
+			'transition-delay',
+			'transition-duration',
+			'transition-property',
+			'transition-timing-function',
+
+		// Unicode bidi.
+			'unicode-bidi',
+
+		// User select.
+			'user-select',
+
+		// Writing mode.
+			'writing-mode',
+
+	);
+
+	/// Values that should be vendorized.
+	/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
+	/// @var {list}
+	$vendor-values: (
+
+		// Cross fade.
+			'cross-fade',
+
+		// Element function.
+			'element',
+
+		// Filter function.
+			'filter',
+
+		// Flexbox.
+			'flex',
+			'inline-flex',
+
+		// Grab cursors.
+			'grab',
+			'grabbing',
+
+		// Gradients.
+			'linear-gradient',
+			'repeating-linear-gradient',
+			'radial-gradient',
+			'repeating-radial-gradient',
+
+		// Grid layout.
+			'grid',
+			'inline-grid',
+
+		// Image set.
+			'image-set',
+
+		// Intrinsic width.
+			'max-content',
+			'min-content',
+			'fit-content',
+			'fill',
+			'fill-available',
+			'stretch',
+
+		// Sticky position.
+			'sticky',
+
+		// Transform.
+			'transform',
+
+		// Zoom cursors.
+			'zoom-in',
+			'zoom-out',
+
+	);
+
+// Functions.
+
+	/// Removes a specific item from a list.
+	/// @author Hugo Giraudel
+	/// @param {list} $list List.
+	/// @param {integer} $index Index.
+	/// @return {list} Updated list.
+	@function remove-nth($list, $index) {
+
+		$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 {
+
+			$result: ();
+			$index: if($index < 0, length($list) + $index + 1, $index);
+
+			@for $i from 1 through length($list) {
+
+				@if $i != $index {
+					$result: append($result, nth($list, $i));
+				}
+
+			}
+
+		}
+
+		@return $result;
+
+	}
+
+	/// Replaces a substring within another string.
+	/// @author Hugo Giraudel
+	/// @param {string} $string String.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {string} Updated string.
+	@function str-replace($string, $search, $replace: '') {
+
+		$index: str-index($string, $search);
+
+		@if $index {
+			@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+		}
+
+		@return $string;
+
+	}
+
+	/// Replaces a substring within each string in a list.
+	/// @param {list} $strings List of strings.
+	/// @param {string} $search Substring.
+	/// @param {string} $replace Replacement.
+	/// @return {list} Updated list of strings.
+	@function str-replace-all($strings, $search, $replace: '') {
+
+		@each $string in $strings {
+			$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
+		}
+
+		@return $strings;
+
+	}
+
+// Mixins.
+
+	/// Wraps @content in vendorized keyframe blocks.
+	/// @param {string} $name Name.
+	@mixin keyframes($name) {
+
+		@-moz-keyframes #{$name} { @content; }
+		@-webkit-keyframes #{$name} { @content; }
+		@-ms-keyframes #{$name} { @content; }
+		@keyframes #{$name} { @content; }
+
+	}
+
+	/// Vendorizes a declaration's property and/or value(s).
+	/// @param {string} $property Property.
+	/// @param {mixed} $value String/list of value(s).
+	@mixin vendor($property, $value) {
+
+		// Determine if property should expand.
+			$expandProperty: index($vendor-properties, $property);
+
+		// Determine if value should expand (and if so, add '-prefix-' placeholder).
+			$expandValue: false;
+
+			@each $x in $value {
+				@each $y in $vendor-values {
+					@if $y == str-slice($x, 1, str-length($y)) {
+
+						$value: set-nth($value, index($value, $x), '-prefix-' + $x);
+						$expandValue: true;
+
+					}
+				}
+			}
+
+		// Expand property?
+			@if $expandProperty {
+			    @each $vendor in $vendor-prefixes {
+			        #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Expand just the value?
+			@elseif $expandValue {
+			    @each $vendor in $vendor-prefixes {
+			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
+			    }
+			}
+
+		// Neither? Treat them as a normal declaration.
+			@else {
+		        #{$property}: #{$value};
+			}
+
+	}

assets/sass/main.scss

@@ -0,0 +1,186 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+@import 'fontawesome-all.min.css';
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i');
+
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+// Breakpoints.
+
+	@include breakpoints((
+		xlarge:   ( 1281px,  1680px ),
+		large:    ( 981px,   1280px ),
+		medium:   ( 737px,   980px  ),
+		small:    ( 481px,   736px  ),
+		xsmall:   ( 361px,   480px  ),
+		xxsmall:  ( null,    360px  )
+	));
+
+// Mixins.
+
+	@mixin color($p) {
+		@include color-typography($p);
+		@include color-box($p);
+		@include color-button($p);
+		@include color-form($p);
+		@include color-icon($p);
+		@include color-list($p);
+		@include color-section($p);
+		@include color-table($p);
+		@include color-banner($p);
+		@include color-spotlight($p);
+		@include color-gallery($p);
+		@include color-items($p);
+		@include color-index($p);
+	}
+
+// Phone.
+
+	@mixin phone($image-width) {
+		@include vendor('flex-grow', '0');
+		@include vendor('flex-shrink', '0');
+		border-radius: 0;
+		border: solid _size(border-width);
+
+		img {
+			@include vendor('object-fit', 'cover');
+			@include vendor('object-position', 'center');
+			display: block;
+			width: 100%;
+			height: 100%;
+			border-radius: 0;
+		}
+
+		&:before {
+			content: '';
+			display: block;
+			background-position: center;
+			background-repeat: no-repeat;
+			border: solid _size(border-width);
+			border-bottom: 0;
+		}
+
+		&:after {
+			content: '';
+			display: block;
+			background-position: center;
+			background-repeat: no-repeat;
+			border: solid _size(border-width);
+			border-top: 0;
+		}
+
+		@include resize-phone($image-width, 1);
+	}
+
+	@mixin resize-phone($image-width, $image-factor) {
+		$image-pad-top: 2.5rem;
+		$image-pad-bottom: 3rem;
+		$image-height: ($image-width * (1920 / 1080));
+
+		width: ($image-width * $image-factor);
+		height: (($image-width * $image-factor) * (1920 / 1080));
+		margin-top: ($image-pad-top * $image-factor);
+		margin-bottom: (_size(element-margin) + ($image-pad-bottom * $image-factor));
+
+		&:before {
+			height: ($image-pad-top * $image-factor);
+			background-size: (64px * $image-factor) (32px * $image-factor);
+			margin-top: (($image-pad-top * $image-factor) * -1);
+			border-radius: (1rem * $image-factor) (1rem * $image-factor) 0 0;
+		}
+
+		&:after {
+			height: ($image-pad-bottom * $image-factor);
+			background-size: (64px * $image-factor) (32px * $image-factor);
+			margin-bottom: (($image-pad-bottom * $image-factor) * -1);
+			border-radius: 0 0 (1rem * $image-factor) (1rem * $image-factor);
+		}
+	}
+
+	@mixin color-phone($p) {
+		border-color: _palette($p, border);
+		background-color: _palette($p, border);
+
+		@if ($p != 'invert') {
+			border-width: 0;
+		}
+		@else {
+			border-width: _size(border-width);
+		}
+
+		&:before {
+			background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="11" y="12" width="42" height="8" vector-effect="non-scaling-stroke" /></svg>');
+			border-color: _palette($p, border);
+
+			@if ($p == 'invert') {
+				width: calc(100% + #{_size(border-width) * 2});
+				margin-left: (_size(border-width) * -1);
+			}
+			@else {
+				width: 100%;
+			}
+		}
+
+		&:after {
+			background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><circle cx="32" cy="16" r="14" vector-effect="non-scaling-stroke" /></svg>');
+			border-color: _palette($p, border);
+
+			@if ($p == 'invert') {
+				width: calc(100% + #{_size(border-width) * 2});
+				margin-left: (_size(border-width) * -1);
+			}
+			@else {
+				width: 100%;
+			}
+		}
+	}
+
+	@mixin color-phone-variant($v, $p) {
+		@if ($v == 'android') {
+			&:after {
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="6" y="4" width="52" height="24" vector-effect="non-scaling-stroke" /></svg>');
+			}
+		}
+		@else if ($p == 'iphone') {
+			// ...
+		}
+	}
+
+// Base.
+
+	@import 'base/reset';
+	@import 'base/page';
+	@import 'base/typography';
+
+// Component.
+
+	@import 'components/row';
+	@import 'components/box';
+	@import 'components/button';
+	@import 'components/form';
+	@import 'components/icon';
+	@import 'components/image';
+	@import 'components/list';
+	@import 'components/actions';
+	@import 'components/icons';
+	@import 'components/section';
+	@import 'components/table';
+	@import 'components/banner';
+	@import 'components/spotlight';
+	@import 'components/gallery';
+	@import 'components/wrapper';
+	@import 'components/items';
+	@import 'components/index';
+
+// Layout.
+
+	@import 'layout/wrapper';

assets/sass/noscript.scss

@@ -0,0 +1,208 @@
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+
+/*
+	Hugo Story by CaressOfSteel
+	A (modular, highly tweakable) responsive one-page theme for Hugo.
+	Ported from Story by HTML5UP.
+	This Hugo theme is licensed under the Creative Commons Attribution 3.0 License.
+*/
+
+/* Banner (transitions) */
+
+	.banner {
+
+		// Mixin.
+			@mixin transition-banner($event) {
+				$x: null;
+				$y: null;
+
+				@if ($event == 'load') {
+					$x: 'body.is-preload &';
+					$y: _duration(on-load);
+				}
+				@else if ($event == 'scroll') {
+					$x: '&.is-inactive';
+					$y: _duration(on-scroll);
+				}
+
+				// Content.
+					&.on#{$event}-content-fade-up {
+						.content {
+							@include vendor('transition', 'none');
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'none');
+								opacity: 1;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-down {
+						.content {
+							@include vendor('transition', 'none');
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'none');
+								opacity: 1;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-left {
+						.content {
+							@include vendor('transition', 'none');
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'none');
+								opacity: 1;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-right {
+						.content {
+							@include vendor('transition', 'none');
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'none');
+								opacity: 1;
+							}
+						}
+					}
+
+					&.on#{$event}-content-fade-in {
+						.content {
+							@include vendor('transition', 'none');
+						}
+
+						#{$x} {
+							.content {
+								@include vendor('transform', 'none');
+								opacity: 1;
+							}
+						}
+					}
+
+				// Image.
+					&.on#{$event}-image-fade-up {
+						.image {
+							@include vendor('transition', 'none');
+
+							img {
+								@include vendor('transition', 'none');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'none');
+								opacity: 1;
+
+								img {
+									opacity: 1;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-down {
+						.image {
+							@include vendor('transition', 'none');
+
+							img {
+								@include vendor('transition', 'none');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'none');
+								opacity: 1;
+
+								img {
+									opacity: 1;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-left {
+						.image {
+							@include vendor('transition', 'none');
+
+							img {
+								@include vendor('transition', 'none');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'none');
+								opacity: 1;
+
+								img {
+									opacity: 1;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-right {
+						.image {
+							@include vendor('transition', 'none');
+
+							img {
+								@include vendor('transition', 'none');
+							}
+						}
+
+						#{$x} {
+							.image {
+								@include vendor('transform', 'none');
+								opacity: 1;
+
+								img {
+									opacity: 1;
+								}
+							}
+						}
+					}
+
+					&.on#{$event}-image-fade-in {
+						.image {
+							img {
+								@include vendor('transition', 'none');
+							}
+						}
+
+						#{$x} {
+							.image {
+								img {
+									opacity: 1;
+								}
+							}
+						}
+					}
+
+			}
+
+		// On Load.
+			@include transition-banner('load');
+
+		// On Scroll.
+			@include transition-banner('scroll');
+
+	}

exampleSite/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

exampleSite/config/default/config.toml

@@ -0,0 +1,32 @@
+## -----------------------------------------------
+## Basic Configuration
+## -----------------------------------------------
+
+title = "Hugo Story"
+theme = "hugo-story"
+
+
+## -----------------------------------------------
+## Hugo Built-in Features
+## -----------------------------------------------
+
+disableKinds = ["taxonomy", "taxonomyTerm", "section"]
+# googleAnalytics = "your-google-analytics-id"
+
+
+## -----------------------------------------------
+## Site Parameters
+## -----------------------------------------------
+
+[Params]
+  description = "A (modular, highly tweakable) responsive one-page theme for Hugo"
+  logo = "images/banner.jpg"
+  favicon = true
+
+[Params.social]
+  github = "https://github.com/caressofsteel/"
+  twitter = "https://twitter.com/caressofsteel_"
+  email = "caressofsteel@protonmail.com"
+  instagram = "https://instagram.com"
+  linkedin = "https://linkedin.com"
+  telegram = "https://telegram.org"

exampleSite/config/development/config.toml

@@ -0,0 +1,32 @@
+## -----------------------------------------------
+## Basic Configuration
+## -----------------------------------------------
+
+title = "Hugo Story"
+theme = "hugo-story"
+
+
+## -----------------------------------------------
+## Hugo Built-in Features
+## -----------------------------------------------
+
+disableKinds = ["taxonomy", "taxonomyTerm", "section"]
+# googleAnalytics = "your-google-analytics-id"
+
+
+## -----------------------------------------------
+## Site Parameters
+## -----------------------------------------------
+
+[Params]
+  description = "A (modular, highly tweakable) responsive one-page theme for Hugo"
+  logo = "images/banner.jpg"
+  favicon = true
+
+[Params.social]
+  github = "https://github.com/caressofsteel/"
+  twitter = "https://twitter.com/caressofsteel_"
+  email = "caressofsteel@protonmail.com"
+  instagram = "https://instagram.com"
+  linkedin = "https://linkedin.com"
+  telegram = "https://telegram.org"

exampleSite/config/production/config.toml

@@ -0,0 +1,47 @@
+## -----------------------------------------------
+## Basic Configuration
+## -----------------------------------------------
+
+title = "Hugo Story"
+theme = "hugo-story"
+
+
+## -----------------------------------------------
+## Publish
+## -----------------------------------------------
+
+relativeURLs = "true"
+#canonifyURLs = "true"
+
+# Local
+baseURL = "/"
+publishDir = "public"
+
+# Remote
+#baseURL = "https://caressofsteel.github.io/demos/hugo/hugo-story/"
+#publishDir = "//centos/sites/hugodev/hugostory/"
+
+
+## -----------------------------------------------
+## Hugo Built-in Features
+## -----------------------------------------------
+
+disableKinds = ["taxonomy", "taxonomyTerm", "section"]
+# googleAnalytics = "your-google-analytics-id"
+
+## -----------------------------------------------
+## Site Parameters
+## -----------------------------------------------
+
+[Params]
+  description = "A (modular, highly tweakable) responsive one-page theme for Hugo"
+  logo = "images/banner.jpg"
+  favicon = true
+
+[Params.social]
+  github = "https://github.com/caressofsteel/"
+  twitter = "https://twitter.com/caressofsteel_"
+  email = "caressofsteel@protonmail.com"
+  instagram = "https://instagram.com"
+  linkedin = "https://linkedin.com"
+  telegram = "https://telegram.org"