Improved scarlet styles

styles/config.scarlet

@@ -7,6 +7,17 @@ header-color = rgb(60, 60, 60)
 nav-link-color = rgb(160, 160, 160)
 nav-link-hover-color = rgb(255, 255, 255)
 
+// UI
+ui-border = 1px solid rgba(0, 0, 0, 0.1)
+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%)
+
+// Outline shadow
+outline-shadow-light = 0 0 6px alpha(black, 0.05)
+outline-shadow-medium = 0 0 6px alpha(black, 0.13)
+outline-shadow-heavy = 0 0 6px alpha(black, 0.6)
+
 // Distances
 content-padding = 1.5rem
 hover-line-size = 2px

styles/grid.scarlet

@@ -1,8 +1,8 @@
-.grid
+mixin grid
 	horizontal-wrap
 	justify-content center
 
-.grid-cell
+mixin grid-cell
 	position relative
 	
 	flex-grow 0
@@ -21,41 +21,7 @@
 
 	margin 0.5rem
 
-	:hover
-		.backside-card
-			transform rotateY(180deg)
-			
-			.front
-				opacity 0
-			.back
-				opacity 1
-
-.backside-card
-	width 100%
-	height 100%
-	transition all transition-speed ease-in-out
-
-.front
-	position absolute
-	left 0
-	top 0
-	opacity 1
-	transition opacity transition-speed ease
-
-.back
-	position absolute
-	left 0
-	top 0
-	opacity 0
-	transition opacity transition-speed ease
-	transform rotateY(180deg)
-
-.grid-anime
-	border none
-	:hover
-		border none
-
-.grid-text
+mixin grid-text
 	vertical
 	width 100%
 	height 100%
@@ -64,15 +30,38 @@
 	font-size 1rem
 	color rgb(160, 160, 160)
 
-.grid-icon
+mixin grid-image
+	width 100%
+	height 100%
+	border-radius 3px
+	object-fit cover
+
+mixin grid-icon
 	font-size 2.5rem
 	margin-top 2rem
 	margin-bottom 0.7rem
 	color link-color
 
-.grid-image
-	width 100%
-	height 100%
-	margin 0
-	border-radius 3px
-	object-fit cover
+mixin flip-card
+	:hover
+		.front
+			transform rotateY(180deg)
+			opacity 0
+		.back
+			transform rotateY(0deg)
+			opacity 1
+
+.front
+	position absolute
+	left 0
+	top 0
+	opacity 1
+	transition all transition-speed ease
+
+.back
+	position absolute
+	left 0
+	top 0
+	opacity 0
+	transition all transition-speed ease
+	transform rotateY(180deg)

styles/mixins.scarlet

@@ -12,4 +12,15 @@ mixin vertical
 
 mixin vertical-wrap
 	display flex
-	flex-flow column wrap
+	flex-flow column wrap
+
+mixin ui-element
+	border ui-border
+	background ui-background
+	border-radius 3px
+	transition all transition-speed ease
+
+	&:hover
+		border ui-hover-border
+		background ui-hover-background
+		box-shadow outline-shadow-medium