Fixed mobile not toggling on/off properly

- Chrome & Firefox Mobile issue
- Despite not having hover in JS, CSS :hover selector was activating
- Tiny, inactive mobile-only button was clickable
- Fixed duplicate key issue in icon links

src/components/ItemCard.tsx

@@ -1,6 +1,6 @@
 import React, {useRef} from "react";
 import {useOnClickOutside, useToggle} from "usehooks-ts";
-import {classNames, isHoverable, stopPropagation} from "../utils/helpers";
+import {classNames, isHoverable} from "../utils/helpers";
 import DependentImage from "./DependentImage";
 import ReactMarkdown from 'react-markdown'
 
@@ -40,7 +40,11 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
     return <>
         <div ref={itemRef}
              className={classNames("item [&:not(:first-child)]:mt-3", active ? "active" : null)}
-             onClick={navigate}>
+             onClick={() => {
+                 console.log('Overall div!')
+                 navigate();
+             }
+             }>
             <DependentImage fill src={banner} blurDataURL={bannerBlur}
                             className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
                             placeholder="blur"
@@ -52,7 +56,10 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
                     <Link href={{pathname: location}}
                           className="text-lg sm:text-2xl md:text-3xl font-semibold">{title}</Link>
                     <div className="mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl overflow-hidden"
-                         onClick={navigate}
+                         onClick={(e) => {
+                             e.stopPropagation();
+                             navigate();
+                         }}
                          style={{hyphens: "auto"}}>
                         <ReactMarkdown>{description}</ReactMarkdown>
                     </div>
@@ -63,7 +70,7 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
                         <div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
                             {links!.map(({icon, location, newTab}) =>
                                 <Link key={location} href={location} target={(newTab ?? true) ? "_blank" : "_self"}
-                                      onClick={stopPropagation}>
+                                      onClick={e => e.stopPropagation()}>
                                     {LinkIcons[icon]!({})}
                                 </Link>)}
                         </div>
@@ -71,7 +78,7 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
             </div>
 
         </div>
-        <Link ref={mobileButtonRef} href={{pathname: location}}
+        <Link aria-disabled={!active} ref={mobileButtonRef} href={active ? {pathname: location} : {}}
               className={classNames(
                   "transition-all bg-zinc-800 rounded border border-zinc-900 shadow w-full flex items-center justify-center",
                   active ? "opacity-100 h-9 p-2" : "opacity-0 h-0 p-0"

src/pages/index.tsx

@@ -51,7 +51,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
                 },
                 {
                     icon: "external",
-                    location: "https://github.com/Xevion/phototag"
+                    location: "https://phototag.xevion.dev"
                 }
             ]
         },

src/styles/globals.scss

@@ -7,6 +7,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@mixin active {
+  .elements {
+    @apply grid opacity-100;
+  }
+
+  > img {
+    @apply blur-2xl;
+  }
+}
+
 html, body {
   @apply font-manrope;
 }
@@ -25,33 +35,20 @@ html, body {
     }
   }
 
-  &:hover, &.active {
+  @media (hover: hover) and (pointer: fine) {
-    .elements {
+    &:hover {
-      @apply grid opacity-100;
+      @include active;
-    }
-
-    > img {
-      @apply blur-2xl;
     }
   }
-}
 
-.stepped {
+  &.active {
-  @apply text-white text-8xl;
+    @include active;
-  font-family: monospace;
-
-  > span {
-    @apply transition-colors delay-300;
-
-    &:hover, &.active {
-      @apply text-black bg-white;
-      transition-delay: 0s;
-    }
   }
 }
 
 .icon-grid {
   direction: rtl;
+  @apply min-w-0 max-w-full min-h-0 max-h-full;
 
   > a > svg {
     @apply w-full h-full;

src/utils/helpers.ts

@@ -6,14 +6,6 @@ export function classNames(...classes: (string | null | undefined)[]) {
     return classes.filter(Boolean).join(" ");
 }
 
-/**
- * A handler that simply calls the `stopPropagation` method on an event.
- * @param event The event to prevent propagation on.
- */
-export const stopPropagation = (event: Event) => {
-    event.stopPropagation();
-};
-
 const isClient = (): boolean => {
     return typeof window !== "undefined";
 }