Started working on new episodes

pages/anime/episode.scarlet

@@ -1,19 +1,40 @@
 .episodes
-	max-width 100%
+	vertical
+
+> 700px
+	.episodes
+		horizontal-wrap
 
 .episode
-	horizontal
+	ui-element
+	vertical
+	button-hover
+	flex 0
+	flex-basis 150px
+	margin 0.5rem
+	padding 0.5rem
+
+	// :hover
+	// 	background-color table-row-hover-background
 
 .episode-number
-	flex-basis 3.2rem
+	display flex
-	// text-align right
+	justify-content center
+	align-items center
+	font-size 2rem
+	line-height 1.7em
 
 .episode-title
-	flex 1
+	text-align center
+	font-size 0.7rem
+	opacity 0.8
+	clip-long-text
 
 .episode-airing-date-start
-	flex-basis 150px
+	display flex
-	text-align right
+	justify-content center
+	font-size 0.8rem
+	opacity 0.6
 
 < 800px
 	.episode-airing-date-start

pages/anime/episodes.pixy

@@ -2,26 +2,43 @@ component AnimeEpisodes(episodes []*arn.AnimeEpisode, user *arn.User)
 	if len(episodes) > 0
 		.anime-section.mountable
 			h3.anime-section-name Episodes
-			table.episodes
+			.episodes
-				tbody
 				each episode in episodes
-						tr.episode.mountable(data-mountable-type="episode")
+					.episode.mountable(data-mountable-type="episode")
-							td.episode-number
+						.episode-number
 							if episode.Number != -1
 								span= episode.Number
-							td.episode-title
+						
-								if episode.Title.Japanese != ""
+						.episode-title= episode.Title.Japanese
-									Japanese(episode.Title.Japanese)
+							//- if episode.Title.Japanese != ""
-								else
+							//- 	Japanese(episode.Title.Japanese)
-									span -
+							//- else
-							if user != nil && user.Location.CountryName != "Japan"
+							//- 	span -
-								td.episode-actions
+						
-									for name, link := range episode.Links
-										a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
-											RawIcon("eye")
-									//- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
-									//- 	RawIcon("google")
 						if validator.IsValidDate(episode.AiringDate.Start)
-								td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+							.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
-							else
+			
-								td.episode-airing-date-start
+			
+			//- table.episodes
+			//- 	tbody
+			//- 		each episode in episodes
+			//- 			tr.episode.mountable(data-mountable-type="episode")
+			//- 				td.episode-number
+			//- 					if episode.Number != -1
+			//- 						span= episode.Number
+			//- 				td.episode-title
+			//- 					if episode.Title.Japanese != ""
+			//- 						Japanese(episode.Title.Japanese)
+			//- 					else
+			//- 						span -
+			//- 				if user != nil && user.Location.CountryName != "Japan"
+			//- 					td.episode-actions
+			//- 						for name, link := range episode.Links
+			//- 							a(href=link, target="_blank", rel="noopener", title="Watch episode " + toString(episode.Number) + " on " + name)
+			//- 								RawIcon("eye")
+			//- 						//- a(href="https://translate.google.com/#ja/en/" + episode.Title.Japanese, target="_blank", rel="noopener")
+			//- 						//- 	RawIcon("google")
+			//- 				if validator.IsValidDate(episode.AiringDate.Start)
+			//- 					td.episode-airing-date-start.utc-airing-date(data-start-date=episode.AiringDate.Start, data-end-date=episode.AiringDate.End, data-episode-number=episode.Number)= episode.AiringDate.StartDateHuman()
+			//- 				else
+			//- 					td.episode-airing-date-start

styles/input.scarlet

@@ -4,6 +4,16 @@ mixin input-focus
 		// TODO: Replace with alpha(main-color, 20%) function
 		box-shadow 0 0 6px rgba(248, 165, 130, 0.2) !important
 
+mixin button-hover
+	:hover,
+	&.active
+		cursor pointer
+		color button-hover-color
+		background button-hover-background
+
+	:active
+		transform translateY(3px)
+
 input, textarea, button, .button, select
 	ui-element
 	font-family inherit
@@ -34,14 +44,7 @@ button, .button
 	color link-color
 	align-items center
 
-	:hover,
+	button-hover
-	&.active
-		cursor pointer
-		color button-hover-color
-		background button-hover-background
-
-	:active
-		transform translateY(3px)
 
 select
 	appearance none