Reverted forum style, used for genres now

styles/colors.styl

@@ -1,5 +1,5 @@
 html, body
-	color rgb(60, 60, 60)
+	color textColor
 	background-color rgb(254, 254, 254)
 
 a

styles/config.styl

@@ -1,8 +1,13 @@
+textColor = rgb(60, 60, 60)
 mainColor = rgb(248, 165, 130)
 hoverColor = darken(mainColor, 10%)
 linkColor = darken(mainColor, 15%)
 linkHoverColor = darken(hoverColor, 20%)
 activeLinkColor = rgb(100, 149, 237)
 uiBorder = 1px solid rgba(0, 0, 0, 0.1)
-uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%)
-uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.03) 100%)
+uiHoverBorder = 1px solid rgba(0, 0, 0, 0.15)
+uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
+uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
+outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
+outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
+outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)

styles/forum.styl

@@ -116,7 +116,7 @@
 
 .thread-title
 	width auto
-
+	
 .posts
 	width 100%
 	max-width 830px

styles/grid.styl

@@ -0,0 +1,59 @@
+.grid
+	display flex
+	flex-flow row wrap
+	justify-content center
+	float none !important
+
+.grid-cell
+	flex-grow 0
+	flex-shrink 0
+
+	width 16vw
+	height 9vw
+	min-width 90px
+	min-height 127px
+	max-width 200px
+	max-height 282px
+	border-radius 3px
+	background-size cover
+	background-position 50% 50%
+
+	margin 0.5rem
+	border uiBorder
+	background uiBackground
+
+	&:hover
+		border uiHoverBorder
+		background uiHoverBackground
+		box-shadow outlineShadowMedium
+		transform scale(1.04)
+		// .grid-icon
+		// 	transform scale(1.3)
+
+.grid-anime
+	border none
+	&:hover
+		border none
+
+.grid-text
+	width 100%
+	height 100%
+	display flex
+	flex-flow column
+	align-items center
+	justify-content center
+	font-size 1rem
+	color rgb(160, 160, 160)
+
+.grid-icon
+	font-size 2.5rem
+	margin-top 2rem
+	margin-bottom 0.7rem
+	color linkColor
+	transition transform 200ms ease-in-out
+
+.grid-image
+	width 100%
+	height 100%
+	margin 0
+	object-fit cover

styles/headers.styl

@@ -7,6 +7,7 @@ h2
 	font-size 2em
 	line-height 1.5em
 	font-weight bold
+	text-align center
 	width 100%
 	&:first-of-type
 		margin-top 0

styles/user.styl

@@ -14,7 +14,7 @@ avatarSize = 50px
 	margin 0.2em
 	&:hover
 		.user-image
-			box-shadow 0 0 8px rgb(0, 0, 0)
+			box-shadow outlineShadowHeavy
 
 .user-image
 	opacity 0