Changed article style on writing page

components/Card.tsx

@@ -1,10 +1,12 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 import {ElementType, ReactNode} from 'react'
+import {twMerge} from 'tailwind-merge'
 import {Props} from 'types'
 
 type Card = {
     as?: ElementType
+    variant?: string
     className?: string
     children: ReactNode
 }
@@ -52,12 +54,33 @@ function ChevronRightIcon(props: Props) {
 
 export function Card({
                          as: Component = 'div',
+                         variant = 'normal',
                          className,
                          children
                      }: Card) {
+
+    type VariantStyles = {
+        normal: string
+        inline: string
+    }
+
+    const variantStyles: VariantStyles = {
+        normal:
+            'flex-col',
+        inline:
+            'flex-col md:flex-row md:justify-between',
+    }
+
     return (
         <Component
-            className={clsx(className, 'group relative flex flex-col items-baseline')}
+            className={twMerge(`
+                group
+                relative
+                flex
+                items-baseline
+                ${variantStyles[variant as keyof VariantStyles]}
+                ${className ?? ""}
+            `)}
         >
             {children}
         </Component>

pages/writing/index.tsx

@@ -4,7 +4,6 @@ import Head from 'next/head'
 import {Card} from '@/components/Card'
 import {SimpleLayout} from '@/components/layouts/SimpleLayout'
 import {Views} from '@/components/Views'
-import {Subscribe} from '@/components/Subscribe'
 import {getAllArticles} from '@/lib/getAllArticles'
 import {formatDate} from '@/lib/formatDate'
 import {Article} from 'types'
@@ -12,11 +11,11 @@ import {Article} from 'types'
 function Article({article}: { article: Article }) {
     return (
         <article>
-            <Card>
+            <Card variant="inline">
                 <Card.Title href={`/writing/${article.slug}`}>
                     {article.title}
                 </Card.Title>
-                <p className="flex order-first space-x-1 z-10 mb-3">
+                <p className="flex order-first space-x-1 z-10 mb-3 md:mb-0 md:ml-4 md:order-last">
                     <Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
                         {formatDate(article.date)}
                     </Card.Eyebrow>
@@ -50,15 +49,12 @@ export default function ArticlesIndex({articles}: { articles: Article[] }) {
                 intro="All of my long-form thoughts on software engineering, and more, displayed in chronological order."
                 gradient="bg-gradient-to-r from-pink-500 to-violet-500"
             >
-                <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
+                <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none">
                     <div className="max-w-3xl space-y-16 mt-6">
                         {articles.map((article) => (
                             <Article key={article.slug} article={article}/>
                         ))}
                     </div>
-                    <div className="lg:pl-16 xl:pl-24">
-                        <Subscribe/>
-                    </div>
                 </div>
             </SimpleLayout>
         </>