From 152124c8ff32ee259129dbf4a7d23ae01204a0c2 Mon Sep 17 00:00:00 2001
From: Martin Heidegger <martin.heidegger@gmail.com>
Date: Mon, 19 Jun 2023 00:40:48 +0900
Subject: [PATCH] defining colors on oklch

---
 assets/style.css          | 22 +++++++++++++++-------
 components/SiteHeader.vue |  2 ++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index ae6b9e9..f36e47f 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -40,16 +40,24 @@
 }
 
 :root {
-	--color-osaka: hsla(359, 85%, 53%, 1);
-	--color-kyoto: hsla(284, 61%, 26%, 1);
+  --color-osaka: #ed2225;
+	--color-osaka: oklch(60.53% 0.232 27.25);
+	--color-kyoto: #551A6B;
+  --color-kyoto: oklch(35.19% 0.139 315.11);
 	--color-white: #fff;
-	--color-black: hsla(0, 0%, 0%, 1);
-	--color-blue: hsla(230, 100%, 61%, 1);
+  --color-white: oklch(100% 0 0);
+	--color-black: #000;
+  --color-black: oklch(0% 0 0);
+	--color-blue: #3859FF;
+  --color-blue: oklch(55.18% 0.24695061917412528 267.93122271160547);
 	--color-gray: #C7C7C7;
-	--color-gold: hsla(36, 19%, 44%, 1);
-	--color-text-gray: #5A5A5A;
+  --color-gray: oklch(82.97% 0 0);
+  --color-gold: #86745b;
+	--color-gold: oklch(56.9% 0.043 75.79);
+	--color-text-gray: oklch(46.76% 0 0);
 	--color-bg-back: #F1F0F0;
-	--color-bg-front: #fff;
+  --color-bg-back: oklch(95.59% 0.001 17.18);
+	--color-bg-front: var(--color-white);
 	--space: .75rem;
 	--radius: .5rem;
 
diff --git a/components/SiteHeader.vue b/components/SiteHeader.vue
index 63929b6..9fc3da1 100644
--- a/components/SiteHeader.vue
+++ b/components/SiteHeader.vue
@@ -283,6 +283,7 @@ header {
 .active-menu {
   border-bottom: 2px solid transparent;
   border-image: linear-gradient(0.25turn, var(--color-osaka), var(--color-kyoto));
+  border-image: linear-gradient(in oklch 0.25turn, var(--color-osaka), var(--color-kyoto));
   border-image-slice: 1;
   width: 100%;
 }
@@ -330,6 +331,7 @@ header {
 
 .active-mobile-menu {
   border-image: linear-gradient(0.5turn, var(--color-osaka), var(--color-kyoto));
+  border-image: linear-gradient(in oklch 0.5turn, var(--color-osaka), var(--color-kyoto));
   border-image-slice: 1;
   width: 100%;
   box-sizing: content-box;