Improved styles

mixins/AnimeGrid.scarlet

@@ -3,6 +3,7 @@
 
 .anime-grid-cell
 	grid-cell
+	shadow-up
 
 .anime-grid-image
 	grid-image

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

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
+	grid-image
+
+.front
+	ui-element
+	shadow-up
+
+.back
+	shadow-up

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