From 95d6057e135cf5457a0ceecd3301f0057eb84a46 Mon Sep 17 00:00:00 2001
From: Eduard Urbach <e.urbach@gmail.com>
Date: Thu, 30 Nov 2017 03:39:00 +0100
Subject: [PATCH] Improved mobile styles

---
 layout/sidebar/sidebar.scarlet |  4 ++--
 pages/genres/genres.pixy       |  2 +-
 pages/genres/genres.scarlet    | 14 +++++++++++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet
index 4a886d87..ba173656 100644
--- a/layout/sidebar/sidebar.scarlet
+++ b/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
 
diff --git a/pages/genres/genres.pixy b/pages/genres/genres.pixy
index 49926f4c..b7687ac0 100644
--- a/pages/genres/genres.pixy
+++ b/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)
\ No newline at end of file
diff --git a/pages/genres/genres.scarlet b/pages/genres/genres.scarlet
index 371e43c5..660678dd 100644
--- a/pages/genres/genres.scarlet
+++ b/pages/genres/genres.scarlet
@@ -19,4 +19,16 @@
 	shadow-up
 
 .back
-	shadow-up
\ No newline at end of file
+	shadow-up
+
+< 450px
+	.genre
+		width 71px
+		height 100px
+		margin 0.3rem
+
+		.genre-icon
+			margin 0
+
+		.genre-text-only
+			display none
\ No newline at end of file