Indieweb: add u-photo and h-entry where relevant

Inspired by the h-entry implementation on Charlie Owen's personal
website: https://whalecoiner.com

The u-photo re-uses the 32px favicon that the browser has already
cached, so it shouldn't bloat up the page anymore.

These changes required a bit of additional CSS. I snuck in come color
changes too.

.hintrc

@@ -15,7 +15,14 @@
 	"hints": {
 		"apple-touch-icons": "off",
 		"axe/other": "error",
-		"compat-api/css": "error",
+		"compat-api/css": [
+			"error",
+			{
+				"ignore": [
+					"filter"
+				]
+			}
+		],
 		"compat-api/html": [
 			"error",
 			{

content/_index.md

@@ -11,8 +11,8 @@ Seirdy
 ======
 
 It me! This is the personal website for
-<a class="p-author u-url" href="https://seirdy.one" rel="home"><span class="p-given-name">Rohan</span>
-<span class="p-family-name">Kumar</span></a>, a.k.a. Seirdy (online handle).
+<a class="p-author u-url" href="https://seirdy.one" rel="home">{{% indieweb-icon %}}<span class="p-given-name">Rohan</span>
+<span class="p-family-name">Kumar</span></a>, a.k.a. <span class="p-nickname">Seirdy</span> (online handle).
 
 Other versions of this website
 ------------------------------

layouts/partials/indieweb-author.html

@@ -0,0 +1 @@
+../shortcodes/indieweb-author.html

layouts/partials/indieweb-icon.html

@@ -0,0 +1 @@
+../shortcodes/indieweb-icon.html

layouts/shortcodes/indieweb-author.html

@@ -0,0 +1,4 @@
+<!-- re-using the indefinetly-cached favicon to avoid bloating page size -->
+{{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
+<a itemprop="author" class="p-author h-card" href="https://seirdy.one" rel="author"><img class="u-photo" src="{{ $favicon.RelPermalink }}" width="1em" height="1em" type="image/png" alt="Rohan Kumar" > <span class="p-given-name">Rohan</span>
+<span class="p-family-name">Kumar</span></a>

layouts/shortcodes/indieweb-icon.html

@@ -0,0 +1,3 @@
+<!-- re-using the indefinetly-cached favicon to avoid bloating page size -->
+{{ $favicon := resources.Get "/favicon.png" | resources.Fingerprint "md5" -}}
+<img class="u-photo" src="{{ $favicon.RelPermalink }}" width="1em" height="1em" type="image/png" alt="Rohan Kumar">

themes/etch-custom/assets/css/dark.css

@@ -4,12 +4,18 @@
 		color: #fff;
 	}
 
+	/* IndieWeb u-photo should be distinct from the background */
+	.u-photo {
+		-webkit-filter: invert(100%);
+		filter: invert(100%);
+	}
+
 	a {
-		color: #0af;
+		color: #4af;
 	}
 
 	a:visited {
-		color: #d7c;
+		color: #d7f;
 	}
 
 	a:active {

themes/etch-custom/assets/css/main.css

@@ -67,16 +67,23 @@ nav li {
 h1,
 h2,
 h3 {
-	line-height: 1.25em;
+	line-height: 1.75rem;
 }
 
-img {
+img:not(.u-photo) {
 	display: block;
 	height: auto;
 	margin: auto;
 	max-width: 100%;
 }
 
+.u-photo {
+	display: inline-block;
+	height: 1em;
+	vertical-align: -0.1em;
+	width: 1em;
+}
+
 pre,
 code {
 	border: 1px solid #bbb;

themes/etch-custom/layouts/_default/single.html

@@ -5,10 +5,10 @@
 			<h1 itemprop="name headline" class="p-name">{{ .Title }}</h1>
 			{{ $lastmod := .Lastmod -}}
 			{{ if lt .Date $lastmod -}}
-			Originally posted <a class="u-url" href="https://seirdy.one{{ .RelPermalink }}"><time class="dt-published" itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time></a> by <a itemprop="author" class="p-author h-card" href="https://seirdy.one" rel="author">{{ .Site.Author.name }}</a>.<br>
+			Originally posted <a class="u-url" href="https://seirdy.one{{ .RelPermalink }}"><time class="dt-published" itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time></a> by {{- partial "indieweb-author.html" -}}.<br>
 			Last updated <time itemprop="dateModified" class="dt-updated" datetime="{{ $lastmod.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Lastmod.Format "2006-01-02" }}</time>. <a href="{{ .Site.Params.logUrlPrefix }}content/{{ .File.Path }}">Changelog</a>
 			{{ else -}}
-			Posted <a class="u-url" href="https://seirdy.one{{ .RelPermalink }}"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time></a>.
+			Posted <a class="u-url" href="https://seirdy.one{{ .RelPermalink }}"><time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time></a> by {{- partial "indieweb-author.html" -}}.
 			{{ end }}
 		</header>
 		<section class="e-content" itemprop="articlebody">

themes/etch-custom/layouts/partials/header.html

@@ -2,7 +2,7 @@
 	<nav>
 		<ul>
 			<li class="home">
-				<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+				<a rel="home" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
 			</li>
 			{{ range .Site.Menus.main.ByWeight -}}
 			<li>