Skip to content

Commit

Permalink
repair ingredient layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Reed Nelson committed Aug 19, 2023
1 parent e717c0e commit 59df90e
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 34 deletions.
51 changes: 26 additions & 25 deletions src/layouts/DrinkSingle.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
import similerItems from "@/lib/utils/similarItems";
import { markdownify } from "@/lib/utils/textConverter";
import { Image } from "@astrojs/image/components";
import type internal from "stream";
interface Recipe {
ingredients: {
Expand Down Expand Up @@ -115,45 +116,45 @@ const { ingredients, instructions }: Recipe = post.data;
</div>

<!-- Ingredients -->
<section class={`section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4`}>
<section class="section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4">
<div class="container -my-10">
<div class="row items-center justify-between">
<div class={`md:col-7 lg:col-6 md:order-1`}>
<div class="md:col-6 lg:col-6 md:order-1">
<h2 set:html="Ingredients" class="mb-4" />
<div class="grid grid-cols-2 gap-4">
<ul class="list-disc list-inside">
{ingredients.list.map((bullet: string) => (
<li class="relative mb-2 pl-6">
<span set:html={markdownify(bullet)} />
</li>
))}
</ul>
<ul>
{ingredients.qty.map((qty: string) => (
<li class="relative mb-2 pl-6">
<span set:html={markdownify(qty)} />
</li>
))}
</ul>
<div class="row mx-4">
{ingredients.list.map((it: string, index: number) => (
<div class="row my-1">
<div class="col-7">
{markdownify(ingredients.list[index])}
</div>
<div class="col-5 text-right">
{markdownify(ingredients.qty[index])}
</div>
<hr class="my-1">
</div>
))}
</div>
</div>
</div>
</div>
</section>

<!-- Instructions -->
<section class={`section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4`}>
<section class="section-sm bg-theme-light dark:bg-darkmode-theme-light rounded-lg mb-4">
<div class="container -my-10">
<div class="row items-center justify-between">
<div class={`md:col-7 lg:col-6 md:order-1`}>
<div class="md:col-8 lg:col-8 md:order-1">
<h2 set:html="Instructions" class="mb-4" />
<ol class="list-decimal">
{instructions.map((bullet: string) => (
<li class="relative mb-2 pl-6 list-inside">
<span set:html={markdownify(bullet)} />
</li>
<div class="row mx-4">
{instructions.map((it: string, index: number) => (
<div class="row my-1">
<div class="col">
{index + 1}.{" "}{markdownify(it)}
</div>
<hr class="my-1">
</div>
))}
</ol>
</div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/components/DrinkCard.astro
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ const { title, image } = data.data;
/>
)
}
<div class="bg-theme-light bg-opacity-60 dark:bg-darkmode-theme-light dark:bg-opacity-60 rounded absolute bottom-0 px-2 py-1">
<h4 class="opacity-60 dark:opacity-60 font-normal">
<div class="bg-theme-light bg-opacity-50 dark:bg-darkmode-theme-light dark:bg-opacity-60 rounded absolute bottom-0 px-2 py-1">
<h4 class="opacity-70 dark:opacity-70 font-normal">
{title}
</h4>
</div>
Expand Down
14 changes: 7 additions & 7 deletions src/layouts/partials/BlogSidebar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ const { tags, categories, allCategories } = Astro.props;
<div class="lg:col-4">
<!-- categories -->
<div class="mb-8">
<h4 class="mb-2 text-center">
<a href="/blog/categories">Categories</a>
</h4>
<div class="rounded bg-theme-light p-8 dark:bg-darkmode-theme-light">
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
<h4 class="mb-2 text-center">
<a href="/blog/categories">Categories</a>
</h4>
<ul class="space-y-4">
{
categories.map((category: any) => {
Expand All @@ -34,10 +34,10 @@ const { tags, categories, allCategories } = Astro.props;
</div>
<!-- tags -->
<div class="mb-8">
<h4 class="mb-2 text-center">
<a href="/blog/tags">Tags</a>
</h4>
<div class="rounded bg-theme-light p-6 dark:bg-darkmode-theme-light">
<h4 class="mb-2 text-center">
<a href="/blog/tags">Tags</a>
</h4>
<ul>
{
tags.map((tag: any) => {
Expand Down

0 comments on commit 59df90e

Please sign in to comment.