Removed genres from sidebar (on explore page now)

layout/sidebar/sidebar.pixy

@@ -16,12 +16,7 @@ component Sidebar(user *arn.User)
 		SidebarButton("Forum", "/forum", "comment")
 		SidebarButton("Explore", "/explore", "th")
 		SidebarButton("Calendar", "/calendar", "calendar")
-		SidebarButton("Genres", "/genres", "clone")
 		SidebarButton("Soundtracks", "/soundtracks", "headphones")
-
-		if user != nil && user.Role == "admin"
-			
-
 		SidebarButton("Users", "/users", "globe")
 
 		if user != nil
@@ -36,6 +31,7 @@ component Sidebar(user *arn.User)
 		//- SidebarButton("Groups", "/groups", "users")
 		//- SidebarButton("Statistics", "/statistics", "pie-chart")
 		//- SidebarButton("Companies", "/companies", "building")
+		//- SidebarButton("Genres", "/genres", "clone")
 
 		.spacer
 		

pages/anime/genres.scarlet

@@ -7,7 +7,7 @@
 	padding 0.25rem 0.75rem
 	font-size 85%
 	color text-color
-	background hsla(0, 0%, 100%, 0.1)
+	background reverse-light-color
 	border-radius ui-element-border-radius
 	margin 0.35rem
 
@@ -18,7 +18,7 @@
 		color text-color
 		opacity 1.0
 		text-shadow none
-		background hsla(0, 0%, 100%, 0.2)
+		background reverse-light-hover-color
 
 > 800px
 	.anime-genres

pages/explore/explore.pixy

@@ -1,12 +1,18 @@
 component ExploreAnime(animeList []*arn.Anime, year string, status string, typ string, user *arn.User)
 	ExploreFilters(year, status, typ)
 
+	.corner-buttons-hide-on-mobile
+		a.button.ajax(href="/genres")
+			Icon("clone")
+			span View genres
+
 	h1.page-title Explore
 
-	if len(animeList) == 0
+	.explore-anime
-		p.no-data.mountable No anime found using the above filters.
+		if len(animeList) == 0
-	else
+			p.no-data.mountable No anime found using the above filters.
-		AnimeGrid(animeList, user)
+		else
+			AnimeGrid(animeList, user)
 
 component ExploreFilters(year string, status string, typ string)
 	.explore-filters

pages/explore/explore.scarlet

@@ -1,11 +1,14 @@
 .explore-filters
 	horizontal
 	justify-content center
-	margin-bottom content-padding
+	margin-bottom calc(content-padding / 2)
 
 	select
 		margin 0.05rem
 
+.explore-anime
+	margin-top calc(content-padding / 2)
+
 #filter-year
 	max-width 80px
 

scripts/Actions/Theme.ts

@@ -11,6 +11,8 @@ let dark = {
 	"link-color": "hsl(var(--hue), var(--saturation), 66%)",
 	"link-hover-color": "hsl(var(--hue), var(--saturation), 76%)",
 	"link-hover-text-shadow": "0 0 8px hsla(var(--hue), var(--saturation), 66%, 0.5)",
+	"reverse-light-color": "rgba(255, 255, 255, 0.1)",
+	"reverse-light-hover-color": "rgba(255, 255, 255, 0.2)",
 	"ui-background": "hsl(0, 0%, 18%)",
 	"sidebar-background": "hsla(0, 0%, 0%, 0.2)",
 	"sidebar-opaque-background": "hsl(0, 0%, 18%)",

styles/corner-buttons.scarlet

@@ -2,8 +2,13 @@
 	display flex
 	justify-content center
 
+.corner-buttons-hide-on-mobile
+	display none
+
 > 600px
-	.corner-buttons
+	.corner-buttons,
+	.corner-buttons-hide-on-mobile
+		display flex
 		position absolute
 		top content-padding
 		right content-padding

styles/include/config.scarlet

@@ -7,6 +7,8 @@ link-hover-color = rgb(242, 60, 30)
 link-active-color = link-hover-color
 pro-color = hsla(0, 100%, 73%, 0.87)
 anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
+reverse-light-color = rgba(0, 0, 0, 0.05)
+reverse-light-hover-color = rgba(0, 0, 0, 0.1)
 
 theme-white = bg-color
 theme-black = text-color