Redesign

layout/sidebar/sidebar.scarlet

@@ -44,14 +44,13 @@ sidebar-spacing-y = 0.7rem
 	
 	&.active
 		.sidebar-button
-			// background tab-hover-background
+			color tab-active-color
-			// color white
+			background tab-active-background
-			color link-color
 			text-shadow link-hover-text-shadow
+			background tab-active-background
 
 .sidebar-button
 	horizontal
-	default-transition
 	align-items center
 	padding sidebar-spacing-y 1rem
 	// background ui-background

pages/anime/anime.pixy

@@ -1,9 +1,14 @@
 component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
-	//- AnimeTabs(anime)
 	.anime
+		.anime-main-column
+			AnimeMainColumn(anime, user)
+		.anime-side-column
+			AnimeSideColumn(anime, friends, listItems, user)
+
+component AnimeMainColumn(anime *arn.Anime, user *arn.User)
 	.anime-header(data-id=anime.ID)
 		if anime.Image.Large != ""
-				.anime-image-container
+			.anime-image-container.mountable
 				img.anime-cover-image(src=anime.Image.Large, alt=anime.Title.ByUser(user))
 
 				//- if anime.StartDate != ""
@@ -16,13 +21,15 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
 		.space
 
 		.anime-info
-				h1.anime-title(title=anime.Type)= anime.Title.ByUser(user)
+			h1.anime-title.mountable(title=anime.Type)= anime.Title.ByUser(user)
 
-				h2.anime-alternative-title
+			h2.anime-alternative-title.mountable
 				Japanese(anime.Title.Japanese)
 
 			//- h3.anime-section-name.anime-summary-header Summary
-				p.anime-summary= anime.Summary
+			p.anime-summary.mountable= anime.Summary
+
+			//- AnimeTabs(anime)
 	
 	if user != nil
 		.buttons.anime-actions
@@ -58,36 +65,19 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
 	//- 		.anime-rating-category-name Soundtrack
 	//- 		Rating(anime.Rating.Soundtrack, user)
 
-		//- if len(friends) > 0
+	if anime.Relations() != nil && len(anime.Relations().Items) > 0
-		//- 	h3.anime-section-name Friends
+		section.anime-section.mountable
+			h3.anime-section-name Relations
+			.anime-relations
+				each relation in anime.Relations().Items
+					a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
+						img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
+						.anime-relation-type= relation.HumanReadableType()
+						.anime-relation-year
+							if relation.Anime().StartDate != ""
+								span= relation.Anime().StartDate[:4]
 
-		//- 	.anime-friends
+	AnimeCharacters(anime)
-		//- 		.user-avatars
-		//- 			each friend in friends
-		//- 				if friend.Nick != ""
-		//- 					if friend.IsActive()
-		//- 						.mountable
-		//- 							FriendEntry(friend, listItems)
-		//- 					else
-		//- 						.mountable
-		//- 							.inactive-user
-		//- 								FriendEntry(friend, listItems)
-
-		//- if anime.Relations() != nil && len(anime.Relations().Items) > 0
-		//- 	h3.anime-section-name Relations
-		//- 	.anime-relations
-		//- 		each relation in anime.Relations().Items
-		//- 			a.anime-relation.ajax(href=relation.Anime().Link(), title=relation.Anime().Title.ByUser(user))
-		//- 				img.anime-relation-image.lazy(data-src=relation.Anime().Image.Tiny, alt=relation.Anime().Title.ByUser(user))
-		//- 				.anime-relation-type= relation.HumanReadableType()
-		//- 				.anime-relation-year
-		//- 					if relation.Anime().StartDate != ""
-		//- 						span= relation.Anime().StartDate[:4]
-
-		//- if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
-		//- 	h3.anime-section-name Video
-		//- 	.anime-trailer.video-container
-		//- 		iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
 
 	//- h3.anime-section-name Popularity
 	//- .anime-rating-categories
