Flat design

pages/forum/forum.scarlet

@@ -8,11 +8,18 @@
 
 .forum-tag
 	color text-color !important
-	:hover
+
-		color white !important
+	:hover,
 	&.active
 		color white !important
-		background-color link-hover-color
+		background-color forum-tag-hover-color !important
+
+	// color text-color !important
+	// :hover
+	// 	color white !important
+	// &.active
+	// 	color white !important
+	// 	background-color link-hover-color
 
 < 920px
 	.forum-tag

pages/profile/profile.scarlet

@@ -80,6 +80,10 @@ profile-boot-duration = 2s
 	padding-left calc(content-padding * 2)
 	max-width 900px
 
+.website
+	a
+		color white
+
 #nick
 	margin-bottom 1rem
 

reset.scarlet

@@ -1,46 +0,0 @@
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main
-	outline 0
-	border 0
-	font-size 100%
-	font inherit
-	vertical-align baseline
-	background transparent
-
-html
-	box-sizing border-box
-
-textarea
-	resize vertical
-
-article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
-	display block
-
-body
-	line-height 1
-	-webkit-font-smoothing antialiased
-	-moz-osx-font-smoothing grayscale
-
-ol, ul
-	list-style none
-
-blockquote, q
-	quotes none
-
-blockquote:before, blockquote:after, q:before, q:after
-	content ''
-	content none
-
-table
-	border-collapse collapse
-	border-spacing 0
-
-audio, canvas, img, video, input, select
-	vertical-align middle
-
-:focus
-	outline 0
-
-*
-	margin 0
-	padding 0
-	box-sizing inherit

styles/base.scarlet

@@ -8,6 +8,7 @@ body
 	overflow hidden
 	height 100%
 	color text-color
+	background-color bg-color
 
 a
 	color link-color
@@ -21,8 +22,8 @@ a
 	:active
 		transform translateY(3px)
 	
-	&.active
+	// &.active
-		color link-active-color
+	// 	color link-active-color
 
 strong
 	font-weight bold

styles/include/config.scarlet

@@ -1,19 +1,28 @@
 // Colors
 text-color = rgb(60, 60, 60)
-main-color = rgb(248, 165, 130)
+main-color = rgb(225, 38, 15)
-link-color = rgb(225, 38, 15)
+link-color = main-color
 link-hover-color = rgb(242, 60, 30)
-link-active-color = rgb(100, 149, 237)
+link-active-color = link-hover-color
 post-highlight-color = rgba(248, 165, 130, 0.7)
-bg-color = white
+bg-color = rgb(246, 246, 246)
 
 // 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-background = rgb(254, 254, 254)
-ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
+ui-hover-background = rgb(255, 255, 255)
+// 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%)
 ui-disabled-color = rgb(224, 224, 224)
 
+// Input
+input-focus-border-color = rgb(248, 165, 130)
+
+// Button
+button-hover-color = link-hover-color
+forum-tag-hover-color = rgb(46, 85, 160)
+
 // Forum
 forum-width = 830px
 
@@ -21,9 +30,10 @@ forum-width = 830px
 avatar-size = 50px
 
 // Navigation
-nav-color = rgb(60, 60, 60)
+nav-color = text-color
-nav-link-color = rgb(160, 160, 160)
+nav-link-color = rgba(255, 255, 255, 0.5)
-nav-link-hover-color = rgb(255, 255, 255)
+nav-link-hover-color = white
+nav-link-hover-slide-color = rgb(248, 165, 130)
 // nav-color = rgb(245, 245, 245)
 // nav-link-color = rgb(160, 160, 160)
 // nav-link-hover-color = rgb(80, 80, 80)
@@ -40,7 +50,7 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6)
 // Distances
 content-padding = 1.6rem
 content-padding-top = 1.6rem
-hover-line-size = 2px
+hover-line-size = 3px
 nav-height = 3.11rem
 
 // Timings

styles/input.scarlet

@@ -1,7 +1,7 @@
 mixin input-focus
 	:focus
 		color black
-		border 1px solid main-color
+		border 1px solid input-focus-border-color
 		// TODO: Replace with alpha(main-color, 20%) function
 		box-shadow 0 0 6px rgba(248, 165, 130, 0.2)
 
@@ -18,11 +18,15 @@ input, textarea
 	box-shadow none
 	input-focus
 
+	:active
+		transform translateY(3px)
+	
 	:disabled
 		ui-disabled
 
 // We need this to have a selector with a higher priority than .widget-element:focus
-input.widget-element
+input.widget-element,
+textarea.widget-element
 	input-focus
 
 button, .button
@@ -33,10 +37,11 @@ button, .button
 	padding 0.75rem 1rem
 	color link-color
 
-	:hover
+	:hover,
+	&.active
 		cursor pointer
 		color white
-		background-color link-hover-color
+		background-color button-hover-color
 
 	:active
 		transform translateY(3px)

styles/navigation.scarlet

@@ -12,8 +12,8 @@
 	:after
 		content ""
 		display block
-		height 3px
+		height hover-line-size
-		background-color main-color
+		background-color nav-link-hover-slide-color
 		transform scaleX(0)
 		opacity 0
 		default-transition
@@ -45,13 +45,16 @@
 #search
 	display none
 	border-radius 0
-	background text-color
+	background transparent
 	border none
 	
-	color white
+	color nav-link-hover-color
 	font-size 1em
 	min-width 0
 
+	::placeholder
+		color nav-link-color
+
 	:focus
 		border none
 		box-shadow none

styles/table.scarlet

@@ -20,4 +20,4 @@ th
 tbody
 	tr
 		:hover
-			background-color rgba(0, 0, 0, 0.03)
+			background-color rgba(0, 0, 0, 0.015)

styles/widgets.scarlet

@@ -12,7 +12,7 @@
 .widget-element
 	vertical-wrap
 	ui-element
-	transition border transition-speed ease, background transition-speed ease, transform transition-speed ease
+	transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, transform color ease
 	margin-bottom 1rem
 	padding 0.5rem 1rem
 	width 100%