fix: mobile responsive design (#2)

Author: dararod

bun.lockb

@@ -21,7 +21,7 @@
           <li>
             <Anchor
               href="https://discord.com/invite/qJgv2p9Ebf"
-              class="bg-discord-200! hover:bg-discord-400!"
+              class="text-discord-200 hover:text-discord-400 mb-0"
               variant={AnchorVariant.Custom}
               size={AnchorSize.Small}
               icon={Discord}>Discord</Anchor

src/lib/components/Header.svelte

@@ -47,10 +47,10 @@
               <h3 class="text-gray-800 text-lg">{entry.title}</h3>
               <p class="text-gray-700">{entry.body}</p>
             </article>
-            <footer class="text-gray-600 flex justify-between items-center">
-              <Anchor href={entry.url} size={AnchorSize.Small}>Read more</Anchor
-              >
-              <div class="flex space-x-4 items-center">
+            <footer class="text-gray-600 flex flex-col md:flex-row items-start md:items-center justify-between">
+                <Anchor class="text-left" href={entry.url} size={AnchorSize.Small}>Read more</Anchor
+                >
+              <div class="flex space-x-4 items-center md:justify-end justify-between md:w-max w-full">
                 <time class="text-sm" datetime={entry.date.toISOString()}
                   >{entry.date.toDateString()}</time
                 >