Improve styles

1 files changed, 100 insertions, 42 deletions

diff --git a/src/layouts/BlogListLayout.astro b/src/layouts/BlogListLayout.astro
index aa57b2c..4529e33 100644
--- a/src/layouts/BlogListLayout.astro
+++ b/src/layouts/BlogListLayout.astro
@@ -232,39 +232,114 @@ const schema = {
   @use "../../styles/variables" as v;
   @use "sass:color";
 
-  .tags-container {
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+
+  > p {
+    line-height: 1.7;
     margin-bottom: 2rem;
   }
 
+  .tags-container {
+    margin-bottom: 2.5rem;
+    padding: 1.5rem;
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-top: 0;
+      margin-bottom: 1rem;
+      color: v.$accentDark;
+    }
+  }
+
   .tag-filter {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
+    gap: 0.625rem;
   }
 
   .tag-button {
-    padding: 0.25rem 0.6rem;
+    padding: 0.5rem 1rem;
     background-color: v.$light;
-    color: v.$accent;
-    border: 1px solid v.$accent;
-    border-radius: 1.5rem;
-    font-size: 0.90rem;
+    color: v.$accentDark;
+    border: 2px solid rgba(0, 102, 204, 0.2);
+    border-radius: 2rem;
+    font-size: 0.9rem;
+    font-weight: 600;
     font-family: v.$monoFontStack;
     cursor: pointer;
     transition: all 0.2s ease;
-    box-shadow: v.$shadow;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 
     &:hover {
       background-color: color.adjust(v.$accent, $lightness: 45%);
-      color: v.$accentDark;
-      transform: translateY(-1px);
+      border-color: v.$accent;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
     }
 
     &.active {
-      background-color: v.$accent;
-      color: v.$lightAlt;
-      border-color: v.$accentDark;
+      background: linear-gradient(135deg, #0066cc 0%, #0099ff 100%);
+      color: white;
+      border-color: v.$accent;
+      box-shadow: 0 2px 6px rgba(0, 102, 204, 0.3);
+    }
+  }
+
+  .post-section {
+    margin-bottom: 3rem;
+    transition: opacity 0.3s ease;
+
+    h2 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      margin-bottom: 1.25rem;
+      color: v.$dark;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid rgba(0, 102, 204, 0.15);
+    }
+
+    > ul {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+
+  .post-item {
+    background: white;
+    padding: 1.25rem 1.5rem;
+    border-radius: 0.625rem;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+    transition: all 0.25s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    &:hover {
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
+    }
+
+    > a {
+      font-size: 1.2rem;
+      font-weight: 600;
+      text-decoration: none;
+      color: v.$accentDark;
+      box-shadow: none !important;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: v.$accent;
+        box-shadow: none !important;
+      }
     }
   }
 
@@ -274,8 +349,8 @@ const schema = {
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 0.25rem;
-    margin-left: 0.5rem;
+    gap: 0.5rem;
+    flex-wrap: wrap;
   }
 
   .post-tags li {
@@ -284,43 +359,26 @@ const schema = {
 
   .tag-link {
     display: inline-block;
-    padding: 0.1rem 0.4rem;
-    background-color: color.adjust(v.$background, $lightness: -3%);
+    padding: 0.25rem 0.625rem;
+    background-color: rgba(0, 153, 255, 0.1);
     color: v.$accentDark;
-    border: none;
-    border-radius: 1rem;
-    font-size: 0.75rem;
+    border: 1px solid rgba(0, 102, 204, 0.2);
+    border-radius: 1.25rem;
+    font-size: 0.8rem;
+    font-weight: 500;
     font-family: v.$monoFontStack;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.2s ease;
 
     &:hover {
-      background-color: color.adjust(v.$accent, $lightness: 45%);
-      color: v.$accentDark;
-      transform: translateY(-1px);
+      background-color: rgba(0, 153, 255, 0.2);
+      border-color: v.$accent;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
   }
 
-  /* Efecto de transición para el filtrado */
-  .post-item {
-    transition: all 0.3s ease;
-  }
-
-  .post-section {
-    transition: opacity 0.3s ease;
-  }
-
   #blog-posts {
     min-height: 200px;
   }
-
-  /* Mejora el aspecto de los enlaces de posts */
-  .post-item {
-    margin-bottom: 0.5rem;
-
-    a {
-      font-weight: 500;
-    }
-  }
 </style>