feat(scss): Remove dynamic image class

1ilsang · Dec 23, 2024 · f13db0e · f13db0e
1 parent 8c24843
commit f13db0e
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 97 deletions.
diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx
@@ -34,7 +34,11 @@ const WorkCardContainer: FunctionComponent<WorkCardContainerProps> = (
   }, [toggleOpenAll]);
 
   const openClassName =
-    open === undefined ? 'max-h-[8000px]' : open ? 'show' : 'hide';
+    open === undefined
+      ? 'max-h-[8000px]'
+      : open
+        ? 'animate-show'
+        : 'animate-hide';
 
   return (
     <article className="flex flex-col print:flex-row md:flex-row mt-4 py-3">

diff --git a/src/features/about/work/card/content/Container.tsx b/src/features/about/work/card/content/Container.tsx
@@ -31,17 +31,17 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
     'before:content-["▼"] text-highlight print:text-black print:before:text-black';
 
   const openClassName = (() => {
-    if (print) return 'show';
+    if (print) return 'animate-show';
     if (open === undefined) return 'invisible opacity-0	max-h-0';
-    return open ? 'show' : 'hide';
+    return open ? 'animate-show' : 'animate-hide';
   })();
   const foldState = (() => {
     if (print) return unfold;
     return open ? unfold : fold;
   })();
   const externalLink = (() => {
     if (print) return undefined;
-    return open !== undefined && url && openClassName !== 'hide';
+    return open !== undefined && url && openClassName !== 'animate-hide';
   })();
 
   return (

diff --git a/src/features/about/work/card/content/ProjectDetail.tsx b/src/features/about/work/card/content/ProjectDetail.tsx
@@ -22,9 +22,7 @@ const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
     };
 
     return (
-      <div
-        className={classNames('flex flex-wrap break-words', [openClassName])}
-      >
+      <div className={classNames('break-words', [openClassName])}>
         {!print && img && (
           <DynamicImage
             className="w-full shadow-[1px_1px_8px] shadow-peach"

diff --git a/src/features/shared/components/DynamicImage.tsx b/src/features/shared/components/DynamicImage.tsx
@@ -29,15 +29,24 @@ const DynamicImage: FunctionComponent<DynamicImageProps> = ({
 
   return (
     <div
-      className={classNames('dynamic-image', [className], {
+      className={classNames('relative mt-4 text-amber-600', [className], {
         'animate-skeleton': loading,
-        min: !min,
+        'max-w-[1.5rem] max-h-[1.5rem]': !min,
       })}
       style={{ width, height }}
     >
-      <button className={min ? 'min' : 'max'} onClick={handleMinClick} />
+      <button
+        className={classNames(
+          'absolute top-[-3rem] left-[-0.5rem] hover:text-amber-400 hover:duration-150 opacity-70 before:text-[5rem]',
+          min
+            ? 'before:content-["⎗"] before:text-[6rem]'
+            : 'before:content-["⎘"]',
+        )}
+        title="Toggle image size"
+        onClick={handleMinClick}
+      />
       <img
-        className={onClick ? 'zoom' : undefined}
+        className={onClick ? 'cursor-zoom-in' : undefined}
         src={src}
         alt={alt}
         width={width}

diff --git a/src/styles/common.scss b/src/styles/common.scss
@@ -1,48 +1,3 @@
-$target: #e73c7e;
-
-.dynamic-image {
-  position: relative;
-  margin: 1rem 0 0;
-  color: $target;
-
-  :hover {
-    color: #e66295;
-  }
-
-  .min {
-    position: absolute;
-    top: -3rem;
-    left: -0.5rem;
-
-    &::before {
-      content: '⎗';
-      opacity: 0.5;
-      font-size: 6rem;
-      font-weight: bold;
-    }
-  }
-
-  .max {
-    position: absolute;
-    top: -2rem;
-    left: -0.5rem;
-
-    &::before {
-      content: '⎘';
-      font-size: 3rem;
-    }
-  }
-
-  .zoom {
-    cursor: zoom-in;
-  }
-}
-
-.dynamic-image.min {
-  max-height: 1.5rem;
-  max-width: 1.5rem;
-}
-
 .highlighter {
   display: inline-block;
   color: #30ffcb;
@@ -70,44 +25,3 @@ $target: #e73c7e;
     }
   }
 }
-
-.show {
-  animation: fade 0.5s forwards;
-
-  @keyframes fade {
-    0% {
-      max-height: 0;
-      opacity: 0;
-    }
-
-    100% {
-      max-height: 8000px;
-      opacity: 1;
-    }
-  }
-
-  @media print {
-    animation: none;
-  }
-}
-
-.hide {
-  animation: fade-out 0.25s forwards;
-
-  @keyframes fade-out {
-    0% {
-      max-height: 8000px;
-      opacity: 1;
-    }
-
-    100% {
-      max-height: 0;
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-
-  @media print {
-    animation: none;
-  }
-}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -57,6 +57,27 @@ const keyframes = {
       'background-color': 'rgba(165, 165, 165, 10%)',
     },
   },
+  show: {
+    '0%': {
+      'max-height': 0,
+      opacity: 0,
+    },
+    '100%': {
+      'max-height': '8000px',
+      opacity: 1,
+    },
+  },
+  hide: {
+    '0%': {
+      'max-height': '8000px',
+      opacity: 1,
+    },
+    '100%': {
+      'max-height': 0,
+      opacity: 0,
+      visibility: 'hidden',
+    },
+  },
 };
 
 /** @type {import('tailwindcss').Config} */
@@ -82,6 +103,8 @@ module.exports = {
         skeleton: 'skeleton 1.8s infinite ease-in-out',
         loading:
           'skeleton 1.8s infinite ease-in-out, spin 1s infinite ease-in-out',
+        show: 'show 0.5s forwards',
+        hide: 'hide 0.25s forwards',
       },
       backgroundImage: {
         home: 'linear-gradient(to left,rgb(148, 148, 255),rgb(182, 182, 255))',