Merge pull request #64 from reednel/develop

quality of life

src/config/menu.json

@@ -23,6 +23,10 @@
     {
       "name": "Drinks",
       "url": "/drinks"
+    },
+    {
+      "name": "Food",
+      "url": "/food"
     }
   ]
 }

src/layouts/FoodSingle.astro

@@ -68,7 +68,7 @@ const { ingredients, instructions, notes }: Recipe = post.data;
                 {servings && (
                   <div class="m-4">
                     <FaUtensils className={"mr-2 -mt-1 inline-block"} />
-                    {servings + " servings"}
+                    {servings === 1 ? "1 serving" : servings + " servings"}
                   </div>
                 )}
                 <!-- Diet -->
@@ -94,7 +94,7 @@ const { ingredients, instructions, notes }: Recipe = post.data;
             <div class="row items-center justify-between">
               <div class="md:col-6 lg:col-6 md:order-1">
                 <h2 set:html="Ingredients" class="mb-4" />
-                <div class="row mx-4">
+                <div class="row mx-2 md:mx-4">
                   {
                     ingredients.list.map((it: string, index: number) => (
                       <div class="row my-1">

src/layouts/components/ThemeSwitcher.astro

@@ -16,26 +16,25 @@ const { className }: { className?: string } = Astro.props;
         <span class="sr-only">theme switcher</span>
         <span>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-100 dark:opacity-0"
-            viewBox="0 0 56 56"
-            fill="#fff"
-            height="16"
-            width="16"
+            class="absolute z-10 opacity-100 dark:opacity-0"
+            viewBox="0 0 24 24"
+            height="21"
+            width="21"
           >
-            <path d="M30 4.6c0-1-.9-2-2-2a2 2 0 0 0-2 2v5c0 1 .9 2 2 2s2-1 2-2Zm9.6 9a2 2 0 0 0 0 2.8c.8.8 2 .8 2.9 0L46 13a2 2 0 0 0 0-2.9 2 2 0 0 0-3 0Zm-26 2.8c.7.8 2 .8 2.8 0 .8-.7.8-2 0-2.9L13 10c-.7-.7-2-.8-2.9 0-.7.8-.7 2.1 0 3ZM28 16a12 12 0 0 0-12 12 12 12 0 0 0 12 12 12 12 0 0 0 12-12 12 12 0 0 0-12-12Zm23.3 14c1.1 0 2-.9 2-2s-.9-2-2-2h-4.9a2 2 0 0 0-2 2c0 1.1 1 2 2 2ZM4.7 26a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4.9c1 0 2-.9 2-2s-1-2-2-2Zm37.8 13.6a2 2 0 0 0-3 0 2 2 0 0 0 0 2.9l3.6 3.5a2 2 0 0 0 2.9 0c.8-.8.8-2.1 0-3ZM10 43.1a2 2 0 0 0 0 2.9c.8.7 2.1.8 3 0l3.4-3.5c.8-.8.8-2.1 0-2.9-.8-.8-2-.8-2.9 0Zm20 3.4c0-1.1-.9-2-2-2a2 2 0 0 0-2 2v4.9c0 1 .9 2 2 2s2-1 2-2Z" />
+            <path
+              fill="#000"
+              d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"
+            />
           </svg>
           <svg
-            class="absolute left-[4px] top-[4px] z-10 opacity-0 dark:opacity-100"
+            class="absolute z-10 opacity-0 dark:opacity-100"
             viewBox="0 0 24 24"
-            fill="none"
-            height="16"
-            width="16"
+            height="21"
+            width="21"
           >
             <path
-              fill="#000"
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M8.2 2.2c1-.4 2 .6 1.6 1.5-1 3-.4 6.4 1.8 8.7a8.4 8.4 0 0 0 8.7 1.8c1-.3 2 .5 1.5 1.5v.1a10.3 10.3 0 0 1-9.4 6.2A10.3 10.3 0 0 1 3.2 6.7c1-2 2.9-3.5 4.9-4.4Z"
+              fill="#fff"
+              d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"
             />
           </svg>
         </span>

src/pages/conversation.astro

@@ -1,6 +1,5 @@
 ---
 import Base from "@/layouts/Base.astro";
-import { markdownify } from "@/lib/utils/textConverter";
 import PageHeader from "@/components/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
@@ -15,7 +14,7 @@ const { title, meta_title, cards } = conversation_page.data;
   <PageHeader title={title} />
   <div class="container my-16"> 
     <div class="row justify-center">
-      <div class="col-10">
+      <div class="col md:col-10">
         <!-- <div class="text-center mt-8">
           <button class="shuffle">Shuffle Cards</button>
         </div> -->
@@ -24,7 +23,7 @@ const { title, meta_title, cards } = conversation_page.data;
             {
               cards.map((card: string) => (
                 <div class="mb-4 md:mb-8 sm:col-6 md:col-4">
-                  <div class="min-h-full block border border-light bg-transparent text-light rounded-sm dark:text-darkmode-light dark:border-darkmode-light flex items-center justify-center hover:scale-110 transition-transform duration-500">
+                  <div class="min-h-full border border-light bg-transparent text-light rounded-sm dark:text-darkmode-light dark:border-darkmode-light flex items-center justify-center hover:scale-105 lg:hover:scale-110 transition-transform duration-500">
                     <div class="m-4 bg-body dark:bg-darkmode-body text-center">
                       <p class="align-middle">{ card }</p>
                     </div>
@@ -38,7 +37,7 @@ const { title, meta_title, cards } = conversation_page.data;
     </div>
   </div>
 
-  <script>
+  <!-- <script>
     function shuffleCards(cards) {
       for (let i = cards.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
@@ -62,6 +61,6 @@ const { title, meta_title, cards } = conversation_page.data;
       
       });
     });
-  </script>
+  </script> -->
 
 </Base>

src/styles/navigation.scss

@@ -60,14 +60,14 @@ input#nav-toggle:checked ~ #nav-menu {
   @apply inline-flex;
 
   label {
-    @apply relative inline-block h-4 w-6 cursor-pointer rounded-2xl bg-border;
+    @apply relative inline-block h-4 w-6 cursor-pointer;
   }
 
   input {
     @apply absolute opacity-0;
   }
 
   span {
-    @apply absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full bg-dark transition-all duration-300 dark:bg-white;
+    @apply absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full hover:rotate-12 transition-all duration-300;
   }
 }