Make author names on works link to author page

src/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"dependencies": {
-		"api.fluff4.me": "^1.0.160",
+		"api.fluff4.me": "^1.0.161",
 		"prosemirror-example-setup": "1.2.3",
 		"prosemirror-markdown": "1.13.1",
 		"prosemirror-state": "1.4.3",

src/ui/component/Work.ts

@@ -32,7 +32,7 @@ const Work = Component.Builder(async (component, work: WorkData, author?: Author
 		block.description
 			.style("work-author-list")
 			.style.bind(isFlush, "work-author-list--flush")
-			.append(Component()
+			.append(Link(`/author/${author.vanity}`)
 				.style("work-author")
 				.text.set(author.name))
 

style/component/chapter.chiri

@@ -4,6 +4,7 @@
 		%grid
 		grid-template-columns: auto 1fr auto auto
 
+	#after: .link
 	%grid
 	%columns-subgrid
 	%padding-1-4
@@ -12,6 +13,7 @@
 	%cursor-pointer
 	%decoration-none
 	%colour-inherit
+	%weight-inherit
 	#transition: #{transition("background")}
 
 	::hover, ::focus:

style/component/core/link.chiri

@@ -1 +1,11 @@
 .link:
+	%weight-bold
+	%colour-blue
+	text-decoration-color: transparent
+	#transition: #{transition("color")}, #{transition("text-decoration-color")}
+
+	::hover, ::focus:
+		%decoration-underline
+		%colour-0
+		text-decoration-color: $colour-0
+		$transition-duration: $transition-focus

style/component/work.chiri

@@ -37,7 +37,10 @@
 	&-timestamp:
 
 	&--link:
+		#after: .link
 		%decoration-none
+		%colour-inherit
+		%weight-inherit
 		%overflow-hidden
 		#transition: #{transition("background")}
 

style/var/colour.chiri

@@ -1,6 +1,12 @@
-$colour-blue: #69b3e2
-$colour-blue-saturated: #0173ba
-$colour-pink: #d94e8f
+#do:
+	#record!string colours = {
+		blue: "#69b3e2
+		blue-saturated: "#0173ba
+		pink: "#d94e8f
+
+	#each colours as var name, var colour:
+		$colour-#{name}: #{colour}
+		%colour-#{name}: colour: $colour-#{name}
 
 #for var i = 1, i < 100, set i++:
 	%background-light-a#{i}: background: color-mix(in lch, $light-0, transparent #{100 - i}%)