From d14528243ed9be131606d6ce8a4b01763270eddd Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Wed, 14 Feb 2024 16:32:36 -0800
Subject: [PATCH] fix some styling wip

---
 src/app/author/[author]/AuthorDisplay.tsx |  9 ++++--
 src/app/components/DocumentCard.tsx       |  2 +-
 src/app/components/mobileMenu.module.css  |  1 -
 src/app/search/page.tsx                   |  2 +-
 src/app/styles/cardEffects.module.css     | 35 ++++++++++++++++++++---
 5 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/app/author/[author]/AuthorDisplay.tsx b/src/app/author/[author]/AuthorDisplay.tsx
index f1eb094..81e73c7 100644
--- a/src/app/author/[author]/AuthorDisplay.tsx
+++ b/src/app/author/[author]/AuthorDisplay.tsx
@@ -5,6 +5,7 @@ import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import DocumentCard from '@/app/components/DocumentCard'
 import findDocumentsByAuthor from './findDocumentsByAuthor'
+import cardEffects from '@/app/styles/cardEffects.module.css'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -41,11 +42,15 @@ export default function AuthorDisplay({
         ) : null}
         <div className='my-4 max-h-12 flex flex-wrap gap-2'>
           {affiliation.map((a: string) => (
-            <Link key={a} href={`/affiliation/${a.split('@')[1]}`}>
+            <Link
+              key={a}
+              href={`/affiliation/${a.split('@')[1]}`}
+              className={cardEffects['card-small']}
+            >
               <img
                 src={affiliations[a.split('@')[1]].image}
                 alt={affiliations[a.split('@')[1]].name}
-                className='h-12 shadow-sm shadow-slate-400 rounded-md'
+                className='h-12 rounded-md'
               />
             </Link>
           ))}
diff --git a/src/app/components/DocumentCard.tsx b/src/app/components/DocumentCard.tsx
index 76f95dc..cd7ac15 100644
--- a/src/app/components/DocumentCard.tsx
+++ b/src/app/components/DocumentCard.tsx
@@ -14,7 +14,7 @@ const DocumentCard = ({ doc, href }: { doc: Document; href: string }) => {
   return (
     <Link href={href} className='no-link-style'>
       <div
-        className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md`}
+        className={`${cardEffects['card-large']} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md`}
         role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
       >
         <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
diff --git a/src/app/components/mobileMenu.module.css b/src/app/components/mobileMenu.module.css
index 06d7ef9..280d362 100644
--- a/src/app/components/mobileMenu.module.css
+++ b/src/app/components/mobileMenu.module.css
@@ -1,6 +1,5 @@
 .menu {
   @apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200;
-  @apply duration-300;
   height: fit-content;
   padding-bottom: 10px;
   transition: height 0.2s ease-in-out;
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index a88aa7d..778f348 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -42,7 +42,7 @@ const SearchResult = ({
 
   return (
     <div
-      className={`${cardEffects.card} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer`}
+      className={`${cardEffects['card-large']} border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer`}
       onClick={handleClick}
       role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
     >
diff --git a/src/app/styles/cardEffects.module.css b/src/app/styles/cardEffects.module.css
index dba28e2..daaa064 100644
--- a/src/app/styles/cardEffects.module.css
+++ b/src/app/styles/cardEffects.module.css
@@ -1,12 +1,12 @@
 /* creates a 3D card effect using a pseudo element for performance reasons */
 
-.card {
+.card-large {
   @apply shadow-sm shadow-slate-300;
   /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   position: relative;
 }
-.card::after {
+.card-large::after {
   @apply shadow-lg shadow-slate-500;
   content: '';
   z-index: -1;
@@ -19,10 +19,37 @@
   left: 0;
 }
 
-.card:hover {
+.card-large:hover {
   transform: scale(1.02, 1.02);
 }
 
-.card:hover::after {
+.card-large:hover::after {
+  opacity: 1;
+}
+
+.card-small {
+  @apply shadow-sm shadow-slate-300;
+  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); */
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: relative;
+}
+.card-small::after {
+  @apply shadow-md shadow-slate-500;
+  content: '';
+  z-index: -1;
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.card-small:hover {
+  transform: scale(1.08, 1.08);
+}
+
+.card-small:hover::after {
   opacity: 1;
 }