Improved mobile styles

layout/sidebar/sidebar.scarlet

@@ -6,7 +6,7 @@ sidebar-spacing-y = 0.7rem
 	left 0
 	top 0
 	z-index 10
-	width 60vw
+	width 70vw
 	height 100%
 	background sidebar-opaque-background
 	transform translateX(-100%)
@@ -14,7 +14,7 @@ sidebar-spacing-y = 0.7rem
 	overflow-y auto
 	opacity 0
 	pointer-events none
-	box-shadow 24px 0 24px rgba(0, 0, 0, 0.3)
+	box-shadow 24px 0 24px rgba(0, 0, 0, 0.2)
 	transition opacity transition-speed ease, transform transition-speed ease
 	will-change opacity, transition
 

pages/genres/genres.pixy

@@ -7,6 +7,6 @@ component Genres(genres []string, genreToAnime map[string]*arn.Anime, user *arn.
 				.genre-text.front
 					.genre-icon
 						RawIcon(arn.GetGenreIcon(genre))
-					span= genre
+					span.genre-text-only= genre
 
 				img.genre-image.back(src=genreToAnime[genre].Image("medium"), alt=genreToAnime[genre].Title.ByUser(user), title=genre)

pages/genres/genres.scarlet

@@ -19,4 +19,16 @@
 	shadow-up
 
 .back
-	shadow-up
+	shadow-up
+
+< 450px
+	.genre
+		width 71px
+		height 100px
+		margin 0.3rem
+
+		.genre-icon
+			margin 0
+
+		.genre-text-only
+			display none