summaryrefslogtreecommitdiff
path: root/public/css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css')
-rw-r--r--public/css/modules/btn.css2
-rw-r--r--public/css/modules/link.css34
-rw-r--r--public/css/modules/news-index.css6
-rw-r--r--public/css/variables/colours.css33
-rw-r--r--public/css/variables/palette-hex.css23
-rw-r--r--public/css/variables/palette-oklch.css23
6 files changed, 47 insertions, 74 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
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