underlined content links

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;
 }

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:hover .actionTitle,
-  .action:focus {
+  .action:focus .actionTitle {
-    cursor: pointer;
+    color: var(--link-color-hover);
-    color: var(--text-color-light);
+    text-decoration: underline;
   }
 
   .action svg {

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
   },
   {

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);
 }

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'

src/layouts/Post/index.module.css

@@ -2,12 +2,16 @@
   padding-bottom: var(--spacer);
 }
 
-.entry > a {
+.entry a {
-  display: block;
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+  text-decoration-color: var(--link-underline-color);
 }
 
-.entry p:only-child {
+.entry a:hover,
-  margin-bottom: 0;
+.entry a:focus {
+  color: var(--link-color-hover);
+  text-decoration-color: var(--link-color-hover);
 }
 
 .entry hr {

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 {

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

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