From 4631a10d242879a2953beb52f9b6b114207fad61 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Wed, 30 Nov 2016 21:33:11 +0900
Subject: [PATCH] Improved styles

---
 mixins/AnimeGrid.scarlet    |  1 +
 pages/anime/anime.scarlet   | 12 +++++-------
 pages/genres/genres.scarlet | 10 ++++++++--
 styles/config.scarlet       |  4 ++++
 styles/grid.scarlet         |  6 +++---
 styles/mixins.scarlet       | 29 +++++++++++++++++++++++++++--
 6 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/mixins/AnimeGrid.scarlet b/mixins/AnimeGrid.scarlet
index 87d4c552..23c895a7 100644
--- a/mixins/AnimeGrid.scarlet
+++ b/mixins/AnimeGrid.scarlet
@@ -3,6 +3,7 @@
 
 .anime-grid-cell
 	grid-cell
+	shadow-up
 
 .anime-grid-image
 	grid-image
\ No newline at end of file
diff --git a/pages/anime/anime.scarlet b/pages/anime/anime.scarlet
index c7159158..8adaa8ba 100644
--- a/pages/anime/anime.scarlet
+++ b/pages/anime/anime.scarlet
@@ -3,7 +3,6 @@
 
 .anime-image-container
 	horizontal
-	flex 1
 	justify-content center
 	align-items flex-start
 
@@ -11,17 +10,16 @@
 	width 230px
 	height auto
 	border-radius 3px
-	box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
-	filter saturate(100%)
+	
 	transition all transition-speed ease
 	object-fit cover
-	:hover
-		filter saturate(150%)
-		box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
 
+	saturate-up
+	shadow-up
+	
 .anime-info
 	vertical
-	flex 9999999
+	flex 1
 	margin-left content-padding
 
 .anime-title
diff --git a/pages/genres/genres.scarlet b/pages/genres/genres.scarlet
index 92d4c1ca..371e43c5 100644
--- a/pages/genres/genres.scarlet
+++ b/pages/genres/genres.scarlet
@@ -4,7 +4,6 @@
 .genre
 	grid-cell
 	flip-card
-	ui-element
 
 .genre-text
 	grid-text
@@ -13,4 +12,11 @@
 	grid-icon
 
 .genre-image
-	grid-image
\ No newline at end of file
+	grid-image
+
+.front
+	ui-element
+	shadow-up
+
+.back
+	shadow-up
\ No newline at end of file
diff --git a/styles/config.scarlet b/styles/config.scarlet
index 483f315d..19e70868 100644
--- a/styles/config.scarlet
+++ b/styles/config.scarlet
@@ -13,6 +13,10 @@ ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
 ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
 ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
 
+// Shadow
+shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05)
+shadow-medium = 6px 6px 12px rgba(0, 0, 0, 0.15)
+
 // Outline shadow
 outline-shadow-light = 0 0 6px alpha(black, 0.05)
 outline-shadow-medium = 0 0 6px alpha(black, 0.13)
diff --git a/styles/grid.scarlet b/styles/grid.scarlet
index 7bb2eeb8..d8cd093e 100644
--- a/styles/grid.scarlet
+++ b/styles/grid.scarlet
@@ -4,9 +4,6 @@ mixin grid
 
 mixin grid-cell
 	position relative
-	
-	flex-grow 0
-	flex-shrink 0
 
 	width 16vw
 	height 9vw
@@ -21,6 +18,8 @@ mixin grid-cell
 
 	margin 0.5rem
 
+	scale-up
+
 mixin grid-text
 	vertical
 	width 100%
@@ -57,6 +56,7 @@ mixin flip-card
 	top 0
 	opacity 1
 	transition all transition-speed ease
+	transform rotateY(0)
 
 .back
 	position absolute
diff --git a/styles/mixins.scarlet b/styles/mixins.scarlet
index a5602944..1cab6d15 100644
--- a/styles/mixins.scarlet
+++ b/styles/mixins.scarlet
@@ -20,7 +20,32 @@ mixin ui-element
 	border-radius 3px
 	transition all transition-speed ease
 
-	&:hover
+	:hover
 		border ui-hover-border
 		background ui-hover-background
-		box-shadow outline-shadow-medium
\ No newline at end of file
+		box-shadow outline-shadow-medium
+
+mixin light-up
+	filter brightness(0.4) saturate(1)
+	:hover
+		filter brightness(1) saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin saturate-up
+	filter saturate(1)
+	:hover
+		filter saturate(1.3)
+
+mixin scale-up
+	transform scale(1)
+	:hover
+		transform scale(1.08)
+
+mixin shadow-up
+	box-shadow shadow-light
+	:hover
+		box-shadow shadow-medium
\ No newline at end of file