From 9bde0f26da8567f63826e6b7d69190c7fb0a2209 Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Tue, 21 Jan 2025 22:10:30 +0100
Subject: accessibility

- More contrast on links and code on main-content
- Headings in content are links and styled instead of only the anchor
  chain at the end
- Author card uses a & p, instead of abusing heading tag, since it does
  no belong to content and evidences no hierarchy.
---
 assets/css/input.css                         |  4 ++--
 assets/css/tailwind.css                      |  4 ++--
 layouts/_default/_markup/render-heading.html |  2 +-
 layouts/partials/author_card.html            | 15 +++++++++------
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/assets/css/input.css b/assets/css/input.css
index b9875df..9f03d8d 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -112,10 +112,10 @@
     text-shadow: 2px 2px 3px black;
   }
   .main-content p code {
-    @apply text-blue-500 px-1;
+    @apply text-blue-700 px-1;
   }
   .main-content a {
-    @apply px-1 text-lime-500;
+    @apply px-1 text-green-700;
   }
   .main-content a[href^="http"]::after {
     content: "";
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 31dd5b3..f3738fb 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -885,14 +885,14 @@ h6 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
 }
 
 .main-content a {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
   --tw-text-opacity: 1;
-  color: rgb(132 204 22 / var(--tw-text-opacity, 1));
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
 }
 
 .main-content a[href^="http"]::after {
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 7d1e0ac..8d05760 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,7 +1,7 @@
 <!-- https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726/24 -->
 <h{{ .Level }} id="{{ .Anchor | safeURL }}"{{ with .Attributes.class }} class="{{ . }}"{{ end }}>
-    {{ .Text | safeHTML }}
     <a class="" href="#{{ .Anchor | safeURL }}">
+    {{ .Text | safeHTML }}
         <i class="fa fa-chain" aria-hidden="true"></i>
     </a>
 </h{{ .Level }}>
diff --git a/layouts/partials/author_card.html b/layouts/partials/author_card.html
index b23c3e7..10a6c06 100644
--- a/layouts/partials/author_card.html
+++ b/layouts/partials/author_card.html
@@ -5,14 +5,17 @@
     src="{{ .avatar }}"
     class="rounded-full w-16 mx-auto md:m-4"
     alt="{{ .name }}"
+    loading="lazy"
   />
   <div class="">
-    <h5 class="my-0 berkshire-swash">
-      <a href="{{ (default .path .homepage) }}" class="">
-        {{ .name }}
-      </a>
-    </h5>
-    <h6 class="font-light p-0 m-0">{{ .role | markdownify }}</h6>
+    <a
+      class="my-0 berkshire-swash text-xl font-bold my-4"
+      href="{{ (default .path .homepage) }}"
+      class=""
+    >
+      {{ .name }}
+    </a>
+    <p class="text-lg font-light p-0 m-0">{{ .role | markdownify }}</p>
     <p class="mt-3">
       {{ .bio }}
     </p>
-- 
cgit v1.2.3