Add tooltips to more places

mixins/AnimeList.pixy

@@ -24,7 +24,7 @@ component AnimeListScrollable(animeListItems []*arn.AnimeListItem, viewUser *arn
 					//- else
 					if item.Anime().EpisodeByNumber(item.Episodes + 1) != nil
 						for _, link := range item.Anime().EpisodeByNumber(item.Episodes + 1).Links
-							a(href=link, title="Watch episode " + toString(item.Episodes + 1) + " on twist.moe", target="_blank", rel="noopener")
+							a.tip(href=link, aria-label="Watch episode " + toString(item.Episodes + 1), target="_blank", rel="noopener")
 								RawIcon("eye")
 
 			.anime-list-item-airing-date

pages/amv/amv.pixy

@@ -42,7 +42,7 @@ component AMVPage(amv *arn.AMV, user *arn.User)
 
 component AnimeGridSmall(animes []*arn.Anime, user *arn.User)
 	each anime in animes
-		a.mountable(href=anime.Link(), title=anime.Title.ByUser(user))
+		a.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user))
 			img.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
 
 component AMVTabs(amv *arn.AMV, user *arn.User)

pages/character/character.pixy

@@ -37,7 +37,7 @@ component CharacterDetails(character *arn.Character, characterAnime []*arn.Anime
 
 					.character-anime.mountable
 						each anime in characterAnime
-							a.character-anime-item.mountable(href=anime.Link(), title=anime.Title.ByUser(user), data-mountable-type="anime")
+							a.character-anime-item.tip.mountable(href=anime.Link(), aria-label=anime.Title.ByUser(user), data-mountable-type="anime")
 								img.character-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
 					
 					if len(quotes) > 0 && (len(quotes) > 1 || mainQuote != quotes[0])

pages/companies/popular.pixy

@@ -22,6 +22,6 @@ component PopularCompaniesScrollable(companies []*arn.Company, companyToAnime ma
 			.popular-company-footer
 				.company-anime
 					each anime in utils.MaxAnime(companyToAnime[company.ID], 12)
-						CompanyAnime(anime, user)
+						CompanyAnimeNoTip(anime, user)
 			
 			//- span= " (" + strconv.Itoa(popularity[company.ID]) + ")"

pages/company/company.pixy

@@ -56,6 +56,10 @@ component CompanyAnimes(label string, animes []*arn.Anime, user *arn.User)
 				CompanyAnime(anime, user)
 
 component CompanyAnime(anime *arn.Anime, user *arn.User)
+	a.company-anime-item.tip(href=anime.Link(), aria-label=anime.Title.ByUser(user))
+		img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
+
+component CompanyAnimeNoTip(anime *arn.Anime, user *arn.User)
 	a.company-anime-item(href=anime.Link(), title=anime.Title.ByUser(user))
 		img.company-anime-item-image.lazy(data-src=anime.ImageLink("small"), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.ByUser(user))
 

pages/users/users.scarlet

@@ -12,7 +12,8 @@
 
 	.profile-image-container
 		flex-basis 170px
-		height 140px
+		flex-grow 0
+		height 230px
 		margin calc(content-padding / 2)
 		position relative
 		border ui-border

styles/tip.scarlet

@@ -1,4 +1,6 @@
 const tip-opacity = 0.94
+const tip-transform-hidden = rotate(0.02deg) translateX(-50%) translateY(-80%)
+const tip-transform-visible = rotate(0.02deg) translateX(-50%) translateY(-100%)
 
 .tip
 	position relative
@@ -6,12 +8,12 @@ const tip-opacity = 0.94
 	:before
 		content attr(aria-label)
 		position absolute
-		top 0
+		top -10px
 		left 50%
 		z-index 100000
 		pointer-events none
 		opacity 0
-		transform translateX(-50%) translateY(-80%)
+		transform tip-transform-hidden
 		color text-color
 		text-shadow none
 		padding 0.2rem 0.7rem
@@ -25,7 +27,7 @@ const tip-opacity = 0.94
 	:after
 		content ""
 		position absolute
-		top 0
+		top -4px
 		left 50%
 		z-index 100001
 		pointer-events none
@@ -35,14 +37,14 @@ const tip-opacity = 0.94
 		border-style solid
 		border-width 8px 8px 0 8px
 		border-color ui-background transparent transparent transparent
-		transform translateX(-50%) translateY(-80%)
+		transform tip-transform-hidden
 		default-transition
 
 	:hover
 		:before
 			opacity tip-opacity
-			transform translateX(-50%) translateY(calc(-100% - 10px))
+			transform tip-transform-visible
 
 		:after
 			opacity tip-opacity
-			transform translateX(-50%) translateY(calc(-100% - 4px))
+			transform tip-transform-visible