fix: mobile responsive design (#2)

http-server-rs · Jul 10, 2023 · 5ffe6f0 · 5ffe6f0
1 parent aad0d15
commit 5ffe6f0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -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

diff --git a/src/lib/components/News.svelte b/src/lib/components/News.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
                 >