Improved scarlet styles

pages/anime/anime.pixy

@@ -2,7 +2,7 @@ component Anime(anime *arn.Anime)
 	.anime-header(data-id=anime.ID)
 		if anime.Image != ""
 			.anime-image-container
-				img.anime-image(src=anime.Image, alt=anime.Title.Romaji)
+				img.anime-cover-image(src=anime.Image, alt=anime.Title.Romaji)
 		
 		.anime-info
 			h2.anime-title(title=anime.Type)= anime.Title.Romaji

pages/anime/anime.scarlet

@@ -7,7 +7,7 @@
 	justify-content center
 	align-items flex-start
 
-.anime-image
+.anime-cover-image
 	width 230px
 	height auto
 	border-radius 3px

pages/genres/genres.pixy

@@ -1,13 +1,13 @@
 component Genres(genres []*arn.Genre)
 	h2 Genres
 	
-	.grid
+	.genres
 		each genre in genres
-			a.grid-cell.ajax(href="/genres/" + genre.ID)
-				.backside-card.ui
-					.grid-text.front
-						GridIcon(arn.GetGenreIcon(genre.Name))
-						span= genre.Name
+			a.genre.ajax(href="/genres/" + genre.ID)
+				.genre-text.front
+					.genre-icon
+						RawIcon(arn.GetGenreIcon(genre.Name))
+					span= genre.Name
 
-					if len(genre.AnimeList) > 0
-						img.grid-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji + "\n" + genre.Name + " #1")
+				if len(genre.AnimeList) > 0
+					img.genre-image.back(src=genre.AnimeList[0].Image, alt=genre.AnimeList[0].Title.Romaji, title=genre.AnimeList[0].Title.Romaji + "\n" + genre.Name + " #1")

pages/genres/genres.scarlet

@@ -0,0 +1,16 @@
+.genres
+	grid
+
+.genre
+	grid-cell
+	flip-card
+	ui-element
+
+.genre-text
+	grid-text
+
+.genre-icon
+	grid-icon
+
+.genre-image
+	grid-image

pages/search/popular.scarlet

@@ -0,0 +1,16 @@
+.popular-title
+	text-align center
+
+.popular-anime-list
+	display flex
+	flex-flow row wrap
+	justify-content center
+
+.popular-anime
+	padding 0.5em
+	display block
+
+.popular-anime-image
+	width 100px !important
+	height 141px !important
+	border-radius 3px

pages/search/search.styl

@@ -1,2 +0,0 @@
-.popular-title
-	text-align center