New styles

pages/animelist/animelist.scarlet

@@ -19,9 +19,10 @@
 	padding 0
 
 .anime-list-item-image
-	width 27px
+	width 39px
 	height 39px
 	border-radius 2px
+	object-fit cover
 
 .anime-list-item-name
 	flex 1

pages/profile/profile.go

@@ -45,5 +45,23 @@ func Profile(ctx *aero.Context, viewUser *arn.User) string {
 		})
 	})
 
+	openGraph := &arn.OpenGraph{
+		Tags: map[string]string{
+			"og:title":         viewUser.Nick,
+			"og:image":         viewUser.LargeAvatar(),
+			"og:url":           "https://" + ctx.App.Config.Domain + viewUser.Link(),
+			"og:site_name":     "notify.moe",
+			"og:description":   viewUser.Tagline,
+			"og:type":          "profile",
+			"profile:username": viewUser.Nick,
+		},
+		Meta: map[string]string{
+			"description": viewUser.Tagline,
+			"keywords":    viewUser.Nick + ",profile",
+		},
+	}
+
+	ctx.Data = openGraph
+
 	return ctx.HTML(components.Profile(viewUser, user, animeList, threads, posts, tracks, ctx.URI()))
 }

pages/profile/profile.pixy

@@ -44,6 +44,11 @@ component ProfileHeader(viewUser *arn.User, user *arn.User, uri string)
 					Icon("rocket")
 					span= arn.Capitalize(viewUser.Role)
 		
+		//- .profile-actions
+		//- 	button.action(data-action="followUser", data-trigger="click")
+		//- 		Icon("user-plus")
+		//- 		span Follow
+	
 	ProfileNavigation(viewUser, uri)
 
 component ProfileNavigation(viewUser *arn.User, uri string)

pages/profile/profile.scarlet

@@ -1,7 +1,8 @@
 profile-boot-duration = 2s
 
 .profile
-	horizontal
+	vertical
+	align-items center
 
 	position relative
 	left calc(content-padding * -1)
@@ -18,23 +19,42 @@ profile-boot-duration = 2s
 	overflow hidden
 
 .profile-field
-	text-align left
+	text-align center
+	
 
 	a
 		color white
 
-< 740px
-	.profile
+.intro-container
 	vertical
 	align-items center
+	margin-top calc(content-padding * 1.5)
+
+.profile-actions
+	horizontal
+
+> 740px
+	.profile
+		horizontal
+		align-items flex-start
 	
 	.profile-field
-		text-align center
+		text-align left
 
 	.intro-container
-		align-items center
-		margin-top calc(content-padding * 1.5)
-		padding-left content-padding
+		align-items flex-start
+		margin-top 0
+		padding content-padding
+		padding-top 0
+		padding-left calc(content-padding * 2)
+		max-width 900px
+
+	.profile-actions
+		vertical
+		position absolute
+		top 0
+		right 0
+		padding content-padding
 
 // animation appear
 // 	0%
@@ -78,14 +98,6 @@ profile-boot-duration = 2s
 	border-radius 3px
 	overflow hidden
 
-.intro-container
-	vertical
-	align-items flex-start
-	padding content-padding
-	padding-top 0
-	padding-left calc(content-padding * 2)
-	max-width 900px
-
 #nick
 	margin-bottom 1rem
 

scripts/TouchController.ts

@@ -14,7 +14,7 @@ export class TouchController {
 		document.addEventListener("touchmove", evt => this.handleTouchMove(evt), false)
 
 		this.downSwipe = this.upSwipe = this.rightSwipe = this.leftSwipe = () => null
-		this.threshold = 5
+		this.threshold = 3
 	}
 
 	handleTouchStart(evt) {

styles/embedded.scarlet

@@ -19,5 +19,8 @@ remove-margin = 1.1rem
 	.anime-list-owner
 		display none
 
+	.anime-list-item-image
+		width 27px
+	
 	#navigation
 		font-size 0.9rem