Improved AMV design & layout

pages/amv/amv.pixy

@@ -1,17 +1,18 @@
 component AMVPage(amv *arn.AMV, user *arn.User)
 	AMVTabs(amv, user)
 	
-	.amv-page
+	.widget-form.amv-page
 		if amv.Title.String() == ""
-			h1.mountable untitled
+			h1.amv-page-title.mountable untitled
 		else
-			h1.mountable= amv.Title.ByUser(user)
+			h1.amv-page-title.mountable= amv.Title.ByUser(user)
 		
 		if amv.File != ""
 			AMV(amv, user)
 		
 		if amv.MainAnimeID != "" || len(amv.ExtraAnimeIDs) > 0
-			h3.mountable Anime
+			.widget
+				h3.widget-title.mountable Anime
 
 				if amv.MainAnimeID != ""
 					.amv-main-anime.mountable
@@ -22,12 +23,22 @@ component AMVPage(amv *arn.AMV, user *arn.User)
 						AnimeGridSmall(amv.ExtraAnime(), user)
 		
 		if len(amv.Links) > 0
-			//- h3.mountable Links
+			.widget
+				h3.widget-title.mountable Links
 
-			ul.amv-links
+				.light-button-group.amv-links
 					each link in amv.Links
-					li.amv-link.mountable
+						a.light-button.amv-link.mountable(href=link.URL)
-						a(href=link.URL)= link.Title
+							Icon("external-link")
+							span= link.Title
+		
+		if len(amv.Tags) > 0
+			.widget
+				h3.widget-title.mountable Tags
+
+				.tags.mountable
+					each tag in amv.Tags
+						.tag.mountable= tag
 
 component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
 	each anime in animes

pages/amv/amv.scarlet

@@ -13,14 +13,23 @@
 
 .amv-page
 	vertical
-	align-items center
+	align-items flex-start
+
+	.widget
+		justify-content flex-start
+		width 100%
+
+.amv-page-title
+	width 100%
+	text-align center
 
 .amv-main-anime
+	display flex
 	margin-bottom 1rem
 
 .amv-extra-anime
 	horizontal-wrap
-	justify-content center
+	justify-content left
 
 	a
 		display block
@@ -30,12 +39,10 @@
 		border-radius ui-element-border-radius
 
 .amv-links
-	margin-top 1rem
+	//
 
 .amv-link
-	list-style none
+	//
-	margin-left 0
-	text-align center
 
 > 500px
 	.amvs
@@ -44,5 +51,13 @@
 		margin-top 0
 
 	.amv
-		max-width 380px
+		max-width 200px
 		margin calc(content-padding / 2)
+
+	.amvs
+		.amv
+			max-width 520px
+
+	.amv-page
+		.amv
+			max-width 854px