diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
index 3b5a5d8..34b70ec 100644
--- a/src/components/ItemCard.tsx
+++ b/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 <>
+ onClick={() => {
+ console.log('Overall div!')
+ navigate();
+ }
+ }>
classNames("object-cover", loaded ? null : "blur-xl")}
placeholder="blur"
@@ -52,7 +56,10 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
{title}
{
+ e.stopPropagation();
+ navigate();
+ }}
style={{hyphens: "auto"}}>
{description}
@@ -63,7 +70,7 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
{links!.map(({icon, location, newTab}) =>
+ onClick={e => e.stopPropagation()}>
{LinkIcons[icon]!({})}
)}
@@ -71,7 +78,7 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
- img {
+ @apply blur-2xl;
+ }
+}
+
html, body {
@apply font-manrope;
}
@@ -25,33 +35,20 @@ html, body {
}
}
- &:hover, &.active {
- .elements {
- @apply grid opacity-100;
- }
-
- > img {
- @apply blur-2xl;
+ @media (hover: hover) and (pointer: fine) {
+ &:hover {
+ @include active;
}
}
-}
-.stepped {
- @apply text-white text-8xl;
- font-family: monospace;
-
- > span {
- @apply transition-colors delay-300;
-
- &:hover, &.active {
- @apply text-black bg-white;
- transition-delay: 0s;
- }
+ &.active {
+ @include active;
}
}
.icon-grid {
direction: rtl;
+ @apply min-w-0 max-w-full min-h-0 max-h-full;
> a > svg {
@apply w-full h-full;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index c992d4d..b8d3d70 100644
--- a/src/utils/helpers.ts
+++ b/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";
}