initial

11 files changed, 765 insertions, 0 deletions

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
new file mode 100644
index 0000000..0879b18
--- /dev/null
+++ b/src/scss/_mixins.scss
@@ -0,0 +1,91 @@
+@mixin box-sizing {
+	* {
+		-moz-box-sizing: border-box;
+		-webkit-border-box: border-box;
+		box-sizing: border-box;
+	}
+}
+
+@mixin section {
+	border: $border-width solid $border-color;
+	@include border-radius($outer-radius);
+	background: $black;
+	margin-bottom: $outer-gap;
+}
+
+@mixin linear-gradient($deg, $first, $values...) {
+	background-color: $first;
+	background: -webkit-linear-gradient($deg, $first, $values);
+	background: -moz-linear-gradient($deg, $first, $values);
+	background: linear-gradient($deg, $first, $values);
+}
+
+@mixin border-radius($radius) {
+	-moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+	border-radius: $radius;
+}
+
+@mixin text-decoration($decor) {
+	-moz-text-decoration: $decor;
+	-webkit-text-decoration: $decor;
+	text-decoration: $decor;
+}
+
+@mixin keyframes($name) {
+	@-webkit-keyframes #{$name} { @content; }
+	@-moz-keyframes #{$name} { @content; }
+	@keyframes #{$name} { @content; }
+}
+
+@mixin animation($args...) {
+	-moz-animation: $args;
+	-webkit-animation: $args;
+	animation: $args;
+}
+
+@mixin animation-delay($args...) {
+	-moz-animation-delay: $args;
+	-webkit-animation-delay: $args;
+	animation-delay: $args;
+}
+
+@mixin transition($trans...) {
+	-moz-transition: $trans;
+	-webkit-transition: $trans;
+	transition: $trans;
+}
+
+@mixin transform($trans...) {
+	-moz-transform: $trans;
+	-webkit-transform: $trans;
+	transform: $trans;
+}
+
+@mixin font-face($name) {
+	@font-face {
+		font-family: $name;
+		src: url("../font/" + $name + ".eot");
+		src: url("../font/" + $name + ".eot?#iefix") format("embedded-opentype"),
+			 url("../font/" + $name + ".woff2") format("woff2"),
+			 url("../font/" + $name + ".woff") format("woff"),
+			 url("../font/" + $name + ".ttf") format("truetype"),
+			 url("../font/" + $name + ".otf") format("opentype"),
+			 url("../font/" + $name + ".svg#" + $name) format('svg');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+}
+
+@mixin display-table($spacing) {
+	-dt-display: table;
+	display: table;
+	border-spacing: $spacing;
+	-dt-border-spacing: $spacing;
+}
+
+@mixin display-table-cell {
+	-dt-display: table-cell;
+	display: table-cell;
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
new file mode 100644
index 0000000..cfb5f0c
--- /dev/null
+++ b/src/scss/_variables.scss
@@ -0,0 +1,25 @@
+
+$white: #e6edf0;
+$white-alt: #9dabb0;
+$yellow: #dcde81;
+$yellow-alt: #808037;
+$green: #4fd15a;
+$green-alt: #519c57;
+$blue: #366199;
+$blue-alt: #244266;
+$black: #14171d;
+$black-alt: #242526;
+
+$font: 'Courier New', Courier, monospace;
+$header-font: 'FontStuck-Extended', monospace;
+
+$inner-gap: 16px;
+$outer-gap: 16px;
+
+$outer-radius: 8px;
+$inner-radius: 4px;
+
+$border-width: 5px;
+$border-color: #ccc;
+
+$page-width: 1000px;
diff --git a/src/scss/blog.scss b/src/scss/blog.scss
new file mode 100644
index 0000000..ff17caf
--- /dev/null
+++ b/src/scss/blog.scss
@@ -0,0 +1,61 @@
+@import "./variables";
+@import "./mixins";
+
+#blog {
+	padding-bottom: $inner-gap;
+}
+
+#main span {
+	display: inline-block;
+}
+
+#comments {
+	> span {
+		margin-bottom: 10px;
+	}
+
+	.comment {
+		.header {
+			display: inline-block;;
+		}
+		.date {
+			font-size: 70%;
+			display: inline-block;;
+		}
+		.content {
+			margin-top: 0;
+		}
+	}
+
+	#new_comment {
+		margin-left: $inner-gap;
+		max-width: 400px;
+		padding-right: $inner-gap;
+
+		input.hidden {
+			display: none;
+		}
+
+		input#author,
+		input#content {
+			width: 100%;
+		}
+
+		input {
+			@include border-radius($inner-radius);
+			display: block;
+			margin: 10px 0;
+			padding: 5px;
+			border: 2px solid $white-alt;
+			background: $black-alt;
+			color: $white;
+
+			&:hover,
+			&:focus,
+			&:active {
+				outline: none;
+				border: 2px solid $white;
+			}
+		}
+	}
+}
diff --git a/src/scss/bucket.scss b/src/scss/bucket.scss
new file mode 100644
index 0000000..efba81a
--- /dev/null
+++ b/src/scss/bucket.scss
@@ -0,0 +1,2 @@
+@import "./bucket/default";
+@import "./bucket/style";
diff --git a/src/scss/bucket/_default.scss b/src/scss/bucket/_default.scss
new file mode 100644
index 0000000..a9d0add
--- /dev/null
+++ b/src/scss/bucket/_default.scss
@@ -0,0 +1,55 @@
+@import "../mixins";
+
+$red: #ffcaca !default;
+$orange: #ffedc1 !default;
+$yellow: #feffb8 !default;
+$green: #c4ffcb !default;
+$blue: #add8ff !default;
+$purple: #ccafe9 !default;
+
+$darkgreen: #3E885B !default;
+$darkblue: #7fb4f5 !default;
+
+$white: #fefefa !default;
+$lightgray: #94B0C2 !default;
+$lightblue: #d1e9ff !default;
+$gray: #ADACB5 !default;
+$darkgray: #333C57 !default;
+$black: #454545 !default;
+$trueblack: #242424 !default;
+
+$lessred: #ffcacaaa !default;
+$lessorange: #ffedc1aa !default;
+$lessyellow: #feffb8aa !default;
+$lessgreen: #c4ffcbaa !default;
+$lessblue: #add8ffaa !default;
+$lesspurple: #ccafe9aa !default;
+
+$rainbowright:
+	to right,
+	$red 0%,
+	$orange 20%,
+	$yellow 40%,
+	$green 60%,
+	$blue 80%,
+	$purple 100% !default;
+
+$hrainbow:
+	to right,
+	#00000000 0%,
+	$lessred 14%,
+	$orange 28%,
+	$yellow 42%,
+	$green 56%,
+	$blue 70%,
+	$lesspurple 84%,
+	#00000000 100% !default;
+
+$bgrainbow:
+	to right,
+	$lessred 0%,
+	$lessorange 20%,
+	$lessyellow 40%,
+	$lessgreen 60%,
+	$lessblue 80%,
+	$lesspurple 100% !default;
diff --git a/src/scss/bucket/_style.scss b/src/scss/bucket/_style.scss
new file mode 100644
index 0000000..b449ab4
--- /dev/null
+++ b/src/scss/bucket/_style.scss
@@ -0,0 +1,109 @@
+@include box-sizing;
+@include font-face("Merriweather");
+@include font-face("CourierNew");
+
+* {
+	font-family: Merriweather, Georgia, serif;
+	color: $lightblue;
+}
+
+html {
+	background-color: #454545;
+}
+
+html, body {
+	height: 100%;
+	margin: 0;
+}
+
+a {
+	display: inline-block;
+	position: relative;
+	text-decoration: none;
+	transition: linear 0.2s;
+	color: $purple;
+
+	&:before {
+		content: '';
+		height: 2px;
+		position: absolute;
+		bottom: -1.5px;
+		width: 100%;
+		left: 50%;
+		@include linear-gradient($rainbowright...);
+		@include transform(translate(-50%, 0));
+		@include transition(width 0.2s ease-in-out);
+	}
+
+	&:hover {
+		color: $white;
+	}
+
+	&:hover:before {
+		width: 0;
+	}
+}
+
+@mixin animate-letter($n) {
+	.e#{$n} {
+		position: relative;
+		$delay: (12 - $n) * -100ms;
+		@include animation-delay($delay);
+		@include animation(
+			wave 1s linear $delay infinite,
+			rainbow 3s linear $delay infinite);
+	}
+}
+
+#webring {
+	position: relative;
+	width: 100%;
+	padding: 0.5em;
+
+	.left {
+		float: left;
+	}
+
+	.right {
+		float: right;
+	}
+
+	center {
+		width: 100%;
+		left: 0;
+		position: absolute;
+
+		.center {
+			.header {
+				@for $i from 0 through 12 {
+					@include animate-letter($i);
+				}
+			}
+		}
+	}
+
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.header span {
+		animation: none !important;
+	}
+}
+
+@include keyframes(wave) {
+	0%	 {top: 0px;}
+	25%	 {top: -1px;}
+	50%	 {top: 0px;}
+	75%	 {top: 1px;}
+	100% {top: 0px;}
+}
+
+@include keyframes(rainbow) {
+	0%   {color: $red;}
+	17%  {color: $orange;}
+	33%  {color: $yellow;}
+	50%  {color: $green;}
+	67%  {color: $blue;}
+	83%  {color: $purple;}
+	100% {color: $red;}
+}
diff --git a/src/scss/bucket_light.scss b/src/scss/bucket_light.scss
new file mode 100644
index 0000000..8782426
--- /dev/null
+++ b/src/scss/bucket_light.scss
@@ -0,0 +1,36 @@
+@import "./bucket/default";
+
+$white: #fff;
+$red: #B80000;
+$orange: #B88400;
+$yellow: #B5B800;
+$green: #00B815;
+$blue: #0069CC;
+$purple: #7030B0;
+
+$darkgreen: #3E885B;
+$darkblue: #7fb4f5;
+
+$background: #fefefa;
+
+$rainbowright:
+	to right,
+	$red 0%,
+	$orange 20%,
+	$yellow 40%,
+	$green 60%,
+	$blue 80%,
+	$purple 100%;
+
+$hrainbow:
+	to right,
+	#FFFFFF00 0%,
+	$lessred 14%,
+	$orange 28%,
+	$yellow 42%,
+	$green 56%,
+	$blue 70%,
+	$lesspurple 84%,
+	#FFFFFF00 100%;
+
+@import "./bucket/style";
diff --git a/src/scss/error.scss b/src/scss/error.scss
new file mode 100644
index 0000000..34c9d21
--- /dev/null
+++ b/src/scss/error.scss
@@ -0,0 +1,14 @@
+@import "./variables";
+
+.section {
+	text-align: center;
+}
+
+#main h1 {
+	color: $green;
+	text-shadow: 4px 4px $green-alt;
+}
+
+#main h2 {
+	text-shadow: 3px 3px $white-alt;
+}
diff --git a/src/scss/home.scss b/src/scss/home.scss
new file mode 100644
index 0000000..0501941
--- /dev/null
+++ b/src/scss/home.scss
@@ -0,0 +1,23 @@
+@import "./variables";
+
+#main .col {
+	width: 50%;
+	padding: 0;
+	margin: 0;
+	display: table-cell;
+}
+
+#main .left {
+	padding-right: $outer-gap;
+}
+
+@media (max-width: 800px) {
+	#main .col {
+		display: block;
+		width: 100%;
+	}
+
+	#main .left {
+		padding-right: 0;
+	}
+}
diff --git a/src/scss/legacy.scss b/src/scss/legacy.scss
new file mode 100644
index 0000000..52c1a18
--- /dev/null
+++ b/src/scss/legacy.scss
@@ -0,0 +1,21 @@
+/* IE 6 & 7 Styles */
+
+@import "./variables";
+
+* {
+	behavior: url(boxsizing.htc);
+}
+
+#main.legacy .col {
+	display: block !important;
+	width: 100% !important;
+}
+
+#main.legacy .left {
+	padding-right: 0 !important;
+	padding-bottom: $outer-gap;
+}
+
+#nav {
+	behavior: url(display-table.htc);
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..d18cdc0
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,328 @@
+@import "./variables";
+@import "./mixins";
+
+@include box-sizing;
+@include font-face("FontStuck-Extended");
+@include font-face("CourierNew");
+
+@include keyframes(shake) {
+	0% { @include transform(translate(1px, 1px) rotate(0deg)); }
+	10% { @include transform(translate(-1px, -2px) rotate(-1deg)); }
+	20% { @include transform(translate(-3px, 0px) rotate(1deg)); }
+	30% { @include transform(translate(3px, 2px) rotate(0deg)); }
+	40% { @include transform(translate(1px, -1px) rotate(1deg)); }
+	50% { @include transform(translate(-1px, 2px) rotate(-1deg)); }
+	60% { @include transform(translate(-3px, 1px) rotate(0deg)); }
+	70% { @include transform(translate(3px, 1px) rotate(-1deg)); }
+	80% { @include transform(translate(-1px, -1px) rotate(1deg)); }
+	90% { @include transform(translate(1px, 2px) rotate(0deg)); }
+	100% { @include transform(translate(1px, -2px) rotate(-1deg)); }
+}
+
+img:hover {
+	@include animation(shake 0.5s linear infinite);
+}
+
+@media (prefers-reduced-motion) {
+	img:hover {
+		@include animation(none !important);
+	}
+}
+
+* {
+	scrollbar-color: $blue transparent;
+}
+
+h1 {
+	font-family: $header-font;
+	font-size: 325%;
+	line-height: 100%;
+	margin: 15px 0;
+}
+
+h2 {
+	font-family: $header-font;
+	font-size: 200%;
+	line-height: 100%;
+	margin: 12px 0;
+}
+
+h3 {
+	font-family: $header-font;
+	font-size: 150%;
+	line-height: 100%;
+	margin: 5px 0;
+}
+
+h4 {
+	font-family: $header-font;
+	font-size: 130%;
+	line-height: 100%;
+	margin: 2px 0;
+}
+
+a,
+a:visited {
+	color: $yellow;
+	@include text-decoration(underline);
+}
+
+a:hover {
+	color: $yellow-alt;
+	@include text-decoration(underline);
+}
+
+html {
+	color: $white;
+	font-family: $font;
+	font-size: 120%;
+	background: #181818;
+	background-image: url("../img/background.jpg?ref=2");
+	background-repeat: repeat;
+	background-size: 512px;
+}
+
+html,
+body,
+#container {
+	width: 100%;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	padding: $inner-gap;
+	min-height: 100%;
+
+	.center {
+		display: table;
+		margin: 0 auto;
+	}
+}
+
+#header,
+#main,
+#footer,
+#container {
+	@include border-radius($outer-radius);
+	width: $page-width;
+	text-align: left;
+}
+
+@media (max-width: ($page-width + $outer-gap * 2)) {
+	body, #header,
+	#main, #footer,
+	#container {
+		width: 100%;
+		min-width: 250px;
+	}
+}
+
+#header,
+#footer {
+	display: block;
+	@include section;
+}
+
+#header {
+	$logo-size: 200px;
+	height: #{$logo-size + $inner-gap * 2 + 10px};
+	padding: $inner-gap;
+
+	img {
+		@include border-radius($inner-radius);
+		float: left;
+		height: $logo-size;
+		width: $logo-size;
+	}
+
+	.content {
+		padding-top: 30px;
+		padding-left: $logo-size;
+
+		.logo-text {
+			margin: 0;
+			text-align: center;
+			text-shadow: 3px 3px $white-alt;
+		}
+
+		#nav {
+			margin: 0;
+			padding: 0;
+			list-style-type: none;
+			margin: 0 auto;
+			@include display-table($inner-gap);
+
+			li {
+				@include display-table-cell;
+				float: left;
+				padding: $inner-gap;
+
+				a {
+					@include text-decoration(none);
+
+					&:hover,
+					&:active {
+						color: $yellow;
+						@include text-decoration(underline);
+					}
+
+					h2 {
+						margin: 0;
+						text-shadow: 3px 3px $yellow-alt;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media (max-width: 800px) {
+	#header {
+		display: block;
+		height: auto;
+
+		img {
+			float: none;
+			display: block;
+			margin: 0 auto;
+		}
+
+		.content {
+			padding-top: 0;
+			padding-left: 0;
+
+			#nav {
+				text-align: center;
+			}
+		}
+	}
+}
+
+@media (max-width: 550px) {
+	#header .content #nav {
+		li {
+			float: none;
+			display: block;
+		}
+	}
+}
+
+#footer {
+	padding: $inner-gap;
+
+	.footer-text {
+		display: block;
+		margin: 10px 0;
+	}
+
+	.bucket {
+		margin-top: $inner-gap;
+		width: 100%;
+		height: 40px;
+		border: none;
+	}
+
+	.john {
+		display: block;
+		max-width: 732px;
+		height: 94px;
+		width: 100%;
+		border: none;
+
+		@media(max-width: 732px) {
+			height: 12vw;
+		}
+	}
+
+	.buttons {
+		a, img {
+			height: 30px;
+		}
+	}
+}
+
+#main .section {
+	@include section;
+
+	.heading {
+		@include linear-gradient(to bottom, $blue, $black);
+		margin: 0;
+		padding-left: $inner-gap;
+		@include border-radius($inner-radius $inner-radius 0 0);
+	}
+
+	h1, h2, h3, h4, h5,
+	span, pre {
+		margin-left: $inner-gap;
+	}
+
+	p {
+		padding: 0 $inner-gap;
+	}
+
+	blockquote p {
+		border-left: 5px solid $blue;
+	}
+
+	pre {
+		background: black;
+		margin-right: $inner-gap;
+		@include border-radius($outer-radius);
+		padding: $inner-gap;
+	}
+
+	code {
+		font-family: $font;
+		color: $green;
+	}
+
+	pre code {
+		color: $white;
+	}
+
+	table {
+		width: 100%;
+
+		th, td {
+			padding: $outer-radius;
+			font-family: $header-font;
+			font-size: 120%;
+			line-height: 120%;
+
+			@media (max-width: 400px) {
+				font-size: 100%;
+				line-height: 100%;
+			}
+
+			@media (max-width: 360px) {
+				font-size: 90%;
+				line-height: 90%;
+			}
+
+			@media (max-width: 320px) {
+				font-size: 80%;
+				line-height: 80%;
+			}
+
+		}
+
+		td {
+			background: $blue-alt;
+		}
+
+		th {
+			background: $blue;
+			text-align: left;
+		}
+
+		tr:last-child {
+			th {
+				@include border-radius(0 0 0 $inner-radius);
+			}
+			tr {
+				@include border-radius(0 0 $inner-radius 0);
+			}
+		}
+	}
+}