feat: fine tune the design of the website (santoshyadavdev#31)

this fine-tuning includes mostly changes
to the tailwind classes applied.
I also added a footer giving credit to Santosh for
creating this awesome project!

Author: goetzrobin

src/components/BlogCard.astro

@@ -17,15 +17,15 @@ url = url + "/";
 ---
 
 <li
-  class="flex flex-col gap-2 sm:grid-cols-4 leading-relaxed rounded-2xl border-zinc-700 dark:text-zinc-400"
+  class="flex flex-col leading-relaxed rounded-2xl border border-zinc-900/10 dark:border-zinc-700/40 hover:dark:bg-zinc-800/20 hover:bg-zinc-200/20 dark:text-zinc-400"
 >
   <a
-    class="col-span-3 flex flex-col gap-2 sm:gap-4 p-5 my-2 hover:dark:bg-zinc-800 hover:bg-zinc-200 rounded-lg transition-colors shadow-md"
+    class="flex flex-col gap-2 sm:gap-4 pt-5 px-5 pb-8"
     href={url}
   >
     <time class="shrink-0 text-base sm:hidden">{shortDate}</time>
     <span class="flex items-center justify-between mb-1">
-      <h2 class="text-xl text-black dark:text-white">{title}</h2>
+      <h2 class="text-xl font-medium text-black dark:text-white">{title}</h2>
       <time class="shrink-0 text-base hidden sm:block">{shortDate}</time>
     </span>
     <TagsLine tags={tags} />

src/components/Footer.astro

@@ -0,0 +1,3 @@
+<footer class="mx-auto text-sm px-8 pt-8 pb-12 text-gray-500 dark:text-gray-400 max-w-7xl text-right">
+An open source project created by Santhosh Yadav.
+</footer>

src/components/Header.astro

@@ -14,26 +14,26 @@ const navItems = [
 
 ---
 
-<header class="dark:bg-zinc-900 bg-white max-w-7xl m-auto transition-colors">
+<header class="dark:bg-zinc-900 bg-white max-w-7xl m-auto">
   <a href="/" class="text-lg sm:text-xl text-black dark:text-zinc-300 hover:dark:text-white transition-colors absolute m-8">Angular Snippets</a>
   <nav class="p-8 hidden sm:flex justify-end">
-    <ul class="flex justify-end items-center m-0 space-x-1">
+    <ul class="flex justify-end items-center m-0 space-x-2">
       {
         navItems.map((item) => (
           <li>
-            <a href ={item.href} class="hover:bg-zinc-300 dark:hover:bg-zinc-700 dark:text-zinc-300 text-black p-2 transition-colors rounded-lg">
+            <a href ={item.href} class="hover:bg-zinc-300/60 dark:hover:bg-zinc-700/30 dark:text-zinc-300 text-black px-2 py-1 transition-colors rounded-lg">
               {item.name}
             </a>
           </li>
         ))
       }
     </ul>
-    <a aria-label="github" class="pointer ml-2 mr-4" href="https://github.com/santoshyadavdev/angular-snipptes" target="_blank">
-      <Icon name="simple-icons:github" class="w-6 dark:text-white text-black" />
+    <a aria-label="github" class="dark:opacity-80 dark:hover:opacity-100 hover:opacity-90 pointer mx-6" href="https://github.com/santoshyadavdev/angular-snipptes" target="_blank">
+      <Icon name="simple-icons:github" class="w-5 dark:text-white text-black" />
     </a>
-    <button aria-label="theme toggle" class="pointer theme-toggle">
-      <Icon name="eva:moon-outline" class="w-6 dark:text-white text-black transition-colors dark:hidden" />
-      <Icon name="akar-icons:sun" class="w-6 dark:text-white text-black transition-colors hidden dark:block" />
+    <button aria-label="theme toggle" class="dark:opacity-80 dark:hover:opacity-100 hover:opacity-90 pointer theme-toggle">
+      <Icon name="eva:moon-outline" class="w-5 dark:text-white text-black transition-colors dark:hidden" />
+      <Icon name="akar-icons:sun" class="w-5 dark:text-white text-black transition-colors hidden dark:block" />
     </button>
   </nav>
   <nav class="p-2 flex sm:hidden justify-end">
@@ -51,12 +51,12 @@ const navItems = [
 
 </header>
 
-<header class="nav-menu hidden bg-white dark:bg-zinc-900">
+<header class="absolute border-b border-gray-900/10 dark:border-gray-700/40 t-0 inset-x-0 nav-menu hidden bg-white dark:bg-zinc-900">
   {
     (
-        <nav class="m-8 flex flex-col inline-flex space-y-1 ">
+        <nav class="w-full p-8 pt-0 flex flex-col inline-flex space-y-1 ">
           {navItems.map((navbar) => (
-              <a href={navbar.href} class="hover:bg-zinc-300 dark:hover:bg-zinc-700 dark:text-zinc-300 text-black p-2 transition-colors rounded-lg">
+              <a href={navbar.href} class="w-full hover:bg-zinc-300 dark:hover:bg-zinc-700 dark:text-zinc-300 text-black p-2 transition-colors rounded-lg">
                 {navbar.name}
               </a>
           ))}

src/components/TagsLine.astro

@@ -5,7 +5,7 @@ const { tags } = Astro.props;
 <div class="flex text-sm gap-2">
   {
     tags.map((tag) => (
-      <span class="bg-slate-800 px-2 py-1 rounded text-white dark:bg-slate-400 ">
+      <span class="bg-zinc-200/10 px-2 py-1 rounded-lg border border-zinc-900/10 dark:border-zinc-700/40 dark:bg-zinc-800">
         {tag}
       </span>
     ))

src/layouts/BlogLayout.astro

@@ -2,6 +2,7 @@
 import "@fontsource/inter/variable.css";
 import "@fontsource/fira-code";
 import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
 import TagsLine from "@components/TagsLine.astro";
 
 let { pubDate } = Astro.props.content;
@@ -77,19 +78,19 @@ const canonicalURL = new URL(Astro.url).href;
     <script src="@scripts/main.js"></script>
   </head>
   <body
-    class="font-inter dark:bg-zinc-900 text-lg sm:text-xl dark:text-white transition-colors selection:bg-sky-600/60 scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-300 dark:scrollbar-thumb-zinc-600 dark:scrollbar-track-zinc-800"
+    class="font-inter dark:bg-zinc-900 dark:text-white selection:bg-sky-600/60 scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-300 dark:scrollbar-thumb-zinc-600 dark:scrollbar-track-zinc-800"
   >
     <Header />
-    <main class="m-auto p-6 max-w-7xl">
+    <main class="mx-auto !max-w-screen-lg m-auto p-6 max-w-7xl">
       <section
-        class="prose sm:prose-xl dark:text-slate-200 prose-a:dark:text-blue-400 prose-a:no-underline prose-pre:scrollbar-thin prose-pre:scrollbar-thumb-zinc-400 prose-pre:scrollbar-track-zinc-300 prose-pre:dark:scrollbar-thumb-zinc-500 prose-pre:dark:scrollbar-track-zinc-700 dark:bg-zinc-900 hover:prose-a:underline prose-a:text-blue-700 dark:prose-invert prose-a:underline-offset-2 dark:bg-inherit px-3"
+        class="dark:text-slate-200 dark:bg-inherit px-3"
       >
         <header class="mb-5">
-          <h1 class="m-0 !text-4xl mb-7 dark:text-white">
+          <h1 class="font-bold text-4xl mb-4 dark:text-white">
             {frontmatter.title}
           </h1>
           <nav
-            class="flex flex-col sm:flex-row sm:space-x-3 text-base dark:text-zinc-400"
+            class="flex flex-col sm:flex-row sm:space-x-3 text-base text-zinc-600 dark:text-zinc-400"
           >
             <time datetime={frontmatter.pubDate} class="mb-3 sm:mb-0">
               {thisDate}
@@ -98,18 +99,19 @@ const canonicalURL = new URL(Astro.url).href;
               {frontmatter.contributedBy}
             </span>
           </nav>
-          <div class="mys-2">
+          <div class="my-2">
             <TagsLine tags={frontmatter.tags} />
           </div>
         </header>
-        <article>
+        <article class="mx-auto !max-w-screen-lg prose prose-zinc sm:prose-lg prose-img:mx-auto prose-a:dark:text-blue-400 prose-a:no-underline prose-pre:scrollbar-thin prose-pre:scrollbar-thumb-zinc-400 prose-pre:scrollbar-track-zinc-300 prose-pre:dark:scrollbar-thumb-zinc-500 prose-pre:dark:scrollbar-track-zinc-700 dark:bg-zinc-900 hover:prose-a:underline prose-a:text-blue-700 dark:prose-invert prose-a:underline-offset-2">
           <slot />
         </article>
-        <footer class="flex flex-row justify-between mt-16 text-lg">
-          <a href="/snippets" class="dark:text-blue-400 text-blue-600"
+        <section class="flex flex-row justify-between my-16">
+          <a href="/snippets" class="hover:underline"
             >Back to snippets</a
           >
-        </footer>
+        </section>
+        <Footer />
       </section>
     </main>
   </body>

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import "@fontsource/inter/variable.css";
 import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
 
 export interface Props {
   title?: string;
@@ -61,11 +62,12 @@ const canonicalURL = new URL(Astro.url).href;
 
   </head>
   <body
-    class="font-inter text-lg sm:text-xl dark:bg-zinc-900 dark:text-white transition-colors selection:bg-sky-600/60 scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-300 dark:scrollbar-thumb-zinc-600 dark:scrollbar-track-zinc-800"
+    class="font-inter dark:bg-zinc-900 dark:text-white selection:bg-sky-600/60 scrollbar-thin scrollbar-thumb-zinc-400 scrollbar-track-zinc-300 dark:scrollbar-thumb-zinc-600 dark:scrollbar-track-zinc-800"
   >
     <Header />
     <main class="m-auto px-8 max-w-7xl">
       <slot />
     </main>
+    <Footer />
   </body>
 </html>

src/pages/index.astro

@@ -18,33 +18,33 @@ blogs = blogs.sort(
 ---
 
 <Layout {...metadata}>
-  <section class="flex flex-col sm:flex-row justify-evenly items-center py-14">
-    <div class="w-32 m-5 md:m-10 my-10">
-      <Icon class="h-8 md:h-12" name="simple-icons:angular" />
+  <section class="flex flex-col sm:flex-row justify-between items-center sm:py-14">
+    <div class="flex items-center justify-center sm:w-1/2 m-5 md:m-10 my-10">
+      <Icon class="h-12 lg:h-20" name="simple-icons:angular" />
     </div>
     <header class="max-w-xl sm:order-first">
       <h1
         class="text-2xl sm:text-3xl font-bold mb-7 md:mb-5 text-center sm:text-left"
       >
-        Welcome to Angular Snippets, add a snippet and help community
+        Welcome to Angular Snippets, add a snippet and help the community
       </h1>
-      <p class="text-black dark:text-zinc-300 mb-5">
+      <p class="mb-4 text-base text-zinc-700 dark:text-zinc-300">
         There are some code snippets which you may have created and want to
         share with the world!
       </p>
-      <p class="text-black dark:text-zinc-300">
+      <p class="text-zinc-700 dark:text-zinc-300">
         This is the place to share your code snippets with the world. You can
         add your own snippets and help the community.
       </p>
     </header>
   </section>
   <section class="py-14">
-    <h1 class="text-2xl sm:text-3xl font-bold mb-5">Recent Snippets</h1>
-    <p class="text-black dark:text-zinc-300 mb-2">
+    <h1 class="text-xl sm:text-2xl font-bold mb-2">Recent Snippets</h1>
+    <p class="text-zinc-700 dark:text-zinc-300 mb-4">
       Looking for all snippets? Click the "snippets" or the "Show more snippets"
       link down below.
     </p>
-    <ul class="flex flex-col justify-center py-5">
+    <ul class="flex flex-col justify-center gap-4 sm:gap-6 pb-4 sm:pb-6">
       {
         blogs.length >= 1 &&
           blogs
@@ -63,7 +63,7 @@ blogs = blogs.sort(
     </ul>
     <div class="text-center dark:text-zinc-300 text-zinc-200 mt-5">
       <a
-        class="flex items-center dark:bg-zinc-800 bg-zinc-200 dark:ring-zinc-700 hover:ring-2 ring-zinc-300 transition-all dark:text-white flex-col m-2 p-2 rounded-xl text-black"
+        class="text-base flex items-center dark:bg-zinc-800 bg-zinc-200/30 dark:ring-zinc-700 hover:ring-2 ring-zinc-300 transition-all dark:text-white flex-col m-2 p-2 rounded-xl text-black"
         href="/snippets">Show more snippets</a
       >
     </div>

src/pages/snippets.astro

@@ -14,13 +14,13 @@ blogs = blogs.sort(
 <Layout title="Snippets" description="hello world">
   <section class="flex flex-col mt-8">
     <h1 class="text-2xl sm:text-3xl font-bold mb-5">Snippets</h1>
-    <h2 class="text-black dark:text-zinc-300 mb-5">
+    <h2 class="text-zinc-700 dark:text-zinc-300 mb-5">
       Find and share useful code snippets for Angular. Snippets are small,
       reusable code that you can use to solve common problems.
     </h2>
   </section>
   <section>
-    <ul class="flex flex-col justify-center mb-8">
+    <ul class="flex flex-col gap-4 sm:gap-6 justify-center mb-12">
       {
         blogs.map((post) => {
           return (