Update matrix user

Fix <li> inside <a> so screenreader can parse nav

_data/metadata.js

@@ -38,7 +38,7 @@ export default {
 		},
 		{
 			title: "Matrix",
-			linkURL: "https://matrix.to/#/@nathanu:matrix.org",
+			linkURL: "https://matrix.to/#/@nathan:upchur.ch",
 			linkDisplay: "Matrix",
 			iconURL: "/img/matrix-org.svg"
 		},

_includes/nav.njk

@@ -2,14 +2,9 @@
 	<h2 class="visually-hidden">Top level navigation menu</h2>
 	<ul class="nav">
 	{%- for entry in collections.all | eleventyNavigation %}
-		<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}>
+		<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
-			<li>{{ entry.title }}</li>
-		</a>
 	{%- endfor %}
-		<a class="nav-item" href="/feed/feed.xml">
+		<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
-			<li class="subscribe">
-			{% include "rssLogo.njk" %}Feed
 		</li>
-		</a>
 	</ul>
 </nav>

public/css/index.css

@@ -492,13 +492,8 @@ nav ul {
 	width: var(--space-2xs);
 }
 .nav-item {
-	display: inline-block;
-	text-decoration: none;
-	border-top: var(--border-nav);
-}
-.nav-item li {
 	align-items: baseline;
-	color: var(--text-color);
+	border-top: var(--border-nav);
 	display: flex;
 	font-size: var(--step--2);
 	font-variation-settings: var(--font-variation-ui);
@@ -509,37 +504,33 @@ nav ul {
 	transition: var(--transition-normal);
 	letter-spacing: var(--ui-letter-spacing);
 }
-.nav-item:hover {
+.nav-item a {
-	border-top: var(--border-nav-hover);
+	color: var(--text-color);
+	margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
+	padding-top: var(--space-xs-s); /* Give <a> a larger click area */
 }
-/* Compensate for increased border thickness on hover of a.nav-item */
+.nav-item:hover {
-.nav-item:hover li {
+	border-top: var(--border-nav-hover); /* Increase border thickness */
-	margin-top: calc(var(--space-xs-s) * -1);
+}
+.nav-item:hover a {
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
 }
 .nav-item a[href]:visited {
 	color: var(--text-color);
 }
-.nav-item a[href]:hover {
+.nav-item:hover a[href] {
 	color: var(--text-color);
 	text-decoration: none;
-
 }
 .nav-item a[href]:not(:hover) {
-	color: var(--text-color);
 	text-decoration: none;
 }
 .nav-item[data-currentpage="true"] {
 	border-top: var(--border-nav-currentpage);
+}
+.nav-item[data-currentpage="true"] a, .nav-item[data-currentpage="true"] a[href]:visited, .nav-item[data-currentpage="true"]:hover a {
 	color: var(--contrast-color);
-}
+	margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
-.nav-item[data-currentpage="true"] li {
-	margin-top: calc(var(--space-xs-s) * -1);
-}
-.nav a[href][aria-current="page"] li {
-	color: var(--contrast-color);
-}
-.subscribe:hover {
-	color: var(--text-color);
 }
 
 /* Posts list */
@@ -568,9 +559,11 @@ nav ul {
 .post-image-container {
 	border-radius: var(--border-radius);
 	box-shadow: var(--box-shadow);
+	height: 15rem;
 	margin-left: calc(var(--space-l) * -1);
 	max-height: 15rem;
 	overflow: hidden;
+	width: 15rem;
 }
 
 .postlist-date,

public/css/webfonts/webfonts.css

@@ -1,16 +1,19 @@
 @font-face {
+	font-display: swap;
 	font-family: Manrope;
 	font-style: normal;
 	font-weight: 200 900;
 	src: url(/css/webfonts/Manrope[wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: normal;
 	font-weight: 100 900;
 	src: url(/css/webfonts/Fraunces[SOFT,WONK,opsz,wght].woff2) format("woff2");
 }
 @font-face {
+	font-display: swap;
 	font-family: Fraunces;
 	font-style: italic;
 	font-weight: 100 900;