repair ingredient layout

reednel · Aug 19, 2023 · 59df90e · 59df90e
1 parent e717c0e
commit 59df90e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 34 deletions.
diff --git a/src/layouts/DrinkSingle.astro b/src/layouts/DrinkSingle.astro
@@ -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: {
@@ -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>

diff --git a/src/layouts/components/DrinkCard.astro b/src/layouts/components/DrinkCard.astro
@@ -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>

diff --git a/src/layouts/partials/BlogSidebar.astro b/src/layouts/partials/BlogSidebar.astro
@@ -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) => {
@@ -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) => {