Redesign

styles/headers.scarlet

@@ -2,7 +2,7 @@ h1, h2
 	font-size 2em
 	font-weight bold
 	text-align center
-	line-height 1.2em
+	line-height 1.3em
 
 h3
 	font-size 1.5em

styles/include/config.scarlet

@@ -7,6 +7,10 @@ link-hover-color = rgb(242, 60, 30)
 link-active-color = link-hover-color
 pro-color = hsla(0, 100%, 73%, 0.87)
 
+theme-white = bg-color
+theme-black = text-color
+link-hover-text-shadow = none
+
 // UI
 ui-border-color = rgba(0, 0, 0, 0.1)
 ui-border = 1px solid ui-border-color
@@ -68,6 +72,6 @@ typography-margin = 0.4rem
 // nav-height = 3.11rem
 
 // Timings
-fade-speed = 250ms
-transition-speed = 200ms
-mountable-transition-speed = 250ms
+fade-speed = 200ms
+transition-speed = 150ms
+mountable-transition-speed = 200ms

styles/include/dark.scarlet

@@ -3,8 +3,7 @@ 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 = hsla(0, 0%, 18%, 0.5)
-tab-hover-background = link-hover-color
+ui-background = hsla(0, 0%, 8%, 0.5)
 
 theme-white = bg-color
 theme-black = text-color
@@ -15,4 +14,5 @@ main-color = link-color
 link-active-color = link-hover-color
 button-hover-color = link-hover-color
 button-hover-background = hsla(0, 0%, 12%, 0.5)
+tab-hover-background = link-hover-color
 loading-anim-color = link-color

styles/sidebar.scarlet

@@ -1,61 +0,0 @@
-sidebar-spacing-y = 0.7rem
-
-#sidebar
-	vertical
-	position fixed
-	left 0
-	top 0
-	z-index 10
-	min-width 200px
-	height 100%
-	background ui-background
-	transform translateX(-100%)
-	overflow-x hidden
-	overflow-y auto
-	opacity 0
-	pointer-events none
-	box-shadow shadow-medium
-	transition opacity transition-speed ease, transform transition-speed ease
-	will-change opacity, transition
-
-	.user-image-container
-		horizontal
-		justify-content center
-		margin 0.8rem 0
-		flex-shrink 0
-
-> 800px
-	#sidebar
-		opacity 1
-		transform none
-		position static
-		pointer-events auto
-		box-shadow none
-		border-right ui-border
-		background rgba(0, 0, 0, 0.03)
-
-.sidebar-visible
-	transform translateX(0) !important
-	pointer-events auto !important
-	opacity 1 !important
-
-.sidebar-link
-	color text-color
-	
-	&.active
-		.sidebar-button
-			// background tab-hover-background
-			// 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
-
-	.icon
-		font-size 1rem
-		margin-right 0.75rem