From 51c2d9da5c11c4328fd935e89789bac6fb7e5955 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Mon, 21 Aug 2023 07:41:43 +0100
Subject: Better link styling

---
 public/css/modules/btn.css             |  2 ++
 public/css/modules/link.css            | 34 +++++++++++++++++++++++++---------
 public/css/modules/news-index.css      |  6 ++++++
 public/css/variables/colours.css       | 33 ++++++++++++++-------------------
 public/css/variables/palette-hex.css   | 23 -----------------------
 public/css/variables/palette-oklch.css | 23 -----------------------
 6 files changed, 47 insertions(+), 74 deletions(-)
 delete mode 100644 public/css/variables/palette-hex.css
 delete mode 100644 public/css/variables/palette-oklch.css

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
diff --git a/public/css/variables/colours.css b/public/css/variables/colours.css
index c045cb3..5c34e42 100644
--- a/public/css/variables/colours.css
+++ b/public/css/variables/colours.css
@@ -1,28 +1,23 @@
-@import 'palette-hex.css';
-@import 'palette-oklch.css' supports(color: oklch(55% 0.15 290));
+@import 'palette.css';
 
 :root {
-  --text-color: var(--color-primary-50);
-  --text-highlight-color: var(--color-primary-100);
-  --background-color: var(--color-primary-800);
-  --background-highlight-color: var(--color-primary-700);
-  --special-text-color: var(--color-secondary-200);
-  --special-text-highlight-color: var(--color-secondary-300);
-  --special-background-color: var(--color-secondary-900);
-  --special-background-highlight-color: var(--color-secondary-800);
+  --text-color: var(--color-primary-98);
+  --text-highlight-color: var(--color-primary-10);
+  --background-color: var(--color-primary-10);
+  --background-highlight-color: var(--color-primary-90);
+  --special-text-color: var(--color-secondary-90);
+  --special-text-highlight-color: var(--color-secondary-10);
 }
 
 :is(main, article) {
-  --text-color: var(--color-primary-900);
-  --text-highlight-color: var(--color-primary-800);
-  --background-color: var(--color-primary-50);
-  --background-highlight-color: var(--color-primary-200);
-  --special-text-color: var(--color-secondary-700);
-  --special-text-highlight-color: var(--color-secondary-600);
-  --special-background-color: var(--color-secondary-50);
-  --special-background-highlight-color: var(--color-secondary-100);
+  --text-color: var(--color-primary-10);
+  --text-highlight-color: var(--color-primary-90);
+  --background-color: var(--color-primary-98);
+  --background-highlight-color: var(--color-primary-10);
+  --special-text-color: var(--color-secondary-40);
+  --special-text-highlight-color: var(--color-secondary-90);
 }
 
 :is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
-    --background-color: var(--color-primary-100);
+    --background-color: var(--color-primary-95);
 }
\ No newline at end of file
diff --git a/public/css/variables/palette-hex.css b/public/css/variables/palette-hex.css
deleted file mode 100644
index 13a9d7c..0000000
--- a/public/css/variables/palette-hex.css
+++ /dev/null
@@ -1,23 +0,0 @@
-:root {
-  --color-primary-50: #eeecff;
-  --color-primary-100: #cec5ff;
-  --color-primary-200: #b19cff;
-  --color-primary-300: #937be3;
-  --color-primary-400: #765cc1;
-  --color-primary-500: #5a3ea1;
-  --color-primary-600: #401f81;
-  --color-primary-700: #28005c;
-  --color-primary-800: #0f002a;
-  --color-primary-900: #010003;
-
-  --color-secondary-50: #bcffee;
-  --color-secondary-100: #2bedce;
-  --color-secondary-200: #2ac8ae;
-  --color-secondary-300: #28a58f;
-  --color-secondary-400: #068472;
-  --color-secondary-500: #0a6355;
-  --color-secondary-600: #09453a;
-  --color-secondary-700: #062822;
-  --color-secondary-800: #030e0b;
-  --color-secondary-900: #000101;
-}
\ No newline at end of file
diff --git a/public/css/variables/palette-oklch.css b/public/css/variables/palette-oklch.css
deleted file mode 100644
index f549b63..0000000
--- a/public/css/variables/palette-oklch.css
+++ /dev/null
@@ -1,23 +0,0 @@
-:root {
-  --color-primary-50: oklch(95% 0.02 290);
-  --color-primary-100: oklch(85% 0.07 290);
-  --color-primary-200: oklch(75% 0.13 290);
-  --color-primary-300: oklch(65% 0.15 290);
-  --color-primary-400: oklch(55% 0.15 290);
-  --color-primary-500: oklch(45% 0.15 290);
-  --color-primary-600: oklch(35% 0.15 290);
-  --color-primary-700: oklch(25% 0.14 290);
-  --color-primary-800: oklch(15% 0.08 290);
-  --color-primary-900: oklch(5% 0.02 290);
-
-  --color-secondary-50: oklch(95% 0.07 178.02852951497042);
-  --color-secondary-100: oklch(85% 0.15 178.02852951497042);
-  --color-secondary-200: oklch(75% 0.13 178.02852951497042);
-  --color-secondary-300: oklch(65% 0.11 178.02852951497042);
-  --color-secondary-400: oklch(55% 0.1 178.02852951497042);
-  --color-secondary-500: oklch(45% 0.08 178.02852951497042);
-  --color-secondary-600: oklch(35% 0.06 178.02852951497042);
-  --color-secondary-700: oklch(25% 0.04 178.02852951497042);
-  --color-secondary-800: oklch(15% 0.02 178.02852951497042);
-  --color-secondary-900: oklch(6% 0.01 178.02852951497042);
-}
\ No newline at end of file
-- 
cgit v1.2.3