chore: improve about page on mobile

Author: kungfux

assets/css/about.css

@@ -6,28 +6,28 @@ hr.about {
   text-align: center;
 }
 
-i.tool-icon::before {
-  font-size: 300%;
-  opacity: 1;
-}
-
-i.tool-icon:not(.colored)::before {
-  color: #696969;
-  opacity: 0.5 !important;
-}
-
 a.tool {
   display: inline-block;
   padding: 0.5rem;
   border-bottom: unset !important;
   transition: transform 0.2s;
 }
 
-a.tool:hover {
+a.tool.hovered {
   transform: scale(1.5);
   transition: transform 0.2s;
 }
 
 a.tool.disabled {
   cursor: default;
 }
+
+i.tool-icon::before {
+  font-size: 300%;
+  opacity: 1;
+}
+
+i.tool-icon:not(.colored)::before {
+  color: #696969;
+  opacity: 0.5 !important;
+}

assets/js/about.js

@@ -121,15 +121,17 @@ document.querySelectorAll('.tool-icon').forEach((ti) => {
       event,
       () => {
         ti.classList.add('colored');
+        ti.parentElement.classList.add('hovered');
       },
       { passive: true }
     )
   );
-  ['mouseleave', 'touchend'].forEach((event) =>
+  ['mouseleave', 'touchend', 'touchcancel'].forEach((event) =>
     ti.addEventListener(
       event,
       () => {
         ti.classList.remove('colored');
+        ti.parentElement.classList.remove('hovered');
       },
       { passive: true }
     )