Started working on custom tooltips

mixins/Avatar.pixy

@@ -2,7 +2,7 @@ component Avatar(user *arn.User)
 	CustomAvatar(user, user.Link(), user.Nick)
 
 component CustomAvatar(user *arn.User, link string, title string)
-	a.user(href=link, title=title)
+	a.user.tip(href=link, aria-label=title)
 		AvatarNoLink(user)
 
 component AvatarNoLink(user *arn.User)

pages/editlog/editlog.pixy

@@ -52,7 +52,7 @@ component EditLogScrollable(entries []*arn.EditLogEntry, user *arn.User)
 								RawIcon("minus-circle")
 
 			.edit-log-user
-				a.edit-log-user-link(href=entry.User().Link(), title=entry.User().Nick)
+				a.edit-log-user-link.tip(href=entry.User().Link(), aria-label=entry.User().Nick)
 					AvatarNoLink(entry.User())
 			
 			.edit-log-object

pages/editlog/editlog.scarlet

@@ -27,7 +27,6 @@
 	.user-image
 		width calc(avatar-size / 1.5)
 		height calc(avatar-size / 1.5)
-		margin-right 0.5rem
 
 .edit-log-user-link
 	horizontal

pages/profile/profile.pixy

@@ -7,7 +7,7 @@ component Profile(viewUser *arn.User, user *arn.User, animeList *arn.AnimeList,
 		.profile-watching-list.mountable
 			each item in animeList.Items
 				if item.Status == arn.AnimeListStatusWatching || item.Status == arn.AnimeListStatusCompleted
-					a.profile-watching-list-item(href=item.Anime().Link(), title=item.Anime().Title.ByUser(user) + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
+					a.profile-watching-list-item.tip(href=item.Anime().Link(), aria-label=item.Anime().Title.ByUser(user) + " (" + toString(item.Episodes) + " / " + arn.EpisodesToString(item.Anime().EpisodeCount) + ")")
 						img.profile-watching-list-item-image.lazy(data-src=item.Anime().ImageLink("small"), data-webp="true", data-color=item.Anime().AverageColor(), alt=item.Anime().Title.ByUser(user))
 
 	.footer

scripts/Actions/Theme.ts

@@ -76,7 +76,7 @@ export function lightTheme(arn: AnimeNotifier) {
 export function darkTheme(arn: AnimeNotifier) {
 	let root = document.documentElement
 
-	if(arn.user.dataset.pro !== "true") {
+	if(!arn.user || arn.user.dataset.pro !== "true") {
 		arn.statusMessage.showInfo("Previewing Dark theme for 30 seconds. If you would like to use it permanently, please support us.", 5000)
 
 		// After 30 seconds, switch back to default theme if the user doesn't own a PRO account

styles/tip.scarlet

@@ -0,0 +1,46 @@
+.tip
+	position relative
+
+	:before
+		content attr(aria-label)
+		position absolute
+		top 0
+		left 50%
+		z-index 100000
+		pointer-events none
+		opacity 0
+		transform translateX(-50%) translateY(-80%)
+		color text-color
+		text-shadow none
+		padding 0.2rem 0.7rem
+		background ui-background
+		border 1px solid ui-border-color
+		border-radius ui-element-border-radius
+		box-shadow shadow-light
+		white-space nowrap
+		default-transition
+
+	:after
+		content ""
+		position absolute
+		top 0
+		left 50%
+		z-index 100001
+		pointer-events none
+		opacity 0
+		width 0
+		height 0
+		border-style solid
+		border-width 8px 8px 0 8px
+		border-color ui-background transparent transparent transparent
+		transform translateX(-50%) translateY(-80%)
+		default-transition
+
+	:hover
+		:before
+			opacity 1
+			transform translateX(-50%) translateY(calc(-100% - 10px))
+
+		:after
+			opacity 1
+			transform translateX(-50%) translateY(calc(-100% - 4px))