Merge pull request #173 from owddm/feat/oklch

Using OKLCH colors
owddm · Jun 23, 2023 · 262c79d · 262c79d
2 parents c450427 + 152124c
commit 262c79d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git 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;
   --space-small: .5rem;
 	--radius: .5rem;

diff --git 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;