Improve styles

1 files changed, 103 insertions, 13 deletions

diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index ca009a5..b1356ce 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -25,18 +25,23 @@ const schema = {
 
   <h1>Inicio</h1>
 
-  <p>
-    Te doy la bienvenida a mi web. Me llamo Ariel, y aquí encontrarás
-    información sobre mí y mis proyectos.
-  </p>
+  <div class="intro">
+    <p>
+      Te doy la bienvenida a mi web. Me llamo Ariel, y aquí encontrarás
+      información sobre mí y mis proyectos.
+    </p>
 
-  <p>
-    En mi blog comparto mis reflexiones, aprendizajes y experiencias sobre los
-    temas que me interesan, además de hablar ocasionalmente sobre tecnología y
-    desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono, pudiendo
-    plasmar mis ideas de forma clara y ordenada, y compartiéndolas con el mundo.
-  </p>
-  <ul>
+    <p>
+      En mi blog comparto mis reflexiones, aprendizajes y experiencias sobre los
+      temas que me interesan, además de hablar ocasionalmente sobre tecnología y
+      desarrollo. Disfruto escribiendo sobre lo que aprendo y reflexiono, pudiendo
+      plasmar mis ideas de forma clara y ordenada, y compartiéndolas con el mundo.
+    </p>
+  </div>
+
+  <hr class="section-divider" />
+
+  <ul class="blog-list">
     {
       blogCollection.slice(0, 5).map((p) => {
         const date = Intl.DateTimeFormat(Astro.currentLocale, {
@@ -45,7 +50,7 @@ const schema = {
           year: "numeric",
         }).format(p.data.publishedAt);
         return (
-          <li>
+          <li class="blog-item">
             <time datetime={p.data.publishedAt.toISOString()}>{date}</time>
             <a href={`/blog/${p.id}/`}>{p.data.title}</a>
           </li>
@@ -53,5 +58,90 @@ const schema = {
       })
     }
   </ul>
-  <a href="/blog">Ver todas las entradas</a>
+  <a href="/blog" class="cta-button">Ver todas las entradas</a>
 </Layout>
+
+<style lang="scss">
+  @use "../../styles/variables" as *;
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+  }
+
+  .intro {
+    line-height: 1.7;
+  }
+
+  .section-divider {
+    border: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin: 2rem 0;
+  }
+
+  .blog-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .blog-item {
+    background: $lightAlt;
+    padding: 1rem 1.25rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
+    }
+
+    time {
+      display: block;
+      font-size: 0.875rem;
+      color: hsl(209, 20%, 50%);
+      margin-bottom: 0.25rem;
+      font-weight: 500;
+    }
+
+    a {
+      font-size: 1.125rem;
+      font-weight: 600;
+      text-decoration: none;
+      color: $accentDark;
+      box-shadow: none !important;
+
+      &:hover {
+        color: $accent;
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .cta-button {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background: $accent;
+    color: white !important;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: $accentDark;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+    }
+
+    &:focus {
+      outline: 3px solid $secondary;
+      outline-offset: 2px;
+      background: $accentDark !important;
+    }
+  }
+</style>