From 0d221183a5e3b76d691113e0e0a7745fa2400884 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 5 Nov 2023 11:44:56 +0000
Subject: [PATCH] underlined content links

---
 src/components/RelatedPosts/index.module.css |  5 +++++
 src/layouts/Post/Action.astro                |  9 +++++----
 src/layouts/Post/Actions.astro               |  2 +-
 src/layouts/Post/Meta.module.css             |  8 ++++++++
 src/layouts/Post/index.astro                 |  2 +-
 src/layouts/Post/index.module.css            | 12 ++++++++----
 src/styles/_buttons.css                      |  7 ++++++-
 src/styles/_variables.css                    |  5 ++++-
 src/styles/global.css                        |  4 +++-
 9 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/RelatedPosts/index.module.css b/src/components/RelatedPosts/index.module.css
index 3b245678..0e3efe08 100644
--- a/src/components/RelatedPosts/index.module.css
+++ b/src/components/RelatedPosts/index.module.css
@@ -2,6 +2,7 @@
   font-size: var(--font-size-h3);
   margin-bottom: var(--spacer);
   color: var(--text-color-light);
+  text-decoration: none;
 }
 
 .relatedPosts ul {
@@ -31,6 +32,10 @@
   display: none;
 }
 
+.relatedPosts a {
+  text-decoration: none;
+}
+
 .relatedPosts a > div {
   margin-bottom: 0;
 }
diff --git a/src/layouts/Post/Action.astro b/src/layouts/Post/Action.astro
index 6f7da4d1..2c79be55 100644
--- a/src/layouts/Post/Action.astro
+++ b/src/layouts/Post/Action.astro
@@ -32,12 +32,13 @@ const Icon = icon
       calc(var(--spacer) * 1.5);
     position: relative;
     text-align: left;
+    text-decoration: none;
   }
 
-  .action:hover,
-  .action:focus {
-    cursor: pointer;
-    color: var(--text-color-light);
+  .action:hover .actionTitle,
+  .action:focus .actionTitle {
+    color: var(--link-color-hover);
+    text-decoration: underline;
   }
 
   .action svg {
diff --git a/src/layouts/Post/Actions.astro b/src/layouts/Post/Actions.astro
index 445e43bb..263f2fba 100644
--- a/src/layouts/Post/Actions.astro
+++ b/src/layouts/Post/Actions.astro
@@ -20,7 +20,7 @@ const actions = [
   {
     title: 'Found something useful?',
     text: 'Say thanks with BTC or ETH',
-    url: '/thanks',
+    url: '/thanks/',
     icon: Bitcoin
   },
   {
diff --git a/src/layouts/Post/Meta.module.css b/src/layouts/Post/Meta.module.css
index 097270b1..39fd5cd7 100644
--- a/src/layouts/Post/Meta.module.css
+++ b/src/layouts/Post/Meta.module.css
@@ -5,6 +5,10 @@
   text-align: center;
 }
 
+.entryMeta a {
+  text-decoration: none;
+}
+
 .byline {
   margin-bottom: 0;
   font-style: italic;
@@ -43,6 +47,10 @@
   color: #fff;
 }
 
+.entryMeta a:hover {
+  text-decoration: underline;
+}
+
 .tags {
   margin-top: calc(var(--spacer) / 2);
 }
diff --git a/src/layouts/Post/index.astro b/src/layouts/Post/index.astro
index 22a37c71..ea5267e1 100644
--- a/src/layouts/Post/index.astro
+++ b/src/layouts/Post/index.astro
@@ -8,7 +8,7 @@ import Meta from './Meta.astro'
 import Picture from '@components/Picture/index.astro'
 import Toc from '@components/Toc.astro'
 import Exif from '@components/Exif/index.astro'
-import type { Exif as ExifType } from '@lib/exif/types'
+import type { Exif as ExifType } from '@lib/exif'
 import Changelog from '@components/Changelog/index.astro'
 import RelatedPosts from '@components/RelatedPosts/index.astro'
 import LinkActions from './LinkActions.astro'
diff --git a/src/layouts/Post/index.module.css b/src/layouts/Post/index.module.css
index 1724d1f0..0a87e767 100644
--- a/src/layouts/Post/index.module.css
+++ b/src/layouts/Post/index.module.css
@@ -2,12 +2,16 @@
   padding-bottom: var(--spacer);
 }
 
-.entry > a {
-  display: block;
+.entry a {
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+  text-decoration-color: var(--link-underline-color);
 }
 
-.entry p:only-child {
-  margin-bottom: 0;
+.entry a:hover,
+.entry a:focus {
+  color: var(--link-color-hover);
+  text-decoration-color: var(--link-color-hover);
 }
 
 .entry hr {
diff --git a/src/styles/_buttons.css b/src/styles/_buttons.css
index 86319875..dbd9bf87 100644
--- a/src/styles/_buttons.css
+++ b/src/styles/_buttons.css
@@ -18,6 +18,7 @@ a.btn {
   font-weight: var(--font-weight-headings);
   color: var(--text-color);
   text-transform: uppercase;
+  text-decoration: none;
   box-shadow: var(--box-shadow);
 }
 
@@ -74,7 +75,10 @@ a.btn-primary {
 }
 
 .btn-primary:hover,
-.btn-primary:focus {
+.btn-primary:focus,
+article a.btn-primary:hover,
+article a.btn-primary:focus {
+  color: #161a1b;
   background: var(--link-color-hover);
   text-shadow: 0 1px 0 rgba(255 255 255 / 30%);
 }
@@ -126,6 +130,7 @@ a.btn-primary {
 
 .content-download .btn {
   margin-bottom: calc(var(--spacer) / 2);
+  text-decoration: none;
 }
 
 .content-download .btn:first-child {
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 6e910e79..1fc75b0c 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -5,7 +5,7 @@
   ///////////////////////////////////// */
 
   --brand-main: #015565;
-  --brand-cyan: #43a699;
+  --brand-cyan: rgb(67 166 153);
   --brand-main-light: #88bec8;
   --brand-light: #e7eef4;
 
@@ -34,8 +34,11 @@
   --text-color-light: var(--brand-grey-light);
   --text-color-dimmed: var(--brand-grey-dimmed);
   --color-headings: var(--brand-main);
+
   --link-color: var(--brand-cyan);
   --link-color-hover: #4ab8a9;
+  --link-underline-color: rgba(67 166 153 / 35%);
+
   --border-color: var(--brand-grey-dimmed);
 
   /* Base Typography
diff --git a/src/styles/global.css b/src/styles/global.css
index 19b49edf..ccd8bb46 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -73,14 +73,16 @@ button:active {
 ///////////////////////////////////// */
 
 a {
-  color: var(--brand-cyan);
+  color: var(--link-color);
   text-decoration: none;
   transition: 0.2s ease-out;
 }
 
 a:hover,
 a:focus {
+  color: var(--link-color-hover);
   text-decoration: underline;
+  text-decoration-color: var(--link-color);
 }
 
 /* Headings