From fbcef9008d3fa872b1b1c11a56edbce168864b83 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Sun, 20 Nov 2016 04:31:28 +0900
Subject: [PATCH] Genres use flip effect now

---
 pages/genres/genres.pixy |  7 ++++---
 styles/grid.styl         | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy
index 988775d1..e8647639 100644
--- a/pages/genres/genres.pixy
+++ b/pages/genres/genres.pixy
@@ -3,7 +3,8 @@ component Genres
 	
 	.grid
 		each genre in arn.Genres
-			a.grid-cell.ajax(href="/genres/" + arn.FixGenre(genre))
-				.grid-text
+			a.grid-cell.backside-card.ajax(href="/genres/" + arn.FixGenre(genre))
+				.grid-text.front
 					GridIcon(arn.GetGenreIcon(genre))
-					span= genre
\ No newline at end of file
+					span= genre
+				img.grid-image.back(src="https://cdn.anilist.co/img/dir/anime/reg/21519-4I676N0vzuek.jpg", alt="")
\ No newline at end of file
diff --git a/styles/grid.styl b/styles/grid.styl
index 37b14608..332ca427 100644
--- a/styles/grid.styl
+++ b/styles/grid.styl
@@ -6,6 +6,8 @@
 
 .grid-cell
 	uiElement()
+
+	position relative
 	
 	flex-grow 0
 	flex-shrink 0
@@ -22,11 +24,38 @@
 
 	margin 0.5rem
 
+.scale-out
 	&:hover
-		transform scale(1.03)
+		transform scale(1.02)
+
+.backside-card
+	transition all transitionSpeed ease-in-out
+
+	&:hover
+		transform rotateY(180deg)
+		
+		.front
+			opacity 0
+		.back
+			opacity 1
 		// .grid-icon
 		// 	transform scale(1.3)
 
+.front
+	position absolute
+	left 0
+	top 0
+	opacity 1
+	transition opacity transitionSpeed ease
+
+.back
+	position absolute
+	left 0
+	top 0
+	opacity 0
+	transition opacity transitionSpeed ease
+	transform rotateY(180deg)
+
 .grid-anime
 	border none
 	&:hover
@@ -52,4 +81,5 @@
 	width 100%
 	height 100%
 	margin 0
+	border-radius 3px
 	object-fit cover
\ No newline at end of file