feat: expand article hero and images

app/src/components/HeroArticle.astro

@@ -285,16 +285,24 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 
 <style>
   .hero {
+    position: relative;
     width: 100%;
-    padding: 64px 16px 16px;
+    min-height: 100svh;
+    padding: clamp(56px, 9vh, 96px) 16px clamp(32px, 7vh, 72px);
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: hidden;
   }
   .hero-title {
+    position: relative;
+    z-index: 1;
     font-size: clamp(34px, 5vw, 54px);
     font-weight: 800;
     line-height: 1.12;
     letter-spacing: -0.02em;
-    margin: 0 auto 8px;
+    margin: 0 auto;
     max-width: 780px;
     text-wrap: balance;
   }
@@ -305,11 +313,21 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     font-size: clamp(24px, 3.2vw, 38px);
   }
   .hero-banner {
-    max-width: 980px;
-    margin: 0 auto;
-    aspect-ratio: 5 / 2;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
   }
+  .hero-banner::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(to bottom, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 78%, transparent) 18%, transparent 46%),
+      linear-gradient(to top, var(--page-bg) 0%, transparent 22%);
+  }
   .hero-banner :global(.html-embed) {
     height: 100%;
   }
@@ -317,15 +335,19 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     height: 100%;
   }
   .hero-desc {
+    position: relative;
+    z-index: 1;
     color: var(--muted-color);
     font-style: italic;
-    margin: 0 auto 16px;
-    max-width: 55%;
+    margin: auto auto 0;
+    max-width: min(680px, 90%);
   }
 
   @media (max-width: 768px) {
-    .hero-banner { aspect-ratio: auto; }
-    .hero-desc { max-width: 90%; }
+    .hero {
+      min-height: 100svh;
+      padding-top: clamp(48px, 9vh, 72px);
+    }
   }
 
   /* Meta bar */

app/src/content/article.mdx

@@ -31,7 +31,6 @@ tags:
 
 import SlopfarmerContent from "./chapters/slopfarmer/content.mdx";
 import Image from '../components/Image.astro';
-import Stack from '../components/Stack.astro';
 import honestWork from './assets/image/honest-work-meme.jpg';
 import codeAgentSlop from './assets/image/code-agent-slop.png';
 
@@ -41,10 +40,9 @@ This problem is not unique to Transformers. Every large open source project on G
 
 The volume is unprecedented and unfortunately the quality, on average, is low. And the maintainers reviewing these contributions are the same teams they have always been. Honest folk.
 
-<Stack>
-  <Image src={honestWork} alt="Meme: I have 2 PhDs in computer science and now I read through 500 AI generated PRs an hour. It ain't much, but it's honest work." />
-  <Image src={codeAgentSlop} alt="Screenshot of the huggingface/transformers pull request list showing dozens of PRs labeled 'Code agent slop', most closed within minutes of each other." />
-</Stack>
+<Image src={honestWork} alt="Meme: I have 2 PhDs in computer science and now I read through 500 AI generated PRs an hour. It ain't much, but it's honest work." />
+
+<Image src={codeAgentSlop} alt="Screenshot of the huggingface/transformers pull request list showing dozens of PRs labeled 'Code agent slop', most closed within minutes of each other." />
 
 To understand this, we started a project at Hugging Face to study this problem on Transformers. We didn't set out to solve it, but we wanted to understand what was coming, whether any of it was useful, and whether there was a way to extract signal from the noise.