From 48363878344de86e9c5baaa15f03a5182f4513fd Mon Sep 17 00:00:00 2001
From: chee <chee@snaek.org>
Date: Sun, 26 May 2013 01:33:06 -0500
Subject: [PATCH] THE FLOWERS GO UP AND DOWN. THE SUN SHE SPIN

---
 index.html         |  1 -
 scripts/flowers.js |  9 +++++++++
 styles/garden.css  | 38 ++++++++++++++++++++------------------
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 67734a3..3ace7ea 100644
--- a/index.html
+++ b/index.html
@@ -15,4 +15,3 @@
 </div>
 <script src="scripts/flowers.js" type="text/javascript"></script>
 
-
diff --git a/scripts/flowers.js b/scripts/flowers.js
index 5d5b254..c4fdbac 100644
--- a/scripts/flowers.js
+++ b/scripts/flowers.js
@@ -2,6 +2,7 @@
 	'use strict';
 	var stems = document.querySelectorAll( '.stem' );
 	var flowers = document.querySelectorAll( '.flower' );
+	var sun = document.querySelector( '.sun' );
 	var colours = [
 		'deeppink',
 		'black',
@@ -46,6 +47,14 @@
 		return currentColour;
 	}
 
+	sun.addEventListener( 'click', function () {
+		sun.classList.add( 'spin' );
+	});
+
+	sun.addEventListener( 'transitionend', function () {
+		sun.classList.remove( 'spin' );
+	});
+
 	window.addEventListener( 'keyup', function ( event ) {
 		var colour;
 		var key = event.which;
diff --git a/styles/garden.css b/styles/garden.css
index 9c44094..8bad537 100644
--- a/styles/garden.css
+++ b/styles/garden.css
@@ -21,19 +21,14 @@ body {
 	background: yellow;
 	border: 50px dotted #ff6633;
 	box-sizing: content-box;
-	box-shadow: 0 0 1000px white;
+	box-shadow: 0 0 1000px white, inset 0 0 50px rgba( 250, 100, 0, 0.3 );
 }
 
-.sun {
-	transition: height .1s ease-in-out,
-	            width .1s ease-in-out,
-	            all 100s ease-in-out;
-}
-
-.sun:active {
-	height: 105px;
-	width: 105px;
-	transform: rotate( 36000deg );
+.sun.spin {
+	transform: rotate( 360deg );
+	transition: height .5s ease-in-out,
+	            width .5s ease-in-out,
+	            all 1s ease-in-out;
 }
 
 .grass {
@@ -70,19 +65,19 @@ body {
 .flower {
 	border-color: white;
 	border-width: 15px;
-	box-shadow: 0 0 1px black;
+	box-shadow: 0 0 1px black, inset 0 0 10px rgba( 0, 0, 0, 0.3 );
 	top: -30px;
 	left: -25px;
 	height: 30px;
 	width: 30px;
 	background-color: deeppink;
-	transition: height 2s 3.4s ease-in-out,
-	            width 2s 3.4s ease-in-out,
-	            left 2s 3.4s ease-in-out,
-	            border-width 2s 3.4s ease-in-out,
-	            top 2s 3.4s ease-in-out,
+	transition: height 3.4s ease-in-out,
+	            width 3.4s ease-in-out,
+	            left 3.4s ease-in-out,
+	            border-width 3.4s ease-in-out,
+	            top 3.4s ease-in-out,
 	            background-color .5s ease-in-out,
-	            -webkit-transform 2s 3.4s ease-in-out;
+	            -webkit-transform 3.4s ease-in-out;
 }
 
 .alive .flower,
@@ -93,6 +88,13 @@ body {
 	left: -55px;
 	top: -60px;
 	border-width: 30px;
+	transition: height 2s 3.4s ease-in-out,
+	            width 2s 3.4s ease-in-out,
+	            left 2s 3.4s ease-in-out,
+	            border-width 2s 3.4s ease-in-out,
+	            top 2s 3.4s ease-in-out,
+	            background-color .5s ease-in-out,
+	            -webkit-transform 2s 3.4s ease-in-out;
 }
 
 #first {