M assets/css/style.css → assets/css/style.css

@@ -65,7 +65,7 @@ aside {
   border-color: var(--b_low);
 }
 
-.link-card {
+a.link-card {
   box-shadow: 4px 4px var(--b_med);
   border: 1px solid var(--b_med);
   border-radius: var(--border-radius);
@@ -75,18 +75,32 @@ margin: 1rem auto;
   display: block;
   text-decoration: none;
 }
-.link-card:hover {
+
+a.link-card:hover,
+a.link-card:focus {
   box-shadow: 4px 4px var(--b_high);
   border-color: var(--b_high);
+  outline: none;
 }
-.link-card:hover > h2 {
-  color: var(--b_high);
-}
-.link-card > h2 {
-  margin-top: 0;
+
+a.link-card > span {
+  padding: 0.2rem;
+  color: var(--f_med);
+  display: inline-block;
   margin-bottom: 1rem;
+  font-size: 1rem;
+  font-family: monospace;
+  font-weight: bold;
 }
-.link-card > img {
+
+a.link-card:hover > span,
+a.link-card:focus > span {
+  color: var(--background);
+  background: var(--b_high);  
+  border-radius: var(--border-radius);
+}
+
+a.link-card > img {
   object-fit: cover;
   object-position: center;
   width: 100%;

M templates/child-links.html → templates/child-links.html

@@ -1,7 +1,7 @@
 {{ define "child-links" }}
 {{ range . }}
 <a class="link-card" href="{{ .Path }}">
-    <h2>{{ .Title }}</h2>
+    <span>{{ .Title }}</span>
     <img src="{{ .Image }}">
 </a>
 {{ end }}