Design improvements

mixins/Navigation.pixy

@@ -69,7 +69,7 @@ component NavigationButton(name string, target string, icon string)
 			span.navigation-text= name
 
 component SidebarButton(name string, target string, icon string)
-	a.sidebar-link.ajax(href=target, aria-label=name, title=name, data-bubble="true")
+	a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true")
 		.sidebar-button
 			Icon(icon)
 			span.sidebar-text= name

pages/animelist/animelist.scarlet

@@ -2,7 +2,7 @@
 	vertical
 	width 100%
 	max-width table-width-normal
-	// margin 0 auto
+	margin 0 auto
 	margin-bottom 1rem
 
 .anime-list

pages/home/home.go

@@ -9,7 +9,7 @@ import (
 	"github.com/animenotifier/notify.moe/utils"
 )
 
-// Get the dashboard or the frontpage when logged out.
+// Get the anime list or the frontpage when logged out.
 func Get(ctx *aero.Context) string {
 	user := utils.GetUser(ctx)
 
@@ -27,5 +27,5 @@ func Get(ctx *aero.Context) string {
 	animeList.PrefetchAnime()
 	animeList.Sort()
 
-	return ctx.HTML(components.AnimeLists(animeList.SplitByStatus(), animeList.User(), user))
+	return ctx.HTML(components.Home(animeList.Watching(), animeList.User(), user, "watching"))
 }

pages/home/home.pixy

@@ -0,0 +1,3 @@
+component Home(animeList *arn.AnimeList, viewUser *arn.User, user *arn.User, status string)
+	StatusTabs("/animelist/")
+	AnimeListFilteredByStatus(animeList, viewUser, user, status)

styles/base.scarlet

@@ -1,7 +1,7 @@
 html
 	height 100%
 	font-family "Ubuntu", "Trebuchet MS", sans-serif
-	font-size 105%
+	font-size 95%
 
 body
 	tab-size 4
@@ -9,6 +9,7 @@ body
 	height 100%
 	color text-color
 	background-color bg-color
+	noise-strong
 
 a
 	color link-color

styles/include/mixins.scarlet

@@ -17,6 +17,12 @@ mixin vertical-wrap
 	display flex
 	flex-flow column wrap
 
+mixin noise-light
+	background-image url("/images/elements/noise-light.png")
+
+mixin noise-strong
+	background-image url("/images/elements/noise-strong.png")
+
 mixin ui-element
 	border 1px solid ui-border-color
 	background ui-background

styles/sidebar.scarlet

@@ -23,7 +23,7 @@ sidebar-spacing-y = 0.7rem
 		justify-content center
 		margin 0.8rem 0
 
-> 700px
+> 800px
 	#sidebar
 		opacity 1
 		transform none
@@ -31,6 +31,7 @@ sidebar-spacing-y = 0.7rem
 		pointer-events all
 		box-shadow none
 		border-right ui-border
+		background rgba(0, 0, 0, 0.03)
 
 .sidebar-visible
 	transform translateX(0) !important
@@ -48,7 +49,6 @@ sidebar-spacing-y = 0.7rem
 	horizontal
 	align-items center
 	padding sidebar-spacing-y 1rem
-	font-size 0.92rem
 	// background ui-background
 
 	.icon

styles/table.scarlet

@@ -1,7 +1,7 @@
 table
 	width 100%
 	max-width table-width-normal
-	// margin 0 auto
+	margin 0 auto
 
 tr
 	border-bottom-width 1px

styles/tabs.scarlet

@@ -1,13 +1,21 @@
 .tab
 	color text-color !important
 	padding 0.5rem 1rem
+	background-color rgb(238, 238, 238)
 	border-right ui-border
-	background-color rgb(224, 224, 224) !important
+	border-bottom ui-border
+	white-space nowrap
 
 	:hover,
 	&.active
 		background-color bg-color !important
 		transform none
+	
+	&.active
+		border-bottom-color transparent
+
+	:first-child
+		border-left ui-border
 
 	// color text-color !important
 	// :hover
@@ -26,10 +34,12 @@
 
 .tabs
 	horizontal
-	margin-left calc(content-padding * -1)
+	justify-content center
-	margin-top calc(content-padding * -1)
+	// margin-left calc(content-padding * -1)
-	margin-right calc(content-padding * -2)
+	// margin-top calc(content-padding * -1)
-	border-bottom ui-border
+	// margin-right calc(content-padding * -2)
+	margin-bottom content-padding
+	// background-color rgba(0, 0, 0, 0.02)
 	// justify-content flex-start !important
 	// margin-bottom 1rem
 	// margin-top -0.6rem