Started working on dark theme

styles/base.scarlet

@@ -18,6 +18,7 @@ a
 
 	:hover
 		color link-hover-color
+		text-shadow link-hover-text-shadow
 		text-decoration none
 	
 	:active

styles/include/config.scarlet

@@ -1,10 +1,10 @@
 // Colors
 text-color = rgb(60, 60, 60)
+bg-color = rgb(246, 246, 246)
 main-color = rgb(248, 165, 130)
 link-color = rgb(215, 38, 15)
 link-hover-color = rgb(242, 60, 30)
 link-active-color = link-hover-color
-bg-color = rgb(246, 246, 246)
 pro-color = hsla(0, 100%, 73%, 0.87)
 
 // UI
@@ -23,7 +23,8 @@ ui-element-border-radius = 3px
 input-focus-border-color = rgb(248, 165, 130)
 
 // Button
-button-hover-color = link-hover-color
+button-hover-color = white
+button-hover-background = link-hover-color
 forum-tag-hover-color = #225db5
 // forum-tag-hover-color = rgb(46, 85, 160)
 

styles/include/dark.scarlet

@@ -0,0 +1,14 @@
+// Dark theme
+text-color = hsl(0, 0%, 90%)
+bg-color = hsl(0, 0%, 24%)
+link-color = hsl(81, 100%, 56%)
+link-hover-color = hsl(81, 100%, 66%)
+ui-background = hsl(0, 0%, 18%)
+
+link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5)
+
+main-color = link-color
+link-active-color = link-hover-color
+button-hover-color = bg-color
+button-hover-background = link-hover-color
+loading-anim-color = link-color

styles/include/mixins.scarlet

@@ -60,6 +60,11 @@ mixin bg-dark-up
 	:hover
 		background-color rgba(0, 0, 0, 0.015)
 
+mixin bg-light-up
+	background-color transparent
+	:hover
+		background-color rgba(255, 255, 255, 0.015)
+
 mixin light-up
 	filter brightness(0.4) saturate(1)
 	:hover

styles/input.scarlet

@@ -35,8 +35,8 @@ button, .button
 	:hover,
 	&.active
 		cursor pointer
-		color white
-		background-color button-hover-color
+		color button-hover-color
+		background button-hover-background
 
 	:active
 		transform translateY(3px)

styles/navigation.scarlet

@@ -44,6 +44,7 @@
 #search
 	background transparent
 	border none
+	box-shadow none
 	font-size 1em
 	padding 0
 	width 0

styles/sidebar.scarlet

@@ -41,13 +41,17 @@ sidebar-spacing-y = 0.7rem
 
 .sidebar-link
 	color text-color
+	
 	&.active
 		.sidebar-button
-			background forum-tag-hover-color
-			color white
+			// background forum-tag-hover-color
+			// color white
+			color link-color
+			text-shadow link-hover-text-shadow
 
 .sidebar-button
 	horizontal
+	default-transition
 	align-items center
 	padding sidebar-spacing-y 1rem
 	// background ui-background

styles/table.scarlet

@@ -21,4 +21,4 @@ th
 
 tbody
 	tr
-		bg-dark-up
+		bg-light-up

styles/widgets.scarlet

@@ -1,23 +1,29 @@
+// .widgets
+// 	display grid
+// 	grid-template-columns 1fr
+
+// > 810px
+// 	.widgets
+// 		grid-template-columns repeat(2, 1fr)
+// 		grid-gap content-padding
+
+// > 1240px
+// 	.widgets
+// 		grid-template-columns repeat(3, 1fr)
+
+// > 1640px
+// 	.widgets
+// 		grid-template-columns repeat(4, 1fr)
+
 .widgets
-	display grid
-	grid-template-columns 1fr
-
-> 810px
-	.widgets
-		grid-template-columns repeat(2, 1fr)
-		grid-gap content-padding
-
-> 1240px
-	.widgets
-		grid-template-columns repeat(3, 1fr)
-
-> 1640px
-	.widgets
-		grid-template-columns repeat(4, 1fr)
+	horizontal-wrap
+	justify-content center
 
 .widget
 	vertical
-	margin-bottom 1rem
+	width 100%
+	max-width 300px
+	margin calc(content-padding / 2)
 	overflow hidden
 
 .widget-section