Improved forum

mixins/Avatar.pixy

@@ -7,6 +7,6 @@ component Avatar(user *arn.User)
 				img.user-image(src=user.Avatar, alt=user.Nick)
 		else
 			svg.user-image(width="50", height="50")
-				circle.head(cx="25", cy="19", r="10", fill="rgb(32, 32, 32)")
+				circle.head(cx="25", cy="19", r="10")
 				circle.body(cx="25", cy="50", r="20")
 				//- text(x="25", y="44", text-anchor="middle") TODO

pages/forum/forum.pixy

@@ -14,7 +14,6 @@ component ThreadLink(thread *arn.Thread)
 				if thread.Sticky
 					i.fa.fa-thumb-tack.fa-fw.thread-icon
 				a.thread-title.ajax(href="/threads/" + thread.ID)= thread.Title
-				//- .thread-icons
-				//- 	each icon in thread.Icons
-				//- 		i(class='fa fa-' + icon + ' fa-fw thread-icon')
-				//- .thread-reply-count= 25
+				.thread-reply-count= thread.Replies
+				.thread-icons
+					Icon(arn.GetForumIcon(thread.Tags[0]))

pages/forum/forum.styl

@@ -10,15 +10,19 @@
 	flex-flow row
 	width 100%
 
-.thread-icons
 .thread-reply-count
-	flex 1
-	text-align right
+.thread-icons
 	opacity 0.5
+	text-align right
+	position relative
 
 .thread-reply-count
-	&:after
-		content " replies"
+	font-size 0.8rem
+	flex 1
+	margin 0 1rem
+
+.thread-icons
+	flex 0
 
 .thread-content-container
 	display flex
@@ -36,5 +40,5 @@
 		&:hover
 			color linkHoverColor !important
 
-.thread-icon
-	font-size 0.9em
+// .thread-icon
+// 	font-size 0.9em

styles/config.styl

@@ -8,8 +8,18 @@ uiBorder = 1px solid rgba(0, 0, 0, 0.1)
 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)
+outlineShadowLight = 0 0 6px alpha(black, 0.05)
+outlineShadowMedium = 0 0 6px alpha(black, 0.13)
+outlineShadowHeavy = 0 0 6px alpha(black, 0.6)
 transitionSpeed = 290ms
 fadeSpeed = 200ms
+
+uiElement()
+	border uiBorder
+	background uiBackground
+	transition all transitionSpeed ease
+
+	&:hover
+		border uiHoverBorder
+		background uiHoverBackground
+		box-shadow outlineShadowMedium

styles/forum.styl

@@ -74,17 +74,15 @@
 	color rgb(255, 32, 12) !important
 
 .post-content
+	uiElement()
 	text-align left
 	flex-grow 1
 	padding 0.4rem 1rem
 	margin-left 0.3rem
-	background uiBackground
-	border uiBorder
 	border-radius 3px
 	position relative
 
 	&:hover
-		background uiHoverBackground
 		.post-toolbar
 			opacity 1
 

styles/grid.styl

@@ -5,6 +5,8 @@
 	float none !important
 
 .grid-cell
+	uiElement()
+	
 	flex-grow 0
 	flex-shrink 0
 
@@ -19,13 +21,8 @@
 	background-position 50% 50%
 
 	margin 0.5rem
-	border uiBorder
-	background uiBackground
 
 	&:hover
-		border uiHoverBorder
-		background uiHoverBackground
-		box-shadow outlineShadowMedium
 		transform scale(1.03)
 		// .grid-icon
 		// 	transform scale(1.3)

styles/loading.styl

@@ -5,7 +5,7 @@ size = 24px
 	display block
 	position fixed
 	bottom 1.15rem
-	right calc(1.15rem + 17px)
+	right 1.15rem
 	pointer-events none
 
 .sk-cube-grid

styles/user.styl

@@ -26,8 +26,8 @@ avatarSize = 50px
 	object-fit cover
 
 svg.user-image
-	circle.body
-		fill rgb(60, 60, 60)
+	circle.body, circle.head
+		fill textColor
 	text
 		fill white
 		font-size 0.65rem