@@ -129,5 +119,74 @@ component Anime(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*
 	//- .footer
 	//- 	span Powered by Kitsu.
 
+component AnimeSideColumn(anime *arn.Anime, friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem, user *arn.User)
+	AnimeTrailer(anime)
+	AnimeInformation(anime)
+	AnimeFriends(friends, listItems)
+
+component AnimeTrailer(anime *arn.Anime)
+	if len(anime.Trailers) > 0 && anime.Trailers[0].Service == "Youtube" && anime.Trailers[0].ServiceID != ""
+		h3.anime-section-name Trailer
+		.anime-trailer.video-container
+			iframe.video(src="https://www.youtube.com/embed/" + anime.Trailers[0].ServiceID + "?showinfo=0", allowfullscreen="allowfullscreen")
+
+component AnimeFriends(friends []*arn.User, listItems map[*arn.User]*arn.AnimeListItem)
+	if len(friends) > 0
+		section.anime-section.mountable
+			h3.anime-section-name Friends
+			
+			.anime-friends
+				.user-avatars
+					each friend in friends
+						if friend.Nick != ""
+							if friend.IsActive()
+								FriendEntry(friend, listItems)
+							else
+								.inactive-user
+									FriendEntry(friend, listItems)
+
+component AnimeInformation(anime *arn.Anime)
+	section.anime-section.mountable
+		h3.anime-section-name Information
+		table.anime-info-table
+			tr
+				td Type:
+				td= anime.TypeHumanReadable()
+
+			if anime.EpisodeCount != 0
+				tr
+					td Episodes:
+					td= anime.EpisodeCount
+
+			if anime.EpisodeLength != 0
+				tr
+					td Episode length:
+					td= strconv.Itoa(anime.EpisodeLength) + " min."
+
+			tr
+				td Status:
+				td= anime.StatusHumanReadable()
+			
+			if anime.StartDate == anime.EndDate && anime.StartDate != "" && anime.EndDate != ""
+				if anime.StartDate != ""
+					tr
+						td Airing date:
+						td= anime.StartDate
+			else
+				if anime.StartDate != ""
+					tr
+						td Start date:
+						td= anime.StartDate
+
+				if anime.EndDate != ""
+					tr
+						td End date:
+						td= anime.EndDate
+
+			if anime.FirstChannel != ""
+				tr
+					td Channel:
+					td= anime.FirstChannel
+
 component FriendEntry(friend *arn.User, listItems map[*arn.User]*arn.AnimeListItem)
 	CustomAvatar(friend, listItems[friend].Link(friend.Nick), friend.Nick + " => " + listItems[friend].Status + " | " + toString(listItems[friend].Episodes) + " eps | " + fmt.Sprintf("%.1f", listItems[friend].Rating.Overall) + " rating")

pages/anime/anime.scarlet

@@ -1,6 +1,23 @@
 .anime
-	max-width 1100px
+	vertical
-	margin 0 auto
+
+.anime-main-column
+	vertical
+	flex 1
+
+.anime-side-column
+	vertical
+	margin-left 0
+	margin-top 1rem
+	flex-basis 300px
+
+> 1500px
+	.anime
+		horizontal
+
+	.anime-side-column
+		margin-left content-padding
+		margin-top 0
 
 .anime-header
 	vertical
@@ -16,6 +33,20 @@
 	.anime-title
 		text-align left
 
+	.anime-alternative-title
+		text-align left
+
+.anime-info-table
+	margin 0
+	width 100%
+	max-width 600px
+
+.anime-section
+	margin-top 1rem
+
+	:first-child
+		margin-top 0 !important
+
 .anime-section-name
 	font-weight bold
 
@@ -32,7 +63,7 @@
 
 .anime-cover-image
 	// width 142px
-	width 225px
+	width 250px
 	height auto
 	border-radius 3px
 	
@@ -57,31 +88,29 @@
 	font-size 0.9em
 	margin-top 0
 	margin-bottom 0.5rem
-	text-align left
+	text-align center
 	font-weight normal
 	line-height content-line-height
 	
 	.japanese
-		color rgba(255, 255, 255, 0.5) !important
+		color anime-alternative-title-color !important
 
 .anime-actions
 	display none !important
+	// horizontal
+	// justify-content center
 
-// .anime-actions
+	// // Action button margin
-// 	horizontal
+	// margin calc(content-padding - 0.5rem) -0.5rem
-// 	justify-content center
 
-// 	// Action button margin
+	// // Setting z-index requires setting a background as well
-// 	margin calc(content-padding - 0.5rem) -0.5rem
+	// z-index 10
 
-// 	// Setting z-index requires setting a background as well
+> 1450px
-// 	z-index 10
+	.anime-actions
-
+		position absolute
-// > 1450px
+		bottom 0
-// 	.anime-actions
+		right content-padding
-// 		position absolute
-// 		top 0
-// 		right content-padding
 
 .anime-rating-categories
 	horizontal

pages/anime/character.scarlet

@@ -27,4 +27,5 @@
 
 .character-image
 	width 112px
-	height 175px
+	height 112px
+	border-radius 10%

pages/anime/characters.pixy

@@ -1,9 +1,11 @@
 component AnimeCharacters(anime *arn.Anime)
-	AnimeTabs(anime)
+	//- AnimeTabs(anime)
 
+	if len(anime.Characters().Items) > 0
+		.anime-section
 			h3.anime-section-name Characters
 			.characters
 				each character in anime.Characters().Items
-			if character.Character() != nil
+					if character.Role == "main" && character.Character() != nil
 						.mountable
 							Character(character.Character())

styles/include/config.scarlet

@@ -6,6 +6,7 @@ link-color = rgb(215, 38, 15)
 link-hover-color = rgb(242, 60, 30)
 link-active-color = link-hover-color
 pro-color = hsla(0, 100%, 73%, 0.87)
+anime-alternative-title-color = hsla(0, 0%, 0%, 0.5)
 
 theme-white = bg-color
 theme-black = text-color
@@ -29,8 +30,9 @@ input-focus-border-color = rgb(248, 165, 130)
 // Button
 button-hover-color = white
 button-hover-background = link-hover-color
-tab-hover-background = #225db5
+tab-active-color = white
-// tab-hover-background = rgb(46, 85, 160)
+tab-active-background = hsl(216, 68%, 42%)
+// tab-active-background = rgb(46, 85, 160)
 
 // Forum
 forum-width = 830px

styles/include/dark.scarlet

@@ -1,18 +1,26 @@
 // Dark theme
+
+// Main color
+hue = 45
+saturation = 100%
+
+// Derived colors
 text-color = hsl(0, 0%, 90%)
 bg-color = hsl(0, 0%, 24%)
-link-color = hsl(81, 100%, 56%)
+link-color = hsl(hue, saturation, 56%)
-link-hover-color = hsl(81, 100%, 66%)
+link-hover-color = hsl(hue, saturation, 66%)
 ui-background = hsla(0, 0%, 8%, 0.5)
 
 theme-white = bg-color
 theme-black = text-color
 
-link-hover-text-shadow = 0 0 8px hsla(81, 100%, 56%, 0.5)
+link-hover-text-shadow = 0 0 8px hsla(hue, saturation, 56%, 0.5)
 
 main-color = link-color
 link-active-color = link-hover-color
 button-hover-color = link-hover-color
 button-hover-background = hsla(0, 0%, 12%, 0.5)
-tab-hover-background = link-hover-color
+tab-active-color = bg-color
+tab-active-background = white
 loading-anim-color = link-color
+anime-alternative-title-color = hsla(0, 0%, 100%, 0.5)

styles/status-message.scarlet

@@ -22,4 +22,4 @@
 
 .info-message
 	color white
-	background tab-hover-background
+	background tab-active-background

styles/tabs.scarlet

@@ -14,7 +14,7 @@
 		transform none
 
 	&.active
-		background tab-hover-background
+		background tab-active-background
 		color theme-white
 
 	:first-child

styles/video.scarlet

@@ -1,9 +1,17 @@
-iframe
+// iframe
-	min-height 200px
+// 	min-height 200px
 
 .video-container
+	position relative
 	width 100%
+	height 0
+	padding-bottom 56.25%
+	border-radius ui-element-border-radius
+	overflow hidden
 
 .video
+	position absolute
 	width 100%
-	height 100vh
+	height 100%
+	left 0
+	top 0