v3.6.2

Co-Authored-By: David Miller <dmcert@outlook.com>

CNAME

@@ -1 +1 @@
-github.www.davidmiller.top
+zhanganjun.com

assets/css/Source_Sans_Pro.css

@@ -0,0 +1,112 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJT9g.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7jsDJT9g.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7rsDJT9g.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7ksDJT9g.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7osDJT9g.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7psDJT9g.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  src: url(../webfonts/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7nsDI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lqDY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lqDY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lqDY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lqDY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../webfonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

assets/css/fontawesome-all.min.css

@@ -1,7 +1,4 @@
-/*!
- * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
+
 
 
 

assets/js/breakpoints.min.js

@@ -0,0 +1 @@
+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 @@
+var browser=function(){"use strict";var t={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,r=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+r in n||"Webkit"+r in n||"O"+r in n||"ms"+r in n},init:function(){for(var e=navigator.userAgent,n="other",r=0,i=[["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]+)/]],o=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(RegExp.$1);break}for(t.name=n,t.version=r,n="other",i=[["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]],o=r=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(i[o][2]?i[o][2](RegExp.$1):RegExp.$1);break}"mac"==n&&"ontouchstart"in window&&(1024==screen.width&&1366==screen.height||834==screen.width&&1112==screen.height||810==screen.width&&1080==screen.height||768==screen.width&&1024==screen.height)&&(n="ios"),t.os=n,t.osVersion=r,t.touch="wp"==t.os?0<navigator.msMaxTouchPoints:!!("ontouchstart"in window),t.mobile="wp"==t.os||"android"==t.os||"ios"==t.os||"bb"==t.os}};return t.init(),t}();!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/main.js

@@ -1,171 +1,111 @@
-/*
-	Eventually by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-*/
+(function($) {
 
-(function() {
+	var $window = $(window),
+		$body = $('body'),
+		$header = $('#header'),
+		$footer = $('#footer'),
+		$main = $('#main'),
+		settings = {
 
-	"use strict";
+			// Parallax background effect?
+				parallax: true,
 
-	var	$body = document.querySelector('body');
+			// Parallax factor (lower = more intense, higher = less intense).
+				parallaxFactor: 20
 
-	// Methods/polyfills.
+		};
 
-		// classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org
-			!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}function n(t,n,i){Object.defineProperty?Object.defineProperty(t,n,{get:i}):t.__defineGetter__(n,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,e=i.push,s=i.splice,o=i.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);s.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,n(Element.prototype,"classList",function(){return new t(this)})}}();
-
-		// canUse
-			window.canUse=function(p){if(!window._canUse)window._canUse=document.createElement("div");var e=window._canUse.style,up=p.charAt(0).toUpperCase()+p.slice(1);return p in e||"Moz"+up in e||"Webkit"+up in e||"O"+up in e||"ms"+up in e};
-
-		// window.addEventListener
-			(function(){if("addEventListener"in window)return;window.addEventListener=function(type,f){window.attachEvent("on"+type,f)}})();
+	// Breakpoints.
+		breakpoints({
+			xlarge:  [ '1281px',  '1800px' ],
+			large:   [ '981px',   '1280px' ],
+			medium:  [ '737px',   '980px'  ],
+			small:   [ '481px',   '736px'  ],
+			xsmall:  [ null,      '480px'  ],
+		});
 
 	// Play initial animations on page load.
-		window.addEventListener('load', function() {
+		$window.on('load', function() {
 			window.setTimeout(function() {
-				$body.classList.remove('is-preload');
+				$body.removeClass('is-preload');
 			}, 100);
 		});
 
-	// Slideshow Background.
-		(function() {
+	// Touch?
+		if (browser.mobile) {
 
-			// Settings.
-				var settings = {
+			// Turn on touch mode.
+				$body.addClass('is-touch');
 
-					// Images (in the format of 'url': 'alignment').
-						images: {
-							'images/bg01.jpg': 'center',
-							'images/bg02.jpg': 'center',
-							'images/bg03.jpg': 'center'
-						},
+			// Height fix (mostly for iOS).
+				window.setTimeout(function() {
+					$window.scrollTop($window.scrollTop() + 1);
+				}, 0);
 
-					// Delay.
-						delay: 6000
+		}
 
-				};
+	// Footer.
+		breakpoints.on('<=medium', function() {
+			$footer.insertAfter($main);
+		});
 
-			// Vars.
-				var	pos = 0, lastPos = 0,
-					$wrapper, $bgs = [], $bg,
-					k, v;
+		breakpoints.on('>medium', function() {
+			$footer.appendTo($header);
+		});
 
-			// Create BG wrapper, BGs.
-				$wrapper = document.createElement('div');
-					$wrapper.id = 'bg';
-					$body.appendChild($wrapper);
+	// Header.
 
-				for (k in settings.images) {
+		// Parallax background.
 
-					// Create BG.
-						$bg = document.createElement('div');
-							$bg.style.backgroundImage = 'url("' + k + '")';
-							$bg.style.backgroundPosition = settings.images[k];
-							$wrapper.appendChild($bg);
+			// Disable parallax on IE (smooth scrolling is jerky), and on mobile platforms (= better performance).
+				if (browser.name == 'ie'
+				||	browser.mobile)
+					settings.parallax = false;
 
-					// Add it to array.
-						$bgs.push($bg);
+			if (settings.parallax) {
 
-				}
+				breakpoints.on('<=medium', function() {
 
-			// Main loop.
-				$bgs[pos].classList.add('visible');
-				$bgs[pos].classList.add('top');
-
-				// Bail if we only have a single BG or the client doesn't support transitions.
-					if ($bgs.length == 1
-					||	!canUse('transition'))
-						return;
-
-				window.setInterval(function() {
-
-					lastPos = pos;
-					pos++;
-
-					// Wrap to beginning if necessary.
-						if (pos >= $bgs.length)
-							pos = 0;
-
-					// Swap top images.
-						$bgs[lastPos].classList.remove('top');
-						$bgs[pos].classList.add('visible');
-						$bgs[pos].classList.add('top');
-
-					// Hide last image after a short delay.
-						window.setTimeout(function() {
-							$bgs[lastPos].classList.remove('visible');
-						}, settings.delay / 2);
-
-				}, settings.delay);
-
-		})();
-
-	// Signup Form.
-		(function() {
-
-			// Vars.
-				var $form = document.querySelectorAll('#signup-form')[0],
-					$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
-					$message;
-
-			// Bail if addEventListener isn't supported.
-				if (!('addEventListener' in $form))
-					return;
-
-			// Message.
-				$message = document.createElement('span');
-					$message.classList.add('message');
-					$form.appendChild($message);
-
-				$message._show = function(type, text) {
-
-					$message.innerHTML = text;
-					$message.classList.add(type);
-					$message.classList.add('visible');
-
-					window.setTimeout(function() {
-						$message._hide();
-					}, 3000);
-
-				};
-
-				$message._hide = function() {
-					$message.classList.remove('visible');
-				};
-
-			// Events.
-			// Note: If you're *not* using AJAX, get rid of this event listener.
-				$form.addEventListener('submit', function(event) {
-
-					event.stopPropagation();
-					event.preventDefault();
-
-					// Hide message.
-						$message._hide();
-
-					// Disable submit.
-						$submit.disabled = true;
-
-					// Process form.
-					// Note: Doesn't actually do anything yet (other than report back with a "thank you"),
-					// but there's enough here to piece together a working AJAX submission call that does.
-						window.setTimeout(function() {
-
-							// Reset form.
-								$form.reset();
-
-							// Enable submit.
-								$submit.disabled = false;
-
-							// Show message.
-								$message._show('success', 'Thank you!');
-								//$message._show('failure', 'Something went wrong. Please try again.');
-
-						}, 750);
+					$window.off('scroll.strata_parallax');
+					$header.css('background-position', '');
 
 				});
 
-		})();
+				breakpoints.on('>medium', function() {
 
-})();
+					$header.css('background-position', 'left 0px');
+
+					$window.on('scroll.strata_parallax', function() {
+						$header.css('background-position', 'left ' + (-1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px');
+					});
+
+				});
+
+				$window.on('load', function() {
+					$window.triggerHandler('scroll');
+				});
+
+			}
+
+	// Main Sections: Two.
+
+		// Lightbox gallery.
+			$window.on('load', function() {
+
+				$('#two').poptrox({
+					caption: function($a) { return $a.next('h3').text(); },
+					overlayColor: '#2c2c2c',
+					overlayOpacity: 0.85,
+					popupCloserText: '',
+					popupLoaderText: '',
+					selector: '.work-item a.image',
+					usePopupCaption: true,
+					usePopupDefaultStyling: false,
+					usePopupEasyClose: false,
+					usePopupNav: true,
+					windowMargin: (breakpoints.active('<=small') ? 0 : 50)
+				});
+
+			});
+
+})(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/_bg.scss

@@ -1,67 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* BG */
-
-	#bg {
-		@include vendor('transition', 'opacity #{_duration(bg-fadein)} ease-in-out');
-		height: 100%;
-		left: 0;
-		opacity: 0.375;
-		position: fixed;
-		top: 0;
-		width: 100%;
-		z-index: 1;
-
-		div {
-			@include vendor('transition', ('opacity #{_duration(bg-transition)} ease'));
-			background-size: cover;
-			height: 100%;
-			left: 0;
-			opacity: 0;
-			position: absolute;
-			top: 0;
-			visibility: hidden;
-			width: 150%;
-
-			&.visible {
-				@include vendor('animation', 'bg #{_duration(bg-slide)} linear infinite');
-				opacity: 1;
-				visibility: visible;
-				z-index: 1;
-
-				&.top {
-					z-index: 2;
-				}
-
-				@include breakpoint('<=large') {
-					@include vendor('animation', 'bg #{_duration(bg-slide) * 0.65} linear infinite');
-				}
-
-				@include breakpoint('<=small') {
-					@include vendor('animation', 'bg #{_duration(bg-slide) * 0.4} linear infinite');
-				}
-			}
-
-			&:only-child {
-				@include vendor('animation-direction', 'alternate !important');
-			}
-		}
-
-		body.is-preload & {
-			opacity: 0;
-		}
-	}
-
-	@include keyframes(bg) {
-		0% {
-			@include vendor('transform', 'translateX(0)');
-		}
-
-		100% {
-			@include vendor('transform', 'translateX(-25%)');
-		}
-	}

assets/sass/base/_page.scss

@@ -1,78 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/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;
-		}
-
-	html, body {
-		height: 100%;
-		overflow-x: hidden;
-		width: 100%;
-
-		@include breakpoint('short') {
-			height: auto;
-			min-height: 100%;
-		}
-	}
-
-	body {
-		@include vendor('display', 'flex');
-		@include vendor('flex-direction', 'column');
-		@include vendor('justify-content', 'center');
-		background-color: _palette(bg);
-		padding: 6em 4em 4em 4em;
-
-		// Stops initial animations until page loads.
-			&.is-preload {
-				*, *:before, *:after {
-					@include vendor('animation', 'none !important');
-					@include vendor('transition', 'none !important');
-				}
-			}
-
-		> * {
-			position: relative;
-			z-index: 2;
-		}
-
-		@include breakpoint('<=xlarge') {
-			padding: 6em 3.5em 3.5em 3.5em;
-		}
-
-		@include breakpoint('<=small') {
-			padding: 5em 2em 2em 2em;
-		}
-
-		@include breakpoint('<=xxsmall') {
-			padding: 5em 1.25em 1.25em 1.25em;
-		}
-	}

assets/sass/base/_reset.scss

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

assets/sass/base/_typography.scss

@@ -1,160 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Type */
-
-	body, input, select, textarea {
-		color: _palette(fg);
-		font-family: _font(family);
-		font-size: 16pt;
-		font-weight: _font(weight);
-		letter-spacing: _font(letter-spacing);
-		line-height: 1.65em;
-
-		@include breakpoint('<=xlarge') {
-			font-size: 12pt;
-		}
-
-		@include breakpoint('<=large') {
-			font-size: 11pt;
-		}
-
-		@include breakpoint('<=medium') {
-			font-size: 12pt;
-		}
-
-		@include breakpoint('<=small') {
-			font-size: 12pt;
-		}
-
-		@include breakpoint('<=xsmall') {
-			font-size: 12pt;
-		}
-	}
-
-	a {
-		@include vendor('transition', (
-			'border-bottom-color #{_duration(transition)} ease',
-			'color #{_duration(transition)} ease'
-		));
-		border-bottom: dotted 1px _palette(border2);
-		color: _palette(accent, bg);
-		text-decoration: none;
-
-		&:hover {
-			border-bottom-color: transparent;
-			color: _palette(accent, bg) !important;
-			text-decoration: none;
-		}
-	}
-
-	strong, b {
-		color: _palette(fg-bold);
-		font-weight: _font(weight-bold);
-	}
-
-	em, i {
-		font-style: italic;
-	}
-
-	p {
-		margin: 0 0 _size(element-margin) 0;
-	}
-
-	h1, h2, h3, h4, h5, h6 {
-		color: _palette(fg-bold);
-		font-weight: _font(weight-bold);
-		line-height: 1em;
-		margin: 0 0 (_size(element-margin) * 0.5) 0;
-
-		a {
-			color: inherit;
-			text-decoration: none;
-		}
-	}
-
-	h1 {
-		font-size: 2.5em;
-		line-height: 1.25em;
-	}
-
-	h2 {
-		font-size: 1.75em;
-		line-height: 1.5em;
-	}
-
-	h3 {
-		font-size: 1.35em;
-		line-height: 1.5em;
-	}
-
-	h4 {
-		font-size: 1.1em;
-		line-height: 1.5em;
-	}
-
-	h5 {
-		font-size: 0.9em;
-		line-height: 1.5em;
-	}
-
-	h6 {
-		font-size: 0.7em;
-		line-height: 1.5em;
-	}
-
-	sub {
-		font-size: 0.8em;
-		position: relative;
-		top: 0.5em;
-	}
-
-	sup {
-		font-size: 0.8em;
-		position: relative;
-		top: -0.5em;
-	}
-
-	blockquote {
-		border-left: solid (_size(border-width) * 4) _palette(border);
-		font-style: italic;
-		margin: 0 0 _size(element-margin) 0;
-		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
-	}
-
-	code {
-		background: _palette(border-bg);
-		border-radius: _size(border-radius);
-		border: solid _size(border-width) _palette(border);
-		font-family: _font(family-fixed);
-		font-size: 0.9em;
-		margin: 0 0.25em;
-		padding: 0.25em 0.65em;
-	}
-
-	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.75em;
-			padding: 1em 1.5em;
-			overflow-x: auto;
-		}
-	}
-
-	hr {
-		border: 0;
-		border-bottom: solid _size(border-width) _palette(border);
-		margin: _size(element-margin) 0;
-
-		&.major {
-			margin: (_size(element-margin) * 1.5) 0;
-		}
-	}

assets/sass/components/_button.scss

@@ -1,50 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/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',
-			'color #{_duration(transition)} ease-in-out',
-			'opacity #{_duration(transition)} ease-in-out'
-		));
-		background-color: _palette(accent, bg);
-		border-radius: _size(border-radius);
-		border: 0;
-		color: _palette(accent, fg-bold) !important;
-		cursor: pointer;
-		display: inline-block;
-		font-weight: _font(weight-bold);
-		height: _size(element-height);
-		line-height: _size(element-height);
-		padding: 0 1.125em;
-		text-align: center;
-		text-decoration: none;
-		white-space: nowrap;
-
-		&:hover {
-			background-color: lighten(_palette(accent, bg), 5);
-		}
-
-		&:active {
-			background-color: darken(_palette(accent, bg), 5);
-		}
-
-		&.disabled,
-		&:disabled {
-			opacity: 0.5;
-		}
-
-		@include breakpoint('<=xsmall') {
-			padding: 0;
-		}
-	}

