Improved scarlet styles

config.json

@@ -15,6 +15,7 @@
 		"navigation",
 		"headers",
 		"forms",
+		"grid",
 		"colors",
 		"animelist",
 		"forum",

mixins/AnimeGrid.pixy

@@ -1,5 +1,5 @@
 component AnimeGrid(animeList []*arn.Anime)
-	.grid
+	.anime-grid
 		each anime in animeList
-			a.grid-cell.grid-anime.ajax(href="/anime/" + toString(anime.ID))
+			a.anime-grid-cell.ajax(href="/anime/" + toString(anime.ID))
-				img.grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")
+				img.anime-grid-image(src=anime.Image, alt=anime.Title.Romaji, title=anime.Title.Romaji + " (" + toString(anime.Watching) + ")")

mixins/AnimeGrid.scarlet

@@ -0,0 +1,8 @@
+.anime-grid
+	grid
+
+.anime-grid-cell
+	grid-cell
+
+.anime-grid-image
+	grid-image

mixins/Icon.pixy

@@ -1,5 +1,5 @@
 component Icon(name string)
 	i(class="fa fa-fw fa-" + name)
 
-component GridIcon(name string)
+component RawIcon(name string)
-	span(class="fa fa-" + name + " grid-icon")
+	span(class="fa fa-" + name)

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)
+			a.genre.ajax(href="/genres/" + genre.ID)
-				.backside-card.ui
+				.genre-text.front
-					.grid-text.front
+					.genre-icon
-						GridIcon(arn.GetGenreIcon(genre.Name))
+						RawIcon(arn.GetGenreIcon(genre.Name))
-						span= genre.Name
+					span= genre.Name
 
-					if len(genre.AnimeList) > 0
+				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")
+					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

styles/config.scarlet

@@ -7,6 +7,17 @@ header-color = rgb(60, 60, 60)
 nav-link-color = rgb(160, 160, 160)
 nav-link-hover-color = rgb(255, 255, 255)
 
+// UI
+ui-border = 1px solid rgba(0, 0, 0, 0.1)
+ui-hover-border = 1px solid rgba(0, 0, 0, 0.15)
+ui-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.037) 100%)
+ui-hover-background = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
+
+// Outline shadow
+outline-shadow-light = 0 0 6px alpha(black, 0.05)
+outline-shadow-medium = 0 0 6px alpha(black, 0.13)
+outline-shadow-heavy = 0 0 6px alpha(black, 0.6)
+
 // Distances
 content-padding = 1.5rem
 hover-line-size = 2px

styles/grid.scarlet

@@ -1,8 +1,8 @@
-.grid
+mixin grid
 	horizontal-wrap
 	justify-content center
 
-.grid-cell
+mixin grid-cell
 	position relative
 	
 	flex-grow 0
@@ -21,41 +21,7 @@
 
 	margin 0.5rem
 
-	:hover
+mixin grid-text
-		.backside-card
-			transform rotateY(180deg)
-			
-			.front
-				opacity 0
-			.back
-				opacity 1
-
-.backside-card
-	width 100%
-	height 100%
-	transition all transition-speed ease-in-out
-
-.front
-	position absolute
-	left 0
-	top 0
-	opacity 1
-	transition opacity transition-speed ease
-
-.back
-	position absolute
-	left 0
-	top 0
-	opacity 0
-	transition opacity transition-speed ease
-	transform rotateY(180deg)
-
-.grid-anime
-	border none
-	:hover
-		border none
-
-.grid-text
 	vertical
 	width 100%
 	height 100%
@@ -64,15 +30,38 @@
 	font-size 1rem
 	color rgb(160, 160, 160)
 
-.grid-icon
+mixin grid-image
+	width 100%
+	height 100%
+	border-radius 3px
+	object-fit cover
+
+mixin grid-icon
 	font-size 2.5rem
 	margin-top 2rem
 	margin-bottom 0.7rem
 	color link-color
 
-.grid-image
+mixin flip-card
-	width 100%
+	:hover
-	height 100%
+		.front
-	margin 0
+			transform rotateY(180deg)
-	border-radius 3px
+			opacity 0
-	object-fit cover
+		.back
+			transform rotateY(0deg)
+			opacity 1
+
+.front
+	position absolute
+	left 0
+	top 0
+	opacity 1
+	transition all transition-speed ease
+
+.back
+	position absolute
+	left 0
+	top 0
+	opacity 0
+	transition all transition-speed ease
+	transform rotateY(180deg)

styles/mixins.scarlet

@@ -12,4 +12,15 @@ mixin vertical
 
 mixin vertical-wrap
 	display flex
-	flex-flow column wrap
+	flex-flow column wrap
+
+mixin ui-element
+	border ui-border
+	background ui-background
+	border-radius 3px
+	transition all transition-speed ease
+
+	&:hover
+		border ui-hover-border
+		background ui-hover-background
+		box-shadow outline-shadow-medium