feat(website): redesign organism card (#3062)

website/scripts/process_images.sh

@@ -9,14 +9,31 @@ fi
 # Directory containing images
 IMAGE_DIR="$1"
 
+# Check if the directory exists
+if [ ! -d "$IMAGE_DIR" ]; then
+    echo "Error: Directory '$IMAGE_DIR' does not exist."
+    exit 1
+fi
+
+# Enable nullglob to avoid errors when no .jpg files are found
+shopt -s nullglob
+
+# Count the number of jpg files
+jpg_files=("$IMAGE_DIR"/*.jpg)
+
+if [ ${#jpg_files[@]} -eq 0 ]; then
+    echo "No JPG files found in '$IMAGE_DIR'."
+    exit 0
+fi
+
 # Loop over all jpg files in the directory
-for img in "$IMAGE_DIR"/*.jpg; do
+for img in "${jpg_files[@]}"; do
     # Extract the filename without extension
     filename=$(basename "$img" .jpg)
 
     # Skip files that already have '_small' in their filename
     if [[ $filename != *"_small" ]]; then
         # Resize, compress the JPEG and save it
-        magick "$img" -resize 200x\> -strip -quality 85 "$IMAGE_DIR/${filename}_small.jpg"
+        magick "$img" -resize 220x\> -strip -quality 85 "$IMAGE_DIR/${filename}_small.jpg"
     fi
 done

website/src/components/IndexPage/OrganismCard.astro

@@ -16,18 +16,30 @@ const { key, image, displayName, organismStatistics, numberDaysAgoStatistics } =
 
 <a
     href={routes.organismStartPage(key)}
-    class='block rounded border border-gray-300 p-4 m-2 w-64 text-center hover:bg-gray-100 mx-auto sm:mx-2'
+    class='block rounded border box-border border-gray-300 m-2 w-56 hover:bg-gray-100 mx-auto sm:mx-2'
 >
-    {image !== undefined && <img src={image} class='h-32 mx-auto mb-4' alt={displayName} />}
-    <h3 class='font-semibold'>{displayName}</h3>
-    <p class='text-sm'>
-        {formatNumberWithDefaultLocale(organismStatistics.totalSequences)} sequences<br />
-        (+{formatNumberWithDefaultLocale(organismStatistics.recentSequences)} in last {numberDaysAgoStatistics} days)<br
-        />
-        <span class='hidden'
-            >{
-                organismStatistics.lastUpdatedAt && <>Last updated {organismStatistics.lastUpdatedAt.toRelative()}</>
-            }</span
-        >
-    </p>
+    {image !== undefined && <img src={image} class='h-40 w-full object-cover rounded-t-[3px]' alt={displayName} />}
+    <div class='my-4 mx-4 h-28 flex flex-col justify-between'>
+        <h3 class='font-semibold mb-2'>{displayName}</h3>
+        <p class='text-sm leading-7'>
+            <span class='font-bold'>
+                {formatNumberWithDefaultLocale(organismStatistics.totalSequences)}
+            </span>
+            sequences
+            <br />
+            <span class='text-slate-400 text-sm'>
+                <span class='text-slate-500'>
+                    +{formatNumberWithDefaultLocale(organismStatistics.recentSequences)}
+                </span>
+                in last {numberDaysAgoStatistics} days
+            </span>
+            <span class='hidden'
+                >{
+                    organismStatistics.lastUpdatedAt && (
+                        <>Last updated {organismStatistics.lastUpdatedAt.toRelative()}</>
+                    )
+                }</span
+            >
+        </p>
+    </div>
 </a>