From 7d5467751506de50c58f3d2bb03d463b46bf1603 Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Mon, 31 Oct 2016 09:44:24 +0100
Subject: [PATCH] :construction: Update templates and styles

---
 src/styles/style.scss   | 38 +++++++++++++++++++++++++++++++++++++-
 src/templates/index.pug |  8 +++++++-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/styles/style.scss b/src/styles/style.scss
index 47532ae..072d13f 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -9,6 +9,15 @@ html, body {
 	background-color: $lightGray;
 }
 
+@keyframes zomg {
+  0%, 100% { color: #7ccdea; }
+  16%      { color: #0074D9; }
+  32%      { color: #2ECC40; }
+  48%      { color: #FFDC00; }
+  64%      { color: #B10DC9; }
+  80%      { color: #FF4136; }
+}
+
 code {
 	padding: 1px 3px;
 	font-size: .85em;
@@ -17,6 +26,11 @@ code {
 	border-radius: 2px;
 	font-family: Consolas, Inconsolata, monospace, sans-serif;
 	background: #F7FAFB;
+	transition: color .2s ease-out;
+
+	&:hover {
+		animation: zomg .5s infinite;
+	}
 }
 
 .header {
@@ -32,9 +46,16 @@ code {
 .wrap {
 	max-width: 1200px;
 	margin: 0 auto;
+}
+
+main.wrap {
 	padding: 3.5em 2em;
 }
 
+.footer {
+	padding-left: 2em;
+}
+
 .emoji {
 	display: flex;
 
@@ -42,10 +63,25 @@ code {
 		background-color: $white;
 		margin: 1em 0;
 		flex: 1;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+		transition: all .25s ease-out;
+		border-radius: 2px;
+
+		&:hover {
+			box-shadow: 0 10px 20px 0 rgba(168, 182, 191, .6)
+		}
+	}
+
+	&-icon {
+		img {
+			width: 100%;
+			height: 100px;
+			padding: 1em;
+		}
 	}
 
 	&-info {
-		padding: 20px 40px;
+		padding: 2em 4em;
 
 		p {
 			text-align: center;
diff --git a/src/templates/index.pug b/src/templates/index.pug
index 2b5b6b2..43cc477 100644
--- a/src/templates/index.pug
+++ b/src/templates/index.pug
@@ -30,9 +30,15 @@ html
 					article.col-xs-12.col-sm-6.col-md-4.emoji
 						.emoji-card
 							.emoji-icon
-								img(src='images/'+gitmoji.image+'.svg')
 							.emoji-info
 								header.emoji-data
 									span.icon=gitmoji.emoji
 									code=gitmoji.code
 								p=gitmoji.description
+		footer.footer.wrap
+			.row
+				.made-with-love
+					h3 Made with <3 by #[a(href="https://carloscuesta.me") Carlos Cuesta]
+				ul
+					li About
+					li GitHub