Migration to new site.

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/_vars.scss

@@ -5,36 +5,55 @@
 
 // Duration.
 	$duration: (
-		transition:			0.2s,
-		bg:					1.75s,
-		main:				1s
+		transition:			0.2s
 	);
 
 // Size.
 	$size: (
-		border-radius:		4px,
-		border-width:		1px,
+		border-radius:		0.35em,
 		element-height:		2.75em,
-		element-margin:		1.5em,
-		letter-spacing:		0.2em
+		element-margin:		2em,
+		container-width:	100%
 	);
 
 // Font.
 	$font: (
 		family:				('Source Sans Pro', Helvetica, sans-serif),
 		family-fixed:		('Courier New', monospace),
-		weight:				300
+		weight:				400,
+		weight-bold:		400
 	);
 
 // Palette.
 	$palette: (
-		bg:					#ffffff,
-		bg-alt:				#e1dfe8,
-		fg:					#414f57,
-		fg-bold:			#313f47,
-		fg-light:			#616f77,
-		border:				#c8cccf,
-		accent1:			#ffa596,
-		accent2:			#00e4ff,
-		highlight:			#ff7496
+		bg:					#fff,
+		fg:					#a2a2a2,
+		fg-bold:			#787878,
+		fg-light:			#b2b2b2,
+		border:				#efefef,
+		border-bg:			#f7f7f7,
+		border2:			#dfdfdf,
+		border2-bg:			#e7e7e7,
+
+		accent1: (
+			bg:				#49bf9d,
+			fg:				mix(#49bf9d, #ffffff, 25%),
+			fg-bold:		#ffffff,
+			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)
+		),
+
+		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)
+		)
 	);