Improve styles

7 files changed, 264 insertions, 85 deletions

diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
index c654f27..f0ab104 100644
--- a/.github/workflows/production.yml
+++ b/.github/workflows/production.yml
@@ -49,7 +49,7 @@ jobs:
           tags: tag:ci
       - name: Wait for reachability
         run: |
-          until tailscale ping --until-direct=false ${{ secrets.TARGET_HOST }}; do
+          until tailscale ping --c=1 --until-direct=false ${{ secrets.TARGET_HOST }}; do
             echo "Waiting for Tailscale to connect..."
             sleep 2
           done
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..98d5297
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+    "svelteBracketNewLine": false
+}
\ No newline at end of file
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>
diff --git a/src/layouts/BlogSingleLayout.astro b/src/layouts/BlogSingleLayout.astro
index 8cbcd45..3e0c616 100644
--- a/src/layouts/BlogSingleLayout.astro
+++ b/src/layouts/BlogSingleLayout.astro
@@ -86,13 +86,35 @@ const schema = {
   @use "../../styles/variables" as v;
   @use "sass:color";
 
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+  }
+
+  small {
+    display: block;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    font-size: 0.95rem;
+    color: hsl(209, 20%, 50%);
+    border-bottom: 2px solid rgba(0, 102, 204, 0.15);
+  }
+
+  time {
+    font-style: italic;
+    font-weight: 500;
+  }
+
   .tags {
     display: inline-flex;
     flex-direction: row;
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 0.75rem;
+    gap: 0.5rem;
+    margin-left: 0.25rem;
   }
 
   .tags li {
@@ -100,36 +122,30 @@ const schema = {
   }
 
   .tags a {
-    // Estilo de enlace normal, siguiendo los estilos predefinidos en Layout.astro
+    display: inline-block;
+    padding: 0.25rem 0.625rem;
+    background-color: rgba(0, 153, 255, 0.1);
     color: v.$accentDark;
-    font-size: 0.90rem;
+    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;
-    box-shadow: 0 1px v.$accent;
+    box-shadow: none !important;
     transition: all 0.2s ease;
 
     &:hover {
-      box-shadow: 0 2px v.$accentDark;
+      background-color: rgba(0, 153, 255, 0.2);
+      border-color: v.$accent;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
     }
 
     &:focus {
-      color: v.$accentDark;
-      outline: none;
-      background-color: v.$secondary;
-      box-shadow: 0 4px #0b0c0c;
+      outline: 3px solid v.$accent;
+      outline-offset: 2px;
+      background-color: rgba(0, 153, 255, 0.2);
+      box-shadow: none !important;
     }
   }
-
-  /* Estilos para la información de la publicación */
-  small {
-    display: block;
-    margin-top: -1rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.90rem;
-    color: color.adjust(v.$dark, $lightness: 30%);
-  }
-
-  time {
-    font-style: italic;
-  }
 </style>
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>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2a12302..46720ba 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -111,13 +111,14 @@ const { title, description, empty } = Astro.props;
 
     background: linear-gradient(
       to bottom,
-      #ffffff 0%,
-      color.adjust($background, $lightness: -2%) 6rem,
-      color.adjust($background, $lightness: -5%) 12rem,
-      color.adjust($background, $lightness: -5%) 88%,
-      color.adjust($backgroundDarker, $lightness: -5%) 100%
+      #f0f8ff 0%,
+      #e6f3ff 6rem,
+      #d9edff 12rem,
+      #d9edff 88%,
+      #cce5ff 100%
     );
     color: $dark;
+    line-height: 1.6;
   }
 
   a {
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 5fc8010..77c8166 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -84,10 +84,21 @@ import t from "../i18n/es.json";
         font-weight: 700;
         font-variation-settings: "wdth" 87.5,"wght" 700,"GRAD" 150;
         text-decoration: none;
-        color: $accent;
+        background: linear-gradient(135deg, #0066cc 0%, #0099ff 50%, #00ccff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        transition: filter 0.2s ease;
+
+        &:hover {
+          filter: brightness(1.1);
+        }
 
         .brand-accent {
-          color: $accentDark;
+          background: linear-gradient(135deg, #0052a3 0%, #0066cc 50%, #0080ff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
         }
       }
     }