New retro design for most of the site

4 files changed, 29 insertions, 45 deletions

diff --git a/src/layouts/BlogListLayout.astro b/src/layouts/BlogListLayout.astro
index dbc7f34..749259e 100644
--- a/src/layouts/BlogListLayout.astro
+++ b/src/layouts/BlogListLayout.astro
@@ -248,10 +248,8 @@ const schema = {
 
   .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;
@@ -278,7 +276,6 @@ const schema = {
     font-weight: 600;
     font-family: v.$monoFontStack;
     cursor: pointer;
-    transition: all 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 
     &:hover {
@@ -297,7 +294,6 @@ const schema = {
 
   .post-section {
     margin-bottom: 3rem;
-    transition: opacity 0.3s ease;
 
     h2 {
       font-size: 1.75rem;
@@ -318,26 +314,19 @@ const schema = {
   }
 
   .post-item {
-    background: white;
+    background: v.$lightAlt;
     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;
@@ -372,7 +361,6 @@ const schema = {
     font-family: v.$monoFontStack;
     text-decoration: none;
     cursor: pointer;
-    transition: all 0.2s ease;
 
     &:hover {
       background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/BlogSingleLayout.astro b/src/layouts/BlogSingleLayout.astro
index 3e0c616..70b62c2 100644
--- a/src/layouts/BlogSingleLayout.astro
+++ b/src/layouts/BlogSingleLayout.astro
@@ -95,11 +95,9 @@ const schema = {
 
   small {
     display: block;
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
+    margin-bottom: 1.5rem;
     font-size: 0.95rem;
     color: hsl(209, 20%, 50%);
-    border-bottom: 2px solid rgba(0, 102, 204, 0.15);
   }
 
   time {
@@ -133,7 +131,6 @@ const schema = {
     font-family: v.$monoFontStack;
     text-decoration: none;
     box-shadow: none !important;
-    transition: all 0.2s ease;
 
     &:hover {
       background-color: rgba(0, 153, 255, 0.2);
diff --git a/src/layouts/HomePageLayout.astro b/src/layouts/HomePageLayout.astro
index b1356ce..e18aeea 100644
--- a/src/layouts/HomePageLayout.astro
+++ b/src/layouts/HomePageLayout.astro
@@ -34,13 +34,14 @@ const schema = {
     <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.
+      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" />
-
+  <h2>Entradas recientes del blog</h2>
   <ul class="blog-list">
     {
       blogCollection.slice(0, 5).map((p) => {
@@ -93,12 +94,6 @@ const schema = {
     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;
@@ -125,23 +120,22 @@ const schema = {
   .cta-button {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background: $accent;
+    background: $accentDark;
     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;
+      background: $accent;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
     }
 
     &:focus {
       outline: 3px solid $secondary;
       outline-offset: 2px;
-      background: $accentDark !important;
+      background: $accent !important;
     }
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e7b84ce..9e432bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -107,16 +107,13 @@ const { title, description, empty } = Astro.props;
 
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
 
-    background: linear-gradient(
-      to bottom,
-      #f0f8ff 0%,
-      #e6f3ff 6rem,
-      #d9edff 12rem,
-      #d9edff 88%,
-      #cce5ff 100%
-    );
+    background: #c3d9ff;
+    background-image:
+      radial-gradient(at 0% 0%, hsla(210,100%,90%,1) 0, transparent 50%),
+      radial-gradient(at 50% 0%, hsla(210,100%,85%,1) 0, transparent 50%),
+      radial-gradient(at 100% 0%, hsla(210,100%,80%,1) 0, transparent 50%);
+    background-attachment: fixed;
     color: $dark;
     line-height: 1.6;
   }
@@ -154,21 +151,29 @@ const { title, description, empty } = Astro.props;
 
   main {
     box-sizing: border-box;
-    margin-bottom: auto;
+    margin-top: 2rem;
+    margin-bottom: 3rem;
 
     align-self: center;
 
-    max-width: min(75ch, 90vw);
-    font-size: 1.125rem;
+    max-width: min(900px, 95vw);
+    width: 100%;
+    font-size: 1.1rem;
 
-    padding-block-end: 3rem;
+    padding: 2.5rem;
+    background: #ffffff;
+    border: 1px solid #b4c7e7;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
 
     p > code {
       word-break: break-word;
       font-family: $monoFontStack;
-
+      padding: 0.2rem 0.4rem;
+      border-radius: 4px;
+      border: 1px solid #ddd;
       color: $accentDark;
-      background-color: #f6f6f6;
+      background-color: #f8f8f8;
     }
 
     p.meta {