Refactor tags and add new styles

css/site.css

@@ -0,0 +1,56 @@
+blog-post[hidden] {
+	display: none;
+}
+
+blog-post {
+	display: block;
+}
+
+blog-post + blog-post {
+	margin-top: 2em;
+}
+
+@layer post-tags {
+	post-tag > a {
+		position: relative;
+		text-decoration: none;
+		color: inherit;
+		padding: .2em;
+		padding-left: 1.2em;
+		transition: all .3s;
+	}
+
+	post-tag > a::before, post-tag > a::after {
+		z-index: -1;
+		display: block;
+		content: '';
+		border-radius: .2em;
+		top: .4em;
+		left: .2em;
+		width: .6em;
+		height: .6em;
+		position: absolute;
+		background: var(--color);
+		transition: all .3s;
+	}
+
+	post-tag > a:hover {
+		color: white;
+	}
+
+	post-tag > a:hover::before {
+		display: block;
+		content: '';
+		border-radius: .2em;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		background: var(--color);
+	}
+
+	post-tag > a:hover::after {
+		background: color-mix(in srgb, var(--color) 60%, white);
+	}
+}

lib/tags.lua

@@ -0,0 +1,24 @@
+local html = require 'skooma.html'
+local rgbstr = require 'rgbstr'
+
+local function tag(name)
+	local colour = { rgbstr.bytes(name, 16, .3, .5) }
+	return html.postTag(html.a {
+		name;
+		href = "/?tag="..name;
+		style = "--color: rgb("..table.concat(colour, ', ')..")";
+	})
+end
+
+return function(tags)
+	if tags then
+		local list = { gap=".4", style="justify-content: flex-start" }
+		for _, name in ipairs(tags) do
+			table.insert(list, tag(name))
+		end
+		return {
+			html.flexRow(list);
+			html.verticalSpacer();
+		}
+	end
+end

pages/index.html.skooma.yue

@@ -1,21 +1,11 @@
 slots, json = select 1, ...
 posts = require 'posts'
-rgbstr = require 'rgbstr'
+tags = require 'tags'
-
-tag = (name) ->
-	colour = { rgbstr.bytes name, 16, .6 }
-	postTag a name, href: "/?tag=#{name}", style: "--color: rgb(#{table.concat(colour, ', ')})"
-
-tags ==>
-	if @tags
-		return
-			* flexRow [tag name for name in *@tags], gap: 1, style: 'justify-content: flex-start'
-			* verticalSpacer
 
 post = =>
 	flexColumn
 		* h2 a(@head.title, href: @head.uri), style: "view-transition-name: #{@head.slug}"
-		* tags(@head)
+		* tags(@head.tags)
 		* time is: 'local-date', datetime: @head.date, @head.date
 		* @head.description
 
@@ -23,7 +13,6 @@ slots.head title "Index"
 slots.head script type: 'module', src: "/javascript/LocalDate.js"
 slots.head script type: 'module', src: "/javascript/BlogPost.js"
 
-
 return main
 	* h1 "Blog Posts"
 	* [blogPost post p for p in *posts]

templates/main.html.skooma.yue

@@ -27,6 +27,7 @@ html
 		* meta name: "viewport", content: "width=device-width"
 		* css 'https://darkwiiplayer.github.io/css/all.css'
 		* css 'https://darkwiiplayer.github.io/css/schemes/talia.css'
+		* css "/css/site.css"
 		* style styles
 		* slots.head
 		* [ link rel: "modulepreload", href: module.url for module in *config.modules when module.preload ]

templates/post.html.skooma.yue

@@ -1,4 +1,4 @@
-rgbstr = require 'rgbstr'
+tags = require 'tags'
 import output from require 'params'
 slots, post = select 1, ...
 
@@ -48,20 +48,10 @@ slots.banner aside class: { 'box' }
 	]]
 	* p i "Thank you."
 
-tag = (name) ->
-	colour = { rgbstr.bytes name, 16, .6 }
-	a name, href: "/?tag=#{name}", style: "--color: rgb(#{table.concat(colour, ', ')})"
-
-tags ==>
-	if @tags
-		return
-			* flexRow [tag name for name in *@tags], gap: 1, style: 'justify-content: flex-start'
-			* verticalSpacer
-
 return (=>@)
 	* article
 		* slots.title
-		* tags(post.head)
+		* tags(post.head.tags)
 		* nav { class: "breadcrumbs" }
 			* ul
 				* li a "Blog", href: url "/"