Merge branch 'staging' into medium-blog-migration

kscalelabs · Jan 31, 2025 · 6708408 · 6708408
2 parents 7caeb5e + 26079f3
commit 6708408
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/pages/research/index.tsx b/src/pages/research/index.tsx
@@ -2,6 +2,8 @@ import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
 import Link from "next/link";
+// If you're no longer using Next.js <Image />, remove or comment this import
+// import Image from "next/image";
 import Layout from "../../components/Layout";
 
 const RESEARCH_PATH = path.join(process.cwd(), "src/content/research");
@@ -18,7 +20,7 @@ export async function getStaticProps() {
       slug: file.replace(".mdx", ""),
       title: data.title || "Untitled",
       description: data.description || "No description available.",
-      // We rely on `data.date` for sorting. Make sure it's a valid date format (e.g. "YYYY-MM-DD" or "September 9, 2024").
+      // We rely on `data.date` for sorting. Make sure it's a valid format (e.g. "YYYY-MM-DD" or "September 9, 2024").
       date: data.date || "Unknown date",
       image: data.image || "/images/research/css-pattern1.png",
     };
@@ -50,13 +52,17 @@ export default function ResearchIndex({ posts }: { posts: any[] }) {
           {posts.map((post) => (
             <Link key={post.slug} href={`/research/${post.slug}`} className="group card-link">
               <div className="flex flex-col h-full rounded-lg overflow-hidden shadow-md bg-white dark:bg-gray-900 transition transform hover:-translate-y-1">
-                {/* Top image background */}
+                {/* Uses a background image approach with a tall inner div (200%). 
+                    That way you can control which portion of the image is shown. */}
                 <div className="relative w-full aspect-[16/9] overflow-hidden">
+                  {/* This inner div is made larger (200% height, for example). 
+                      Then we can show only the top portion by offsetting or by 
+                      limiting the outer container's overflow. */}
                   <div
                     className="absolute top-0 left-0 w-full h-[200%]"
                     style={{
                       backgroundImage: `url(${post.image})`,
-                      backgroundSize: "100% auto",
+                      backgroundSize: "100% auto", // or "cover"
                       backgroundRepeat: "no-repeat",
                       backgroundPosition: "top center",
                     }}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -467,12 +467,14 @@ main .sponsors {
   border-radius: 8px; /* If using SVG make sure that preserveAspectRatio="none" */
 }
 
+
 .mdx-content iframe {
   display: block;
   margin: 2.5rem auto;
   border-radius: 8px;
 }
 
+
 .mdx-content blockquote {
   margin: 2rem auto;
   padding: 1rem;