Better link styling

3 files changed, 33 insertions, 9 deletions

diff --git a/public/css/modules/btn.css b/public/css/modules/btn.css
index a928efe..732005b 100644
--- a/public/css/modules/btn.css
+++ b/public/css/modules/btn.css
@@ -15,6 +15,8 @@
 }
 
 .btn:hover {
+  color: var(--text-highlight-color);
+  border-color: var(--background-highlight-color);
   background-color: var(--background-highlight-color);
   text-decoration-color: transparent;
 }
diff --git a/public/css/modules/link.css b/public/css/modules/link.css
index 005c82e..d3b9307 100644
--- a/public/css/modules/link.css
+++ b/public/css/modules/link.css
@@ -1,25 +1,41 @@
 .link {
   color: var(--special-text-color);
-  text-decoration: underline;
+  text-decoration-line: underline;
   text-decoration-color: var(--special-text-color);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
   border: dotted transparent 2px;
   border-radius: 0.375rem;
   transition:
-    text-decoration-color 300ms,
-    color 300ms,
-    border-color 300ms,
-    font-weight 300ms;
+    color 100ms,
+    text-decoration-color 100ms,
+    text-decoration-thickness 100ms,
+    text-underline-offset 100ms,
+    border-color 100ms,
+    font-weight 100ms,
+    font-size 300ms;
 }
 
-.link:hover, .group-hover:hover .link {
-  text-decoration-color: transparent;
+.link:hover, .group-hover:hover .link, .link:focus, .link:active {
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 8px;
+  text-underline-offset: 4px;
+  font-weight: 700;
+  transition:
+    color 300ms,
+    text-decoration-color 300ms,
+    text-decoration-thickness 300ms,
+    text-underline-offset 300ms,
+    border-color 300ms,
+    font-weight 300ms,
+    font-size 300ms;
 }
 
 .link:focus {
+  box-shadow: none;
   border-color: var(--special-text-color);
 }
 
 .link:active {
-  font-weight: 700;
-  color: var(--special-text-highlight-color);
+  font-size: larger;
 }
\ No newline at end of file
diff --git a/public/css/modules/news-index.css b/public/css/modules/news-index.css
index 891f0de..b77e383 100644
--- a/public/css/modules/news-index.css
+++ b/public/css/modules/news-index.css
@@ -12,6 +12,12 @@
 }
 
 .news-index__item:hover {
+  color: var(--text-highlight-color);
+  border-color: var(--background-highlight-color);
   background: var(--background-highlight-color);
   transition-duration: 300ms;
 }
+
+.news-index__item:hover .link {
+  color: var(--special-text-highlight-color);
+}
\ No newline at end of file