Estilo más retro

1 files changed, 17 insertions, 19 deletions

diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index e18aeea..59c9cf6 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -42,7 +42,7 @@ const schema = {
 
   <hr class="section-divider" />
   <h2>Entradas recientes del blog</h2>
-  <ul class="blog-list">
+  <section class="blog-list">
     {
       blogCollection.slice(0, 5).map((p) => {
         const date = Intl.DateTimeFormat(Astro.currentLocale, {
@@ -51,14 +51,14 @@ const schema = {
           year: "numeric",
         }).format(p.data.publishedAt);
         return (
-          <li class="blog-item">
+          <article class="blog-item">
             <time datetime={p.data.publishedAt.toISOString()}>{date}</time>
             <a href={`/blog/${p.id}/`}>{p.data.title}</a>
-          </li>
+          </article>
         );
       })
     }
-  </ul>
+  </section>
   <a href="/blog" class="cta-button">Ver todas las entradas</a>
 </Layout>
 
@@ -87,31 +87,29 @@ const schema = {
     margin: 0 0 2rem 0;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
   }
 
   .blog-item {
-    background: $lightAlt;
-    padding: 1rem 1.25rem;
-    border-radius: 0.5rem;
-
     time {
-      display: block;
-      font-size: 0.875rem;
-      color: hsl(209, 20%, 50%);
+      display: inline-block;
+      min-width: 12ch;
+      font-size: 0.75rem;
+      font-family: $monoFontStack;
+      color: gray;
       margin-bottom: 0.25rem;
       font-weight: 500;
     }
 
     a {
-      font-size: 1.125rem;
+      font-size: 1rem;
       font-weight: 600;
       text-decoration: none;
-      color: $accentDark;
+      color: blue;
       box-shadow: none !important;
 
       &:hover {
-        color: $accent;
+        color: orangered;
         box-shadow: none !important;
       }
     }
@@ -119,12 +117,12 @@ const schema = {
 
   .cta-button {
     display: inline-block;
-    padding: 0.75rem 1.5rem;
+    padding: 0.45rem 1rem;
     background: $accentDark;
     color: white !important;
     text-decoration: none;
-    border-radius: 0.5rem;
-    font-weight: 600;
+    border-radius: 0.25rem;
+    font-weight: 500;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
 
     &:hover {
@@ -133,9 +131,9 @@ const schema = {
     }
 
     &:focus {
+      background: $accent;
       outline: 3px solid $secondary;
       outline-offset: 2px;
-      background: $accent !important;
     }
   }
 </style>