assets/sass/components/_form.scss

@@ -1,227 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Form */
-
-	form {
-		margin: 0 0 _size(element-margin) 0;
-
-		.message {
-			@include icon(false, solid);
-			@include vendor('transition', (
-				'opacity #{_duration(transition)} ease-in-out',
-				'transform #{_duration(transition)} ease-in-out'
-			));
-			@include vendor('transform', 'scale(1.05)');
-			height: _size(element-height);
-			line-height: _size(element-height);
-			opacity: 0;
-
-			&:before {
-				margin-right: 0.5em;
-			}
-
-			&.visible {
-				@include vendor('transform', 'scale(1)');
-				opacity: 1;
-			}
-
-			&.success {
-				color: _palette(positive, bg);
-
-				&:before {
-					content: '\f00c';
-				}
-			}
-
-			&.failure {
-				color: _palette(negative, bg);
-
-				&:before {
-					content: '\f119';
-				}
-			}
-		}
-	}
-
-	label {
-		color: _palette(fg-bold);
-		display: block;
-		font-size: 0.9em;
-		font-weight: _font(weight-bold);
-		margin: 0 0 (_size(element-margin) * 0.5) 0;
-	}
-
-	@include keyframes(focus) {
-		0% { @include vendor('transform', 'scale(1)'); }
-		50% { @include vendor('transform', 'scale(1.025)'); }
-		100% { @include vendor('transform', 'scale(1)'); }
-	}
-
-	input[type="text"],
-	input[type="password"],
-	input[type="email"],
-	select,
-	textarea {
-		@include vendor('appearance', 'none');
-		@include vendor('transform', 'scale(1)');
-		@include vendor('transition', (
-			'border-color #{_duration(transition)} ease',
-			'background-color #{_duration(transition)} ease'
-		));
-		background-color: transparent;
-		border-radius: _size(border-radius);
-		border: none;
-		border: solid _size(border-width) _palette(border);
-		color: inherit;
-		display: block;
-		outline: 0;
-		padding: 0 1em;
-		text-decoration: none;
-		width: 100%;
-
-		&:invalid {
-			box-shadow: none;
-		}
-
-		&:focus {
-			@include vendor('animation', 'focus 0.1s');
-			background-color: _palette(border-bg);
-			border-color: _palette(accent, bg);
-		}
-	}
-
-	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>");
-		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;
-
-		option {
-			color: _palette(fg-bold);
-			background: _palette(bg);
-		}
-
-		&:focus {
-			&::-ms-value {
-				background-color: transparent;
-			}
-		}
-
-		&::-ms-expand {
-			display: none;
-		}
-	}
-
-	input[type="text"],
-	input[type="password"],
-	input[type="email"],
-	select {
-		height: _size(element-height);
-	}
-
-	textarea {
-		padding: 0.75em 1em;
-	}
-
-	input[type="checkbox"],
-	input[type="radio"], {
-		@include vendor('appearance', 'none');
-		display: block;
-		float: left;
-		margin-right: -2em;
-		opacity: 0;
-		width: 1em;
-		z-index: -1;
-
-		& + label {
-			@include icon(false, solid);
-			color: _palette(fg);
-			cursor: pointer;
-			display: inline-block;
-			font-size: 1em;
-			font-weight: _font(weight);
-			padding-left: (_size(element-height) * 0.6) + 0.75em;
-			padding-right: 0.75em;
-			position: relative;
-
-			&:before {
-				background: _palette(border-bg);
-				border-radius: _size(border-radius);
-				border: solid _size(border-width) _palette(border);
-				content: '';
-				display: inline-block;
-				font-size: 0.8em;
-				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 {
-				background: _palette(accent, bg);
-				border-color: _palette(accent, bg);
-				color: _palette(accent, fg-bold);
-				content: '\f00c';
-			}
-		}
-
-		&:focus + label {
-			&:before {
-				border-color: _palette(accent, bg);
-				box-shadow: 0 0 0 _size(border-width) _palette(accent, bg);
-			}
-		}
-	}
-
-	input[type="checkbox"] {
-		& + label {
-			&:before {
-				border-radius: _size(border-radius);
-			}
-		}
-	}
-
-	input[type="radio"] {
-		& + label {
-			&:before {
-				border-radius: 100%;
-			}
-		}
-	}
-
-	::-webkit-input-placeholder {
-		color: _palette(fg-light) !important;
-		opacity: 1.0;
-	}
-
-	:-moz-placeholder {
-		color: _palette(fg-light) !important;
-		opacity: 1.0;
-	}
-
-	::-moz-placeholder {
-		color: _palette(fg-light) !important;
-		opacity: 1.0;
-	}
-
-	:-ms-input-placeholder {
-		color: _palette(fg-light) !important;
-		opacity: 1.0;
-	}
-
-	.formerize-placeholder {
-		color: _palette(fg-light) !important;
-		opacity: 1.0;
-	}

assets/sass/components/_icon.scss

@@ -1,33 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Icon */
-
-	.icon {
-		@include icon;
-		border-bottom: none;
-		position: relative;
-
-		> .label {
-			display: none;
-		}
-
-		&:before {
-			line-height: inherit;
-		}
-
-		&.solid {
-			&:before {
-				font-weight: 900;
-			}
-		}
-
-		&.brands {
-			&:before {
-				font-family: 'Font Awesome 5 Brands';
-			}
-		}
-	}

assets/sass/components/_icons.scss

@@ -1,32 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Icons */
-
-	ul.icons {
-		cursor: default;
-		list-style: none;
-		padding-left: 0;
-
-		li {
-			display: inline-block;
-			padding: 0 1em 0 0;
-
-			&:last-child {
-				padding-right: 0;
-			}
-
-			.icon {
-				&:before {
-					font-size: 1.25em;
-				}
-			}
-
-			a {
-				color: inherit;
-			}
-		}
-	}

assets/sass/components/_list.scss

@@ -1,27 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* List */
-
-	ol {
-		list-style: decimal;
-		margin: 0 0 _size(element-margin) 0;
-		padding-left: 1.25em;
-
-		li {
-			padding-left: 0.25em;
-		}
-	}
-
-	ul {
-		list-style: disc;
-		margin: 0 0 _size(element-margin) 0;
-		padding-left: 1em;
-
-		li {
-			padding-left: 0.5em;
-		}
-	}

assets/sass/components/_section.scss

@@ -1,59 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Section/Article */
-
-	section, article {
-		&.special {
-			text-align: center;
-		}
-	}
-
-	header {
-		p {
-			color: _palette(fg-light);
-			position: relative;
-			margin: 0 0 (_size(element-margin) * 0.75) 0;
-		}
-
-		h2 + p {
-			font-size: 1.25em;
-			margin-top: (_size(element-margin) * -0.5);
-			line-height: 1.5em;
-		}
-
-		h3 + p {
-			font-size: 1.1em;
-			margin-top: (_size(element-margin) * -0.4);
-			line-height: 1.5em;
-		}
-
-		h4 + p,
-		h5 + p,
-		h6 + p {
-			font-size: 0.9em;
-			margin-top: (_size(element-margin) * -0.3);
-			line-height: 1.5em;
-		}
-
-		@include breakpoint('<=medium') {
-			br {
-				display: none;
-			}
-		}
-
-		@include breakpoint('<=small') {
-			br {
-				display: inline;
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			br {
-				display: none;
-			}
-		}
-	}

assets/sass/layout/_footer.scss

@@ -1,74 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Footer */
-
-	#footer {
-		@include vendor('transition', 'opacity 0.5s ease-in-out');
-		bottom: 4em;
-		color: _palette(fg-light);
-		left: 4em;
-		opacity: 0.5;
-		position: absolute;
-
-		.icons {
-			margin: 0 0 (_size(element-margin) * 0.25) 0;
-		}
-
-		.copyright {
-			font-size: 0.8em;
-			list-style: none;
-			padding: 0;
-
-			li {
-				border-left: solid 1px _palette(border2);
-				display: inline-block;
-				line-height: 1em;
-				margin: 0 0 0 0.75em;
-				padding: 0 0 0 0.75em;
-
-				&:first-child {
-					border-left: 0;
-					margin-left: 0;
-					padding-left: 0;
-				}
-			}
-
-			a {
-				color: inherit;
-			}
-		}
-
-		&:hover {
-			opacity: 1;
-		}
-
-		> :last-child {
-			margin-bottom: 0;
-		}
-
-		@include breakpoint('<=xlarge') {
-			bottom: 3.5em;
-			left: 3.5em;
-		}
-
-		@include breakpoint('<=small') {
-			bottom: 2em;
-			left: 2em;
-		}
-
-		@include breakpoint('<=xxsmall') {
-			bottom: 1.25em;
-			left: 1.25em;
-		}
-
-		@include breakpoint('short') {
-			bottom: auto;
-			left: auto;
-			margin: (_size(element-margin) * 0.5) 0 0 0;
-			position: relative;
-		}
-	}

assets/sass/layout/_header.scss

@@ -1,37 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Header */
-
-	#header {
-		h1 {
-			font-size: 3.25em;
-			margin: 0 0 (_size(element-margin) * 0.275) 0;
-		}
-
-		p {
-			font-size: 1.35em;
-			line-height: 1.65em;
-		}
-
-		a {
-			color: inherit;
-		}
-
-		@include breakpoint('<=small') {
-			h1 {
-				font-size: 2em;
-			}
-
-			p {
-				font-size: 1em;
-			}
-		}
-
-		@include breakpoint('<=xsmall') {
-			margin: 0 0 (_size(element-margin) * 0.5) 0;
-		}
-	}

