Merge pull request #190 from evilmartians/harmonizer

Add link to Harmonizer

Author: ai

view/layout/index.pug

@@ -14,9 +14,9 @@ include ../link/mixin.pug
       'https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl'
     )
     +link(
-      'github',
-      'evilmartians / oklch-picker',
-      'https://github.com/evilmartians/oklch-picker'
+      'palette',
+      'Build palette with OKLCH and APCA',
+      'https://harmonizer.evilmartians.com/'
     )
 
   .layout_l

view/link/github.svg

@@ -14,7 +14,8 @@
   background: var(--surface-2);
   border-radius: 36px;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background: var(--surface-ui-accent);
   }
 }
@@ -27,8 +28,8 @@
   right: 28px;
   width: var(--link-external-size);
   height: var(--link-external-size);
-  content: "";
-  background: url("./external.svg");
+  content: '';
+  background: url('./external.svg');
   transform: translateY(-50%);
 
   @media (prefers-color-scheme: dark) {
@@ -37,13 +38,11 @@
 }
 
 .link_icon {
-  --link-icon-size: 48px;
-
   position: absolute;
   top: 50%;
   left: 12px;
-  width: var(--link-icon-size);
-  height: var(--link-icon-size);
+  width: 48px;
+  height: 48px;
   transform: translateY(-50%);
 }
 

view/link/harmonizer.svg

@@ -1,7 +1,7 @@
 mixin link(icon, text, href)
   a.link( class=`is-${icon}` target="_blank" href=href )
-    if icon === 'github'
-      include ./github.svg
+    if icon === 'palette'
+      include ./harmonizer.svg
     else if icon === 'help'
       include ./help.svg
     = text

view/link/index.css

@@ -1,6 +1,27 @@
 .title {
+  padding-inline: 72px;
+  position: relative;
+}
+
+.title_text {
   padding: 28px 0;
   font-size: 17.5px;
   line-height: 20px;
   text-align: center;
 }
+
+.title_source {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 48px;
+  height: 48px;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  background: var(--surface-1);
+
+  &:hover,
+  &:focus-visible {
+    background: var(--surface-ui-accent);
+  }
+}

view/link/mixin.pug

@@ -1 +1,10 @@
-h1.title= `${LCH ? 'LCH' : 'OKLCH'} Color Picker & Converter`
+.title
+  h1.title_text
+    = `${LCH ? 'LCH' : 'OKLCH'} Color Picker & Converter`
+  a.title_source(
+    target="_blank"
+    href="https://github.com/evilmartians/oklch-picker"
+    title="Source code"
+    aria-title="Source code"
+  )
+    include ./github.svg