initial

2 files changed, 164 insertions, 0 deletions

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