enough has been done for today

Author: zesameri

assets/bio.txt

@@ -1,3 +1,12 @@
+/*
+ Main.css
+ Color Profile:
+  dark: #222, #131314
+  grey: #a6a9ac, #dcdcde
+  light: #f8f8f6, #efeff2
+
+*/
+
 *,
 *::after,
 *::before {
@@ -6,22 +15,22 @@
 
 body {
 	font-family: 'Rubik', sans-serif;
-	color: #131314;
-	background: #efeff2 url(../img/bg.png) repeat-y 50% 500px;
+	color: #f8f8f6;
+	background: #222;
 	background-size: 70%;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 
 a {
 	text-decoration: none;
-	color: #a6a9ac;
+	color: #dcdcde;
 	outline: none;
 }
 
 a:hover,
 a:focus {
-	color: #131314;
+	color: #f8f8f6;
 }
 
 .hidden {
@@ -40,62 +49,61 @@ a:focus {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #efeff2;
+	background: #222;
 }
 
 .js .loading::after {
-	content: '';
+	content: 'Pluto a planet?';
+  font-size: 1.625em;
+	font-weight: 500;
+	line-height: 1.5;
+	margin: 0;
+	padding: 0.5em 0;
+	letter-spacing: 1.62em;
+	text-transform: uppercase;
+
 	position: fixed;
 	z-index: 1001;
 	top: 50%;
 	left: 50%;
-	width: 50px;
-	height: 50px;
-	margin: -25px 0 0 -25px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-content: space-around;
+	width: 62vw;
+	height: 62vw;
+	margin: -31vw 0 0 -31vw;
+  border-radius: 50%;
 	pointer-events: none;
-	border-radius: 50%;
-	background: #dcdcde;
-	animation: loaderAnim 0.8s ease-out infinite alternate forwards;
+	background: #3F51B5;
+	/*animation: loaderAnim 4s ease-out infinite alternate forwards;*/
+  animation-name: loaderAnim;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
 }
 
 @keyframes loaderAnim {
 	to {
 		transform: scale3d(0.5,0.5,1);
+    background-color:#7670bd;
+    letter-spacing: 1em;
 	}
-}
-
-/* Icons */
-.icon {
-	display: block;
-	width: 1.5em;
-	height: 1.5em;
-	margin: 0 auto;
-	fill: currentColor;
+  /*
+  0%   {background-color:#366bbd; left:25%; top:25%;}
+  25%  {background-color:#3d8fbd; left:75%; top:25%;}
+  50%  {background-color:#6a7dbd; left:75%; top:75%;}
+  75%  {background-color:#585abc; left:25%; top:75%;}
+  100% {background-color:#7670bd; left:25%; top:25%;}
+  */
 }
 
 main {
 	overflow: hidden;
 }
 
-.github {
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 6em;
-	height: 6em;
-}
-
-.github__deco {
-	position: absolute;
-	z-index: -1;
-	fill: #e6e6e6;
-}
-
-.icon--github {
-	font-size: 1.15em;
-	margin: 1em 0 0 2.5em;
-}
-
 /* Content */
 .content {
 	padding: 3em 0;
@@ -110,26 +118,6 @@ main {
 	grid-template-columns: 50% 50%;
 }
 
-.content--related {
-	font-size: 0.85em;
-	display: grid;
-	justify-content: center;
-	align-content: center;
-	max-width: 800px;
-	margin: 0 auto;
-	padding: 0 2em;
-	padding: 10em 0;
-	text-align: center;
-	letter-spacing: 0.05em;
-
-	grid-template-columns: repeat(auto-fill, 260px);
-	grid-gap: 4em;
-}
-
-.content--related > p {
-	grid-column: 1 / -1;
-}
-
 /* Header */
 .codrops-header {
 	position: relative;
@@ -150,46 +138,6 @@ main {
 	text-transform: uppercase;
 }
 
-/* Top Navigation Style */
-.codrops-links {
-	position: relative;
-	display: flex;
-	margin: 0 1em 0 0;
-	text-align: center;
-	white-space: nowrap;
-}
-
-.codrops-icon {
-	display: inline-block;
-	margin: 0.5em;
-}
-
-.codrops-icon:first-child {
-	margin-left: 0;
-}
-/* Related post item */
-.media-item {
-	display: block;
-	transition: color 0.3s;
-}
-
-.media-item__img {
-	max-width: 100%;
-	opacity: 0.8;
-	border-radius: 60px/100px;
-	transition: opacity 0.3s;
-}
-
-.media-item:hover .media-item__img,
-.media-item:focus .media-item__img {
-	opacity: 1;
-}
-
-.media-item__title {
-	font-weight: normal;
-	margin: 0;
-	padding: 0.5em;
-}
 
 /* items */
 .item {
@@ -283,60 +231,16 @@ main {
 	opacity: 0;
 }
 
-/* Individual styles */
+/* Blob Theme */
 .item__deco {
-	fill: #dcdcde;
+	fill: #3F51B5;
 }
 
 .item__title {
-	color: #131314;
+	color: #f8f8f6;
 }
 
-/* Individual styles
-.item--style-1 .item__deco {
-	fill: #dcdcde;
-}
-
-.item--style-2 .item__deco {
-	fill: #dcdcde;
-}
 
-.item--style-3 .item__deco {
-	fill: #fff;
-}
-
-.item--style-3 .item__title {
-	color: #131314;
-}
-
-.item--style-4 .item__deco {
-	fill: #dcdcde;
-}
-
-.item--style-5 .item__deco {
-	fill: #dcdcde;
-}
-
-.item--style-6 .item__deco {
-	fill: #dcdcde;
-}
-
-.item--style-7 .item__deco {
-	fill: #fff;
-}
-
-.item--style-7 .item__title {
-	color: #131314;
-}
-
-.item--style-8 .item__deco {
-	fill: #dcdcde;
-}
-
-.item--style-9 .item__deco {
-	fill: #dcdcde;
-}
-*/
 @media screen and (max-width: 60em) {
 	.item:first-of-type {
 		grid-column: span 2;

assets/images/bg.png

@@ -18,7 +18,6 @@
     <!-- Webpage Icon -->
     <link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
     <!-- Fonts -->
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Rubik:400,500,600" rel="stylesheet">
     <!-- JS Scripts -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@@ -40,19 +39,6 @@
 
 <body class="loading">
   <svg class="hidden">
-    <symbol id="icon-arrow" viewBox="0 0 24 24">
-      <title>arrow</title>
-      <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
-    </symbol>
-    <symbol id="icon-drop" viewBox="0 0 24 24">
-      <title>drop</title>
-      <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/>
-      <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
-    </symbol>
-    <symbol id="icon-github" viewBox="0 0 32.6 31.8">
-      <title>github</title>
-      <path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
-    </symbol>
     <!-- All deco shapes -->
     <defs>
       <path id="deco1" d="M 161,54.69 C 230.4,4.986 303.7,8.661 414.4,92.19 465.7,130.9 432.3,211.4 460,279.5 481,331.2 449.7,430.4 381.1,427 287.1,422.3 172.4,503.8 99.27,444.6 21.03,381.1 10.32,258.3 55.25,145.6 73.73,99.3 129.3,77.36 161,54.69 Z" />
@@ -64,8 +50,14 @@
       <path id="deco7" d="M 451.9,392.4 C 365.4,455.1 212.9,465.1 131.6,395.9 55.74,331.3 2.509,152.7 87.24,100.3 135.8,70.3 177.8,170.2 227.3,198.6 307.2,244.4 442.2,228.9 478.7,313.5 489.7,339 474.4,376.1 451.9,392.4 Z" />
     </defs>
   </svg>
+
   <main>
     <div class="content content--grid">
+      <header class="codrops-header">
+					<h1 class="codrops-header__title">meredith hoo</h1>
+					<p class="codrops-header__subtitle">i'm really cool</p>
+				</header>
+
       <div class="item item--style-1" data-animation-path-duration="800" data-animation-path-easing="easeInOutCubic" data-path-elasticity="300" data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z" data-path-scaleX="0.8" data-path-scaleY="1.1" data-path-translateX="0" data-path-translateY="30" data-path-rotate="5" data-animation-image-duration="800" data-animation-image-easing="easeInOutQuart" data-image-elasticity="300" data-image-scaleX="1.2" data-image-scaleY="1.2" data-image-translateX="-20" data-image-translateY="-45" data-image-rotate="-5" data-animation-deco-duration="1300" data-animation-deco-easing="easeOutQuad" data-deco-elasticity="300" data-deco-scaleX="0.8" data-deco-scaleY="0.9" data-deco-translateX="-5" data-deco-translateY="-5" data-deco-rotate="2">
         <svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500">
           <clipPath id="clipShape1">

assets/images/lips.svg

@@ -128,5 +128,5 @@
 
 	const items = Array.from(document.querySelectorAll('.item'));
 	const init = (() => items.forEach(item => new ImgItem(item)))();
-	setTimeout(() => document.body.classList.remove('loading'), 2000);
+	setTimeout(() => document.body.classList.remove('loading'), 500000);
 };