Improved styles

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)

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

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
+		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