fix: restore card sizing, alignment, and theme layout changes

src/collections/resources/comparison/layer5-academy-vs-moocit/index.mdx

@@ -2,8 +2,8 @@
 title: Layer5 Academy vs Moocit
 subtitle: Academy Comparison
 date: 2025-08-18 08:00:00 -0530
-thumbnail: ../../../../assets/images/academy/academy-layer5-light.png
-darkthumbnail: ../../../../assets/images/academy/academy-layer5.png
+thumbnail: ../../../../assets/images/academy/academy-layer5.svg
+darkthumbnail: ../../../../assets/images/academy/academy-layer5.svg
 description: "Layer5 Academy vs Moocit Comaprision"
 type: Comparison
 category: Academy

src/components/Card/Card.style.js

@@ -63,40 +63,34 @@ export const CardWrapper = styled.div`
     border-top-left-radius: 0.5rem;
     border-bottom-left-radius: ${(props) => (props.$listView ? "0.5rem" : "0")};
     flex-shrink: 0;
-    ${(props) =>
-      props.$listView &&
-      `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0.5rem;
-    `}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${(props) =>
+      props.$listView ? "0.5rem" : "1rem 1rem 0.5rem 1rem"};
 
     .gatsby-image-wrapper,
     .old-gatsby-image-wrapper {
       width: 100%;
       height: 100%;
+      max-height: ${(props) => (props.$listView ? "100%" : "8.5rem")};
       margin-top: 0;
       transition: all 0.3s ease-in;
       display: flex;
       align-items: center;
       justify-content: center;
-      ${(props) =>
-        props.$listView &&
-        `
-        border-radius: 0.25rem;
-        overflow: hidden;
-      `}
+      border-radius: 0.25rem;
+      overflow: hidden;
     }
 
     .gatsby-image-wrapper img,
     .old-gatsby-image-wrapper img {
       max-width: 100%;
       max-height: 100%;
-      width: ${(props) => (props.$listView ? "100%" : "auto")};
-      height: ${(props) => (props.$listView ? "100%" : "auto")};
+      width: 100%;
+      height: 100%;
       display: block;
-      object-fit: ${(props) => (props.$listView ? "cover" : "contain")};
+      object-fit: contain;
       object-position: center;
       margin: 0 auto;
     }

src/components/Card/index.js

@@ -14,18 +14,40 @@ const Card = ({
   listView = false,
 }) => {
   const { isDark } = useStyledDarkMode();
+  const thumbnail =
+    isDark &&
+    frontmatter.darkthumbnail &&
+    frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL
+      ? frontmatter.darkthumbnail
+      : frontmatter.thumbnail;
+
+  const isLogo =
+    thumbnail?.extension === "svg" ||
+    thumbnail?.publicURL?.endsWith(".svg") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("logo") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("icon") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("cncf-landscape") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("academy") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("docker-swarm") ||
+    thumbnail?.publicURL?.toLowerCase()?.includes("smp");
+
+  const isOReillyBanner =
+    frontmatter.title?.toLowerCase()?.includes("introduction to istio") ||
+    frontmatter.title?.toLowerCase()?.includes("advanced istio") ||
+    frontmatter.abstract?.toLowerCase()?.includes("introduction to istio") ||
+    frontmatter.title?.toLowerCase()?.includes("oscon") ||
+    frontmatter.title?.toLowerCase()?.includes("o'reilly");
+
   return (
     <CardWrapper fixed={!!frontmatter.abstract} $listView={listView}>
       <div className="post-block">
         <div className="post-thumb-block">
           <Image
-            {...(isDark &&
-            frontmatter.darkthumbnail &&
-            frontmatter.darkthumbnail.publicURL !==
-              frontmatter.thumbnail.publicURL
-              ? frontmatter.darkthumbnail
-              : frontmatter.thumbnail)}
-            imgStyle={{ objectFit: "cover" }}
+            {...thumbnail}
+            imgStyle={{
+              objectFit: isOReillyBanner ? "cover" : "contain",
+              transform: isLogo ? "scale(0.92)" : "none",
+            }}
             loading={loading}
             fetchpriority={fetchpriority}
             alt={frontmatter.title}
@@ -98,4 +120,4 @@ const Card = ({
   );
 };
 
-export default Card;
+export default Card;

src/components/image.js

@@ -1,35 +1,49 @@
 import React from "react";
 import { GatsbyImage } from "gatsby-plugin-image";
 
-const Image = ({ childImageSharp, extension, publicURL, alt, imgStyle, ...rest }) => {
-
+const Image = ({
+  childImageSharp,
+  extension,
+  publicURL,
+  alt,
+  imgStyle,
+  style,
+  ...rest
+}) => {
   if (!childImageSharp && extension === "svg") {
     return (
-      <div className="old-gatsby-image-wrapper" style={{ width: "100%", height: "auto" }}>
+      <div
+        className="old-gatsby-image-wrapper"
+        style={{ width: "100%", height: "100%", ...style }}
+      >
         <img
           src={publicURL}
           alt={alt || "Blog image"}
           width="100%"
-          height="auto"
+          height="100%"
           style={{
             objectFit: imgStyle?.objectFit || "cover",
-            ...imgStyle
+            ...imgStyle,
           }}
+          {...rest}
         />
       </div>
     );
   }
 
-  return <GatsbyImage
-    key={publicURL}
-    image={childImageSharp?.gatsbyImageData}
-    alt={alt || "Blog image"}
-    imgStyle={{
-      objectFit: imgStyle?.objectFit || "cover",
-      ...imgStyle
-    }}
-    {...rest}
-  />;
+  return (
+    <GatsbyImage
+      key={publicURL}
+      image={childImageSharp?.gatsbyImageData}
+      alt={alt || "Blog image"}
+      imgStyle={{
+        objectFit: imgStyle?.objectFit || "cover",
+        ...imgStyle,
+      }}
+      style={style}
+      {...rest}
+    />
+  );
 };
 
 export default Image;