assets/sass/layout/_signup-form.scss

@@ -1,50 +0,0 @@
-///
-/// Eventually by HTML5 UP
-/// html5up.net | @ajlkn
-/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-///
-
-/* Signup Form */
-
-	#signup-form {
-		@include vendor('display', 'flex');
-		position: relative;
-
-		input[type="text"],
-		input[type="password"],
-		input[type="email"] {
-			width: 18em;
-		}
-
-		> * {
-			margin: 0 0 0 1em;
-		}
-
-		> :first-child {
-			margin: 0 0 0 0;
-		}
-
-		@include breakpoint('<=xsmall') {
-			@include vendor('flex-direction', 'column');
-
-			input[type="type"],
-			input[type="password"],
-			input[type="email"] {
-				width: 100%;
-			}
-
-			> * {
-				margin: 1.25em 0 0 0;
-			}
-
-			.message {
-				bottom: -1.5em;
-				font-size: 0.9em;
-				height: 1em;
-				left: 0;
-				line-height: inherit;
-				margin-top: 0;
-				position: absolute;
-			}
-		}
-	}

assets/sass/libs/_breakpoints.scss

@@ -1,5 +1,3 @@
-// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
-
 // Vars.
 
 	/// Breakpoints.

assets/sass/libs/_html-grid.scss

