From befd417f7a19b37769b574f79b4542e6823ec240 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Carlos=20Manzanero=20Dom=C3=ADnguez?=
 <juancmandev@protonmail.com>
Date: Mon, 1 Jul 2024 22:07:06 -0600
Subject: [PATCH] styles improvements

---
 src/components/footer.tsx | 58 ++++++++++++++++++-------------------
 src/layouts/Layout.astro  |  2 +-
 src/pages/index.astro     | 60 +++++++++++++++++++--------------------
 3 files changed, 58 insertions(+), 62 deletions(-)
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 07d85df..cb83f62 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -4,8 +4,8 @@ import formatDate from "@/utils/format-date";
 
 export default function Footer() {
   return (
-    <footer className="border-t border-secondary px-6 py-10 text-center text-sm font-light md:px-16">
-      <section className="space-y-2">
+    <footer className="border-t border-secondary px-6 py-10 text-center text-sm md:px-16 prose prose-invert">
+      <section>
         <p>
           Developed by{" "}
           <strong className="font-bold text-primary">juancmandev</strong>
@@ -23,36 +23,32 @@ export default function Footer() {
             </a>
           </Button>
         </p>
-        <p>Last built {formatDate(new Date())}</p>
+        <p>Last built {formatDate(new Date())}.</p>
+      </section>
+      <section className="w-max mx-auto flex items-center gap-12">
+        <Button
+          asChild
+          size={null}
+          variant="link"
+          className="flex flex-col justify-center"
+        >
+          <a target="_blank" href="https://github.com/juancmandev/website">
+            <Code className="w-6" />
+            Source Code
+          </a>
+        </Button>
+        <Button
+          asChild
+          size={null}
+          variant="link"
+          className="flex flex-col justify-center"
+        >
+          <a target="_blank" href="https://www.juancman.dev/rss.xml">
+            <RssIcon className="w-6" />
+            RSS feed
+          </a>
+        </Button>
       </section>
-      <ul className="mx-auto mt-4 flex max-w-[200px] justify-between">
-        <li>
-          <Button
-            asChild
-            size={null}
-            variant="link"
-            className="flex flex-col justify-center"
-          >
-            <a target="_blank" href="https://github.com/juancmandev/website">
-              <Code className="w-6" />
-              Source Code
-            </a>
-          </Button>
-        </li>
-        <li>
-          <Button
-            asChild
-            size={null}
-            variant="link"
-            className="flex flex-col justify-center"
-          >
-            <a target="_blank" href="https://www.juancman.dev/rss.xml">
-              <RssIcon className="w-6" />
-              RSS feed
-            </a>
-          </Button>
-        </li>
-      </ul>
     </footer>
   );
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f382868..4729509 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -31,7 +31,7 @@ const { title, description, lang } = Astro.props;
     </head>
     <body>
         <Navbar />
-        <main class="px-4 min-h-screen max-w-[65ch] py-32 mx-auto">
+        <main class="px-4 min-h-screen max-w-[65ch] py-28 mx-auto">
             <slot />
         </main>
         <Footer />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 87719d6..08539cc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -17,32 +17,28 @@ sortContentByDate(allProjects);
 const last3Projects = allProjects.slice(0, 3);
 ---
 
-<Layout title="juancmandev" description="Welcome to my domain, stranger.">
-    <div class="space-y-16">
-        <section class="flex flex-col items-start gap-5">
-            <div class="space-y-1">
-                <h1 class="text-3xl font-bold text-primary">
-                    Welcome to my domain, stranger.
-                </h1>
-                <h2 class="text-xl">
-                    I am <span class="font-semibold text-primary"
-                        >juancmandev</span
-                    >.
-                </h2>
-                <p class="text-lg font-light">
-                    I like computers, and all stuff related to technology.
-                </p>
-                <p class="text-lg font-light">
-                    Take a seat, drink some tea, and enjoy your stay.
-                </p>
-            </div>
-        </section>
+<Layout
+    title="juancmandev"
+    description="Welcome to my domain, stranger. I am juancmandev, web developer, Linux enthusiast, and privacy defender."
+>
+    <div class="prose prose-invert">
+        <h1 class="text-primary">Welcome to my domain, stranger.</h1>
+        <p>
+            I am <span class="font-semibold text-primary">juancmandev</span>, <strong
+                >Web Developer</strong
+            >, <strong>Linux</strong> enthusiast, and <strong>privacy</strong> defender.
+        </p>
+        <p>
+            This is my <strong>website</strong>, a piece of the Internet that I
+            could call my <strong>home base</strong>. Here, I share my knowledge
+            about my career and talk about other topics.
+        </p>
         <section>
-            <h2 class="text-3xl">Latest posts</h2>
-            <ul class="mt-4 flex flex-col gap-4">
+            <h2>Latest posts</h2>
+            <ul class="mt-0 p-0 list-none">
                 {
                     last3Blogs.map((blogpost: any) => (
-                        <li>
+                        <li class="p-0">
                             <PostItem
                                 type="blog"
                                 slug={blogpost.slug}
@@ -53,16 +49,18 @@ const last3Projects = allProjects.slice(0, 3);
                     ))
                 }
             </ul>
-            <LinkButton variant="secondary" href="/blog" className="mt-8"
-                >More posts</LinkButton
+            <LinkButton
+                variant="secondary"
+                href="/blog"
+                className="no-underline">More posts</LinkButton
             >
         </section>
         <section>
-            <h2 class="text-3xl">Latest projects</h2>
-            <ul class="mt-4 flex flex-col gap-4">
+            <h2>Latest projects</h2>
+            <ul class="mt-0 p-0 list-none">
                 {
                     last3Projects.map((project: any) => (
-                        <li>
+                        <li class="p-0">
                             <PostItem
                                 type="portfolio"
                                 slug={project.slug}
@@ -73,8 +71,10 @@ const last3Projects = allProjects.slice(0, 3);
                     ))
                 }
             </ul>
-            <LinkButton variant="secondary" href="/portfolio" className="mt-8"
-                >More projects</LinkButton
+            <LinkButton
+                variant="secondary"
+                href="/portfolio"
+                className="no-underline">More projects</LinkButton
             >
         </section>
     </div>
