Sync hover of logo and em link hovers with CSS only (#157)

* ♻️ Reuse same logic for listeners

* Sync hover of logo and em link hovers without js

* Correct type for `a` tag

* Rename `.is-em` to BEM variant

* Use `.is-em` again with class combination

view/main/index.css

@@ -80,21 +80,17 @@ body {
   color: inherit;
   text-decoration: none;
 
-  &:hover,
-  &.is-hover {
-    color: var(--accent);
-    text-decoration: underline;
-  }
-
   &:focus {
     text-decoration: none;
     border-radius: 2px;
     outline-offset: 2px;
   }
 }
 
-.main_logo-path {
-  fill: var(--surface-ui-regular);
+.main:has(.main_logo:hover) .main_link.is-em,
+.main_link:hover {
+  color: var(--accent);
+  text-decoration: underline;
 }
 
 .main_logo-icon {
@@ -109,14 +105,13 @@ body {
   width: 96px;
   height: 38px;
   padding-top: 10px;
+  color: var(--surface-ui-regular);
   transform: translateX(-50%);
+}
 
-  &:hover,
-  &.is-hover {
-    .main_logo-path {
-      fill: var(--accent);
-    }
-  }
+.main:has(.main_link.is-em:is(:hover, :focus)) .main_logo,
+.main_logo:hover {
+  color: var(--accent);
 }
 
 .main_logo::before,

view/main/index.ts

@@ -2,10 +2,7 @@ import { trackEvent } from '../analytics/index.js'
 
 let expand = document.querySelector<HTMLButtonElement>('.main_expand')!
 
-let emText = document.querySelector<HTMLLinkElement>('.main_link.is-em')!
-let emLogo = document.querySelector<HTMLLinkElement>('.main_logo')!
-
-let links = document.querySelectorAll<HTMLLinkElement>('.main a')
+let links = document.querySelectorAll<HTMLAnchorElement>('.main a')
 
 function onScroll(): void {
   document.body.classList.add('is-main-collapsed')
@@ -29,30 +26,6 @@ expand.addEventListener('click', () => {
   document.body.classList.toggle('is-main-collapsed')
 })
 
-emText.addEventListener('mouseenter', () => {
-  emLogo.classList.add('is-hover')
-})
-
-emText.addEventListener('mouseleave', () => {
-  emLogo.classList.remove('is-hover')
-})
-
-emText.addEventListener('focus', () => {
-  emLogo.classList.add('is-hover')
-})
-
-emText.addEventListener('blur', () => {
-  emLogo.classList.remove('is-hover')
-})
-
-emLogo.addEventListener('mouseenter', () => {
-  emText.classList.add('is-hover')
-})
-
-emLogo.addEventListener('mouseleave', () => {
-  emText.classList.remove('is-hover')
-})
-
 for (let link of links) {
   let event = 'Open Evil Martians'
   if (link.href.includes('sitnik')) event = 'Open Sitnik page'