roost.moe / recipes.blue
The recipes.blue monorepo recipes.blue
recipes appview atproto
fork atom

feat: improved styling for individual recipes

Hayden Young 1908c692 7f784607

+16 -15
+16 -15
apps/web/src/routes/_.(app)/recipes/$author/$rkey.tsx
··· 66 </Breadcrumb> 67 </div> 68 </header> 69 - <div className="flex flex-1 flex-col gap-4 p-4 pt-0"> 70 - <div className="max-w-6xl"> 71 - <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> 72 - {recipe.title} 73 - </h1> 74 - <p className="leading-7 [&:not(:first-child)]:mt-6"> 75 - {recipe.description} 76 - </p> 77 - </div> 78 - 79 - <div className="grid lg:grid-cols-3 gap-4"> 80 - <Card className="lg:col-start-3"> 81 <CardHeader> 82 <CardTitle>Ingredients</CardTitle> 83 </CardHeader> ··· 91 </ul> 92 </CardContent> 93 </Card> 94 - 95 - <Card className="lg:col-start-1 lg:row-start-1 lg:col-span-2"> 96 <CardHeader> 97 <CardTitle>Steps</CardTitle> 98 </CardHeader> 99 <CardContent> 100 - <ol> 101 {recipe.steps.map((ing, idx) => ( 102 <li key={idx}>{ing.text}</li> 103 ))}
··· 66 </Breadcrumb> 67 </div> 68 </header> 69 + <div className="flex flex-col gap-4 px-4 py-8 items-center"> 70 + <p className="text-muted-foreground"> 71 + By @{recipe.author.handle} 72 + </p> 73 + <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> 74 + {recipe.title} 75 + </h1> 76 + <p className="leading-7"> 77 + {recipe.description} 78 + </p> 79 + </div> 80 + <div className="flex flex-1 flex-col gap-4 p-4 pt-0 w-full max-w-2xl items-center mx-auto"> 81 + <div className="grid gap-4 w-full"> 82 + <Card> 83 <CardHeader> 84 <CardTitle>Ingredients</CardTitle> 85 </CardHeader> ··· 93 </ul> 94 </CardContent> 95 </Card> 96 + <Card> 97 <CardHeader> 98 <CardTitle>Steps</CardTitle> 99 </CardHeader> 100 <CardContent> 101 + <ol className="list-decimal list-inside"> 102 {recipe.steps.map((ing, idx) => ( 103 <li key={idx}>{ing.text}</li> 104 ))}