@@ -0,0 +1,147 @@
+// 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/_vars.scss

@@ -1,59 +1,59 @@
 // Misc.
 	$misc: (
+		z-index-base:		10000
 	);
 
 // Duration.
 	$duration: (
-		nav:				0.5s,
-		transition:			0.2s,
-		bg-fadein:			2s,
-		bg-transition:		3s,
-		bg-slide:			45s // (lower = faster, higher = slower)
+		transition:			0.2s
 	);
 
 // Size.
 	$size: (
-		border-radius:		6px,
-		border-width:		2px,
+		border-radius:		0.35em,
 		element-height:		2.75em,
-		element-margin:		2em
+		element-margin:		2em,
+		container-width:	100%
 	);
 
 // Font.
 	$font: (
-		family:				('Roboto', sans-serif),
+		family:				('Source Sans Pro', Helvetica, sans-serif),
 		family-fixed:		('Courier New', monospace),
 		weight:				400,
-		weight-bold:		700,
-		letter-spacing:		-0.01em
+		weight-bold:		400
 	);
 
 // Palette.
 	$palette: (
-		bg:					#000,
-		fg:					rgba(255,255,255,0.75),
-		fg-bold:			#fff,
-		fg-light:			rgba(255,255,255,0.5),
-		border:				rgba(255,255,255,0.35),
-		border-bg:			rgba(255,255,255,0.125),
-		border2:			rgba(255,255,255,0.25),
+		bg:					#fff,
+		fg:					#a2a2a2,
+		fg-bold:			#787878,
+		fg-light:			#b2b2b2,
+		border:				#efefef,
+		border-bg:			#f7f7f7,
+		border2:			#dfdfdf,
+		border2-bg:			#e7e7e7,
 
-		accent: (
-			bg:				#1cb495,
-			fg:				mix(#1cb495, #ffffff, 25%),
+		accent1: (
+			bg:				#49bf9d,
+			fg:				mix(#49bf9d, #ffffff, 25%),
 			fg-bold:		#ffffff,
-			fg-light:		mix(#1cb495, #ffffff, 40%),
+			fg-light:		mix(#49bf9d, #ffffff, 40%),
 			border:			rgba(255,255,255,0.25),
 			border-bg:		rgba(255,255,255,0.075),
+			border2:		rgba(255,255,255,0.5),
+			border2-bg:		rgba(255,255,255,0.2)
 		),
 
-		positive: (
-			bg:				#1cb495,
-			fg:				#ffffff
-		),
-
-		negative: (
-			bg:				#ff2361,
-			fg:				#ffffff
+		accent2: (
+			bg:				#1f1815,
+			fg:				rgba(255,255,255,0.5),
+			fg-bold:		#ffffff,
+			fg-light:		rgba(255,255,255,0.4),
+			border:			rgba(255,255,255,0.25),
+			border-bg:		rgba(255,255,255,0.075),
+			border2:		rgba(255,255,255,0.5),
+			border2-bg:		rgba(255,255,255,0.2)
 		)
 	);

assets/sass/libs/_vendor.scss

@@ -1,5 +1,3 @@
-// vendor.scss v1.0 | @ajlkn | MIT licensed */
-
 // Vars.
 
 	/// Vendor prefixes.

index.html

@@ -1,49 +1,79 @@
 <!DOCTYPE HTML>
-<!--
-	Eventually by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 	<head>
-		<title>David Miller's HomePage</title>
+		<title>Zhang Anjun's Homepage</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" />
 	</head>
 	<body class="is-preload">
+
 		<!-- Header -->
 			<header id="header">
-				<h1>David Miller's HomePage</h1>
-				<p>A High School Student From Beijing, China<br/>
-				Subsrcibe through email and keep you informed</p>
+				<div class="inner">
+					<a href="https://static.zhanganjun.com/common/avatar.jpg" class="image avatar"><img src="https://static.zhanganjun.com/common/avatar.jpg" alt="" /></a>
+					<h1><strong>I am Zhang Anjun</strong>, a freshman at BJUT,<br />
+					living in Beijing</h1>
+				</div>
 			</header>
 
-		<!-- Signup Form -->
-			<form id="signup-form" method="post" action="#">
-				<input type="email" name="email" id="email" placeholder="Email Address" />
-				<input type="submit" value="Sign Up" />
-			</form>
+		<!-- Main -->
+			<div id="main">
+
+				<!-- One -->
+					<section id="one">
+						<header class="major">
+							<h2>About Me</h2>
+						</header>
+						<p>I'm really into computer programming and games. I'm majoring in software engineering at Beijing University of Technology now. I also like playing games like Super Mario Bros. Wonder, It Takes Two and God of War</p>
+					</section>
+
+				<!-- Two -->
+					<section id="two">
+						<h2>Recent Work</h2>
+						<div class="row">
+							<article class="col-6 col-12-xsmall work-item">
+								<a href="images/pki.jpg" class="image fit thumb"><img src="images/pki.jpg" alt="" /></a>
+								<h3><a href="https://dmpki.com">PKI Services</a></h3>
+								<p>PKI system supports the generation, issuance, distribution, revocation, administration, and management of public/private cryptographic keys that are contained in CA-signed X.509 Certificates.</p>
+							</article>
+							<article class="col-6 col-12-xsmall work-item">
+								<a href="images/connect4.jpg" class="image fit thumb"><img src="images/connect4.jpg" alt="" /></a>
+								<h3><a href="https://github.com/CitizenBeta/Connect4">Connect 4 Game</a></h3>
+								<p>A Python implementation of the classic text-based Connect 4 game.</p>
+							</article>
+						</div>
+					</section>
 
 		<!-- Footer -->
 			<footer id="footer">
-				<ul class="icons">
-					<li><a href="https://wechat.davidmiller.top" class="icon brands fa-weixin"><span class="label">WeChat</span></a></li>
-					<li><a href="https://twitter.com/CitizenBeta2" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-					<li><a href="https://github.com/CitizenBeta2" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-					<li><a href="mailto:davidmillercn@outlook.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
-					<li><a href="https://img.davidmiller.top/qq.jpg" class="icon brands fa-qq"><span class="label">QQ</span></a></li>
-					<li><a href="https://pki.davidmiller.top" class="icon solid fa-key"><span class="label">PKI</span></a></li>
-					<li><a href="https://www.facebook.com/CitizenBeta2" class="icon brands fa-facebook"><span class="label">Facebook</span></a></li>
-					<li><a href="https://steam.davidmiller.top" class="icon brands fa-steam"><span class="label">Steam</span></a></li>
-				</ul>
-				<ul class="copyright">
-					<li>&copy; David Miller.</li><li>Credits: <a href="https://github.com/CitizenBeta2/HomePage">GitHub Repository</a></li>
-				</ul>
+				<div class="inner">
+					<ul class="icons">
+						<li><a href="mailto:admin@zhanganjun.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
+						<li><a href="https://steamcommunity.com/id/citizenbeta/" class="icon brands fa-steam"><span class="label">Steam</span></a></li>
+						<li><a href="https://www.facebook.com/CitizenBeta2" class="icon brands fa-facebook"><span class="label">Facebook</span></a></li>
+						<li><a href="https://x.com/CitizenBeta2" class="icon brands fa-twitter"><span class="label">X</span></a></li>
+						<li><a href="https://github.com/CitizenBeta" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
+					</ul>
+					<ul class="copyright">
+						<li>&copy; <span id=year><script>document.getElementById("year").innerHTML=(new Date).getFullYear()</script></span> Zhang Anjun. All rights reserved.</li>
+						<li><a href="https://github.com/CitizenBeta/Homepage/releases/tag/v3.6.2">v3.6.2</a></li>
+						<li><a href="https://zaj.statuspage.io/">System Status</a></li>
+						<li><img src="https://static.zhanganjun.com/common/beian.png" style="width:16px;"/><a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010802045392" rel="noreferrer" target="_blank">京公网安备11010802045392号</a></li>
+						<li><a href="https://beian.miit.gov.cn" target="_blank">京ICP备2025105392号-2</a></li>
+					</ul>
+				</div>
+				
 			</footer>
 
 		<!-- Scripts -->
+			<script src="assets/js/jquery.min.js"></script>
+			<script src="assets/js/jquery.poptrox.min.js"></script>
+			<script src="assets/js/browser.min.js"></script>
+			<script src="assets/js/breakpoints.min.js"></script>
+			<script src="assets/js/util.js"></script>
 			<script src="assets/js/main.js"></script>
+			<script src="https://static.zhanganjun.com/status/embed.js"></script>	
 
 	</body>
 </html>