Started working on dark theme

config.json

@@ -6,6 +6,7 @@
 	],
 	"styles": [
 		"include/config",
+		"include/dark",
 		"include/mixins",
 		"reset",
 		"base",

layout/layout.pixy

@@ -23,12 +23,14 @@ component Layout(app *aero.Application, ctx *aero.Context, user *arn.User, openG
 				//- #header
 				//- 	Navigation(user)
 				#columns
-					aside#sidebar
+					Sidebar(user)
-						Sidebar(user)
+					Content(content)
-					#content-container
-						main#content.fade!= content
 				LoadingAnimation
 				StatusMessage
 			if user != nil
 				#user(data-id=user.ID)
-			script(src="/scripts")
+			script(src="/scripts")
+
+component Content(content string)
+	#content-container
+		main#content.fade!= content

main.go

@@ -100,7 +100,6 @@ func configure(app *aero.Application) *aero.Application {
 	app.Ajax("/users", users.Active)
 	app.Ajax("/users/osu", users.Osu)
 	app.Ajax("/users/staff", users.Staff)
-	app.Ajax("/users/anime/watching", users.AnimeWatching)
 	app.Ajax("/statistics", statistics.Get)
 	app.Ajax("/statistics/anime", statistics.Anime)
 	app.Ajax("/login", login.Get)

mixins/Sidebar.pixy

@@ -1,56 +1,57 @@
 component Sidebar(user *arn.User)
-	.user-image-container
+	aside#sidebar
+		.user-image-container
+			if user != nil
+				Avatar(user)
+			else
+				img.user-image.lazy(src=utils.EmptyImage(), data-src="/images/brand/64.png", data-webp="true", alt="Anime Notifier")
+		
 		if user != nil
-			Avatar(user)
+			SidebarButton("Home", "/animelist/watching", "home")
+			SidebarButton("Dash", "/dashboard", "tachometer")
 		else
-			img.user-image.lazy(src=utils.EmptyImage(), data-src="/images/brand/64.png", data-webp="true", alt="Anime Notifier")
+			SidebarButton("Home", "/", "home")
-	
-	if user != nil
-		SidebarButton("Home", "/animelist/watching", "home")
-		SidebarButton("Dash", "/dashboard", "tachometer")
-	else
-		SidebarButton("Home", "/", "home")
-	
-	SidebarButton("Forum", "/forum", "comment")
-	SidebarButton("Explore", "/explore", "th")
-	//- SidebarButton("Artworks", "/artworks", "paint-brush")
-	SidebarButton("Soundtracks", "/soundtracks", "headphones")
-	//- SidebarButton("AMVs", "/amvs", "video-camera")
-	//- SidebarButton("Games", "/games", "gamepad")
-	SidebarButton("Users", "/users", "globe")
-	//- SidebarButton("Search", "/search", "search")
-
-	if user != nil
-		if user.Role == "admin"
-			SidebarButton("Groups", "/groups", "users")
 		
-		SidebarButton("Shop", "/shop", "shopping-cart")
+		SidebarButton("Forum", "/forum", "comment")
+		SidebarButton("Explore", "/explore", "th")
+		//- SidebarButton("Artworks", "/artworks", "paint-brush")
+		SidebarButton("Soundtracks", "/soundtracks", "headphones")
+		//- SidebarButton("AMVs", "/amvs", "video-camera")
+		//- SidebarButton("Games", "/games", "gamepad")
+		SidebarButton("Users", "/users", "globe")
+		//- SidebarButton("Search", "/search", "search")
 
-		if user.Role == "admin" || user.Role == "editor"
+		if user != nil
-			SidebarButton("Statistics", "/statistics", "pie-chart")
+			if user.Role == "admin"
+				SidebarButton("Groups", "/groups", "users")
+			
+			SidebarButton("Shop", "/shop", "shopping-cart")
 
-		SidebarButton("Settings", "/settings", "cog")
+			if user.Role == "admin" || user.Role == "editor"
+				SidebarButton("Statistics", "/statistics", "pie-chart")
 
-	.spacer
+			SidebarButton("Settings", "/settings", "cog")
 
-	.sidebar-link(aria-label="Search")
+		.spacer
-		.sidebar-button
-			Icon("search")
-			FuzzySearch
 
-	if user != nil
+		.sidebar-link(aria-label="Search")
-		if user.Role == "admin"
+			.sidebar-button
-			SidebarButton("Admin", "/admin", "wrench")
+				Icon("search")
-		
+				FuzzySearch
-		if user.Role == "editor"
-			SidebarButton("Editor", "/editor", "pencil")
 
-	SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle")
+		if user != nil
+			if user.Role == "admin"
+				SidebarButton("Admin", "/admin", "wrench")
+			
+			if user.Role == "editor"
+				SidebarButton("Editor", "/editor", "pencil")
 
-	if user != nil
+		SidebarButton("Help", "/thread/I3MMiOtzR", "question-circle")
-		SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
+
-	else
+		if user != nil
-		SidebarButton("Login", "/login", "sign-in")
+			SidebarButtonNoAJAX("Logout", "/logout", "sign-out")
+		else
+			SidebarButton("Login", "/login", "sign-in")
 
 component SidebarButton(name string, target string, icon string)
 	a.sidebar-link.ajax(href=target, aria-label=name, data-bubble="true")

pages/admin/admin.go

@@ -1,16 +1,10 @@
 package admin
 
 import (
-	"time"
-
 	"github.com/aerogo/aero"
-	"github.com/animenotifier/arn"
 	"github.com/animenotifier/notify.moe/components"
 	"github.com/animenotifier/notify.moe/utils"
-	"github.com/shirou/gopsutil/cpu"
-	"github.com/shirou/gopsutil/disk"
 	"github.com/shirou/gopsutil/host"
-	"github.com/shirou/gopsutil/mem"
 )
 
 // Get admin page.
@@ -21,40 +15,40 @@ func Get(ctx *aero.Context) string {
 		return ctx.Redirect("/")
 	}
 
-	// CPU
+	// // CPU
-	cpuUsage := 0.0
+	// cpuUsage := 0.0
-	cpuUsages, err := cpu.Percent(1*time.Second, false)
+	// cpuUsages, err := cpu.Percent(1*time.Second, false)
 
-	if err == nil {
+	// if err == nil {
-		cpuUsage = cpuUsages[0]
+	// 	cpuUsage = cpuUsages[0]
-	}
+	// }
 
-	// Memory
+	// // Memory
-	memUsage := 0.0
+	// memUsage := 0.0
-	memInfo, _ := mem.VirtualMemory()
+	// memInfo, _ := mem.VirtualMemory()
 
-	if err == nil {
+	// if err == nil {
-		memUsage = memInfo.UsedPercent
+	// 	memUsage = memInfo.UsedPercent
-	}
+	// }
 
-	// Disk
+	// // Disk
-	diskUsage := 0.0
+	// diskUsage := 0.0
-	diskInfo, err := disk.Usage("/")
+	// diskInfo, err := disk.Usage("/")
 
-	if err == nil {
+	// if err == nil {
-		diskUsage = diskInfo.UsedPercent
+	// 	diskUsage = diskInfo.UsedPercent
-	}
+	// }
 
 	// Host
 	platform, family, platformVersion, _ := host.PlatformInformation()
-	kernelVersion, err := host.KernelVersion()
+	kernelVersion, _ := host.KernelVersion()
 
-	return ctx.HTML(components.Admin(user, cpuUsage, memUsage, diskUsage, platform, family, platformVersion, kernelVersion))
+	return ctx.HTML(components.Admin(user, platform, family, platformVersion, kernelVersion))
 }
 
 func average(floatSlice []float64) float64 {
 	if len(floatSlice) == 0 {
-		return arn.DefaultAverageRating
+		return 0
 	}
 
 	var sum float64

pages/admin/admin.pixy

@@ -8,32 +8,32 @@ component AdminTabs
 			Icon("pencil")
 			span.tab-text Editor
 
-component Admin(user *arn.User, cpuUsage, memUsage, diskUsage float64, platform, family, platformVersion, kernelVersion string)
+component Admin(user *arn.User, platform, family, platformVersion, kernelVersion string)
 	h1.page-title Admin Panel
 
 	AdminTabs
 
 	.widgets
-		.widget.mountable
+		//- .widget.mountable
-			h3.widget-title Usage
+		//- 	h3.widget-title Usage
 
-			table
+		//- 	table
-				tbody
+		//- 		tbody
-					tr
+		//- 			tr
-						td CPU usage:
+		//- 				td CPU usage:
-						td
+		//- 				td
-							span= int(cpuUsage + 0.5)
+		//- 					span= int(cpuUsage + 0.5)
-							span %
+		//- 					span %
-					tr
+		//- 			tr
-						td Memory usage:
+		//- 				td Memory usage:
-						td
+		//- 				td
-							span= int(memUsage + 0.5)
+		//- 					span= int(memUsage + 0.5)
-							span %
+		//- 					span %
-					tr
+		//- 			tr
-						td Disk usage:
+		//- 				td Disk usage:
-						td
+		//- 				td
-							span= int(diskUsage + 0.5)
+		//- 					span= int(diskUsage + 0.5)
-							span %
+		//- 					span %
 		
 		.widget.mountable
 			h3.widget-title OS

pages/anime/anime.scarlet

@@ -51,7 +51,7 @@
 	line-height content-line-height
 	
 	.japanese
-		color rgba(60, 60, 60, 0.5) !important
+		color rgba(255, 255, 255, 0.5) !important
 
 .anime-actions
 	horizontal

pages/soundtracks/soundtracks.scarlet

@@ -17,8 +17,9 @@
 	box-shadow shadow-light
 
 .sound-track-footer
-	text-align right
+	text-align center
 	margin-bottom 1rem
+	margin-top 0.4rem
 	font-size 0.9em
 
 	span

pages/users/users.go

@@ -14,7 +14,11 @@ func Active(ctx *aero.Context) string {
 		return user.IsActive() && user.HasAvatar()
 	})
 
-	arn.SortUsersLastSeen(users)
+	sort.Slice(users, func(i, j int) bool {
+		return len(users[i].AnimeList().Watching().Items) > len(users[j].AnimeList().Watching().Items)
+	})
+
+	// arn.SortUsersLastSeen(users)
 
 	return ctx.HTML(components.Users(users))
 }
@@ -57,16 +61,3 @@ func Staff(ctx *aero.Context) string {
 
 	return ctx.HTML(components.Users(users))
 }
-
-// AnimeWatching ...
-func AnimeWatching(ctx *aero.Context) string {
-	users := arn.FilterUsers(func(user *arn.User) bool {
-		return user.IsActive() && user.HasAvatar()
-	})
-
-	sort.Slice(users, func(i, j int) bool {
-		return len(users[i].AnimeList().Watching().Items) > len(users[j].AnimeList().Watching().Items)
-	})
-
-	return ctx.HTML(components.Users(users))
-}

pages/users/users.pixy

@@ -11,6 +11,5 @@ component Users(users []*arn.User)
 component UsersTabs
 	.tabs
 		Tab("Active", "users", "/users")
-		Tab("Watching", "tv", "/users/anime/watching")
 		Tab("Osu", "gamepad", "/users/osu")
 		Tab("Staff", "user-secret", "/users/staff")

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
+		color button-hover-color
-		background-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
+			// background forum-tag-hover-color
-			color white
+			// 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
+	horizontal-wrap
-	grid-template-columns 1fr
+	justify-content center
-
-> 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)
 
 .widget
 	vertical
-	margin-bottom 1rem
+	width 100%
+	max-width 300px
+	margin calc(content-padding / 2)
 	overflow hidden
 
 .widget-section