Changed layout of writing page

src/components/Card.jsx

@@ -2,93 +2,94 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 function ChevronRightIcon(props) {
-  return (
-    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
-      <path
-        d="M6.75 5.75 9.25 8l-2.5 2.25"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
+    return (
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}>
+            <path
+                d="M6.75 5.75 9.25 8l-2.5 2.25"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    )
 }
 
-export function Card({ as: Component = 'div', className, children }) {
-  return (
-    <Component
-      className={clsx(className, 'group relative flex flex-col items-start')}
-    >
-      {children}
-    </Component>
-  )
+export function Card({as: Component = 'div', className, small, children}) {
+    return (
+        <Component
+            className={clsx(className, 'group relative flex flex-col items-start', small && 'md:flex-row justify-between')}
+        >
+            {children}
+        </Component>
+    )
 }
 
-Card.Link = function CardLink({ children, ...props }) {
-  return (
-    <>
-      <div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
-      <Link {...props}>
-        <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" />
-        <span className="relative z-10">{children}</span>
-      </Link>
-    </>
-  )
+Card.Link = function CardLink({children, ...props}) {
+    return (
+        <>
+            <div
+                className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl"/>
+            <Link {...props}>
+                <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl"/>
+                <span className="relative z-10">{children}</span>
+            </Link>
+        </>
+    )
 }
 
-Card.Title = function CardTitle({ as: Component = 'h2', href, children }) {
-  return (
-    <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
-      {href ? <Card.Link href={href}>{children}</Card.Link> : children}
-    </Component>
-  )
+Card.Title = function CardTitle({as: Component = 'h2', href, children}) {
+    return (
+        <Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+            {href ? <Card.Link href={href}>{children}</Card.Link> : children}
+        </Component>
+    )
 }
 
-Card.Description = function CardDescription({ children }) {
-  return (
-    <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-      {children}
-    </p>
-  )
+Card.Description = function CardDescription({children}) {
+    return (
+        <p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+            {children}
+        </p>
+    )
 }
 
-Card.Cta = function CardCta({ children }) {
-  return (
-    <div
-      aria-hidden="true"
-      className="relative z-10 mt-4 flex items-center text-sm font-medium text-zinc-400 group-hover:text-indigo-500 dark:text-zinc-200"
-    >
-      {children}
-      <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />
-    </div>
-  )
+Card.Cta = function CardCta({children}) {
+    return (
+        <div
+            aria-hidden="true"
+            className="relative z-10 mt-4 flex items-center text-sm font-medium text-zinc-400 group-hover:text-indigo-500 dark:text-zinc-200"
+        >
+            {children}
+            <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current"/>
+        </div>
+    )
 }
 
 Card.Eyebrow = function CardEyebrow({
-  as: Component = 'p',
-  decorate = false,
-  className,
-  children,
-  ...props
-}) {
-  return (
-    <Component
-      className={clsx(
-        className,
-        'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-500 dark:text-zinc-400',
-        decorate && 'pl-3.5'
-      )}
-      {...props}
-    >
-      {decorate && (
-        <span
-          className="absolute inset-y-0 left-0 flex items-center"
-          aria-hidden="true"
+                                        as: Component = 'p',
+                                        decorate = false,
+                                        className,
+                                        children,
+                                        ...props
+                                    }) {
+    return (
+        <Component
+            className={clsx(
+                className,
+                'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-500 dark:text-zinc-400',
+                decorate && 'pl-3.5'
+            )}
+            {...props}
         >
-          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+            {decorate && (
+                <span
+                    className="absolute inset-y-0 left-0 flex items-center"
+                    aria-hidden="true"
+                >
+          <span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500"/>
         </span>
-      )}
-      {children}
-    </Component>
-  )
+            )}
+            {children}
+        </Component>
+    )
 }

src/pages/index.jsx

@@ -245,7 +245,7 @@ export async function getStaticProps() {
     return {
         props: {
             articles: (await getAllArticles())
-                .slice(0, 2)
+                .slice(0, 1)
                 .map(({component, ...meta}) => meta),
         },
     }

src/pages/writing/index.jsx

@@ -7,29 +7,20 @@ import {formatDate} from '@/lib/formatDate'
 
 function Article({article}) {
     return (
-        <article className="md:grid md:grid-cols-4 md:items-baseline">
-            <Card className="md:col-span-3">
+        <article>
+            <Card small={true}>
                 <Card.Title href={`/writing/${article.slug}`}>
                     {article.title}
                 </Card.Title>
                 <Card.Eyebrow
                     as="time"
                     dateTime={article.date}
-                    className="md:hidden"
                     decorate={false}
+                    className="flex-shrink-0 order-last md:ml-4"
                 >
                     {formatDate(article.date)}
                 </Card.Eyebrow>
-                <Card.Description>{article.description}</Card.Description>
-                <Card.Cta>Read article</Card.Cta>
             </Card>
-            <Card.Eyebrow
-                as="time"
-                dateTime={article.date}
-                className="mt-1 hidden md:block"
-            >
-                {formatDate(article.date)}
-            </Card.Eyebrow>
         </article>
     )
 }
@@ -57,8 +48,8 @@ export default function ArticlesIndex({articles}) {
                 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="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
-                    <div className="flex max-w-3xl flex-col space-y-16">
+                <div>
+                    <div className="max-w-3xl space-y-16">
                         {articles.map((article) => (
                             <Article key={article.slug} article={article}/>
                         ))}