Estilo más retro

6 files changed, 120 insertions, 100 deletions

diff --git a/src/layouts/BlogListLayout.astro b/src/layouts/BlogListLayout.astro
index 749259e..cb33a67 100644
--- a/src/layouts/BlogListLayout.astro
+++ b/src/layouts/BlogListLayout.astro
@@ -96,7 +96,6 @@ const schema = {
               const tagsAttribute = postTags.join(',');
               return (
                 <li class="post-item" data-tags={tagsAttribute}>
-                  <a href={`/blog/${post.id}/`}>{post.data.title}</a>
                   {postTags.length > 0 && (
                     <ul class="post-tags">
                       {postTags.map((tag: string) => (
@@ -108,6 +107,7 @@ const schema = {
                       ))}
                     </ul>
                   )}
+                  <a href={`/blog/${post.id}/`}>{post.data.title}</a>
                 </li>
               );
             })}
@@ -250,14 +250,6 @@ const schema = {
     margin-bottom: 2.5rem;
     background: white;
     border-radius: 0.75rem;
-
-    h2 {
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-top: 0;
-      margin-bottom: 1rem;
-      color: v.$accentDark;
-    }
   }
 
   .tag-filter {
@@ -295,41 +287,26 @@ const schema = {
   .post-section {
     margin-bottom: 3rem;
 
-    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;
+      margin: 0 0 2rem 0;
       display: flex;
       flex-direction: column;
-      gap: 1rem;
+      gap: 0.5rem;
     }
   }
 
   .post-item {
-    background: v.$lightAlt;
-    padding: 1.25rem 1.5rem;
-    border-radius: 0.625rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-
     > a {
-      font-size: 1.2rem;
+      font-size: 1rem;
       font-weight: 600;
       text-decoration: none;
-      color: v.$accentDark;
+      color: blue;
       box-shadow: none !important;
 
       &:hover {
-        color: v.$accent;
+        color: orangered;
         box-shadow: none !important;
       }
     }
@@ -345,18 +322,13 @@ const schema = {
     flex-wrap: wrap;
   }
 
-  .post-tags li {
-    display: inline;
-  }
-
   .tag-link {
     display: inline-block;
-    padding: 0.25rem 0.625rem;
+    padding: 0.15rem 0.25rem;
     background-color: rgba(0, 153, 255, 0.1);
     color: v.$accentDark;
-    border: 1px solid rgba(0, 102, 204, 0.2);
-    border-radius: 1.25rem;
-    font-size: 0.8rem;
+    border: none;
+    font-size: 0.82rem;
     font-weight: 500;
     font-family: v.$monoFontStack;
     text-decoration: none;
@@ -368,8 +340,4 @@ const schema = {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
   }
-
-  #blog-posts {
-    min-height: 200px;
-  }
 </style>
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>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9e432bb..f484ce8 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -52,6 +52,7 @@ const { title, description, empty } = Astro.props;
     <main id="main">
       <slot />
     </main>
+    <div class="spacer" />
     {empty ? null : <Footer />}
   </body>
 </html>
@@ -118,10 +119,6 @@ const { title, description, empty } = Astro.props;
     line-height: 1.6;
   }
 
-  a {
-    color: $accent;
-  }
-
   a.external::after {
     content: "↗";
     font-family: monospace;
@@ -158,13 +155,12 @@ const { title, description, empty } = Astro.props;
 
     max-width: min(900px, 95vw);
     width: 100%;
-    font-size: 1.1rem;
+    font-size: 1.05rem;
 
-    padding: 2.5rem;
+    padding: 0 1rem 1rem;
     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;
+    border-radius: 2px;
 
     p > code {
       word-break: break-word;
@@ -199,21 +195,22 @@ const { title, description, empty } = Astro.props;
     }
   }
 
-  main a {
-    color: $accentDark;
+  .spacer {
+    flex: 1 0;
   }
 
-  footer a {
-    color: $accentLight;
+  main a {
+    color: blue;
   }
 
   main a,
   footer a {
     text-decoration: none;
-    box-shadow: 0 1px $accent;
+    box-shadow: 0 1px currentColor;
+    padding-block-end: 0.07em; // Para que el shadow no toque las "g" o "y"
 
     &:hover {
-      box-shadow: 0 2px $accentDark;
+      box-shadow: 0 2px currentColor;
     }
 
     &:focus {
diff --git a/src/pages/blog.xml.ts b/src/pages/blog.xml.ts
index c0b5086..d62d675 100644
--- a/src/pages/blog.xml.ts
+++ b/src/pages/blog.xml.ts
@@ -15,11 +15,11 @@ const spanishPubDate = (date: Date): string => {
 
 export const GET: APIRoute = async (context) => {
   const collection = (await getCollection("blog"))
-    .filter((post) => post.data.publishedAt && post.data.title && post.data.description)
+    .filter((post) => post.data.publishedAt && post.data.title)
     .sort((a, b) => {
       return new Date(b.data.publishedAt).getTime() - new Date(a.data.publishedAt).getTime();
     })
-    .slice(0, 20); // Limit to the latest 20 posts
+    .slice(0, 10); // Limit to the latest 20 posts
 
   return rss({
     title: "Blog de Ariel Costas",
@@ -32,7 +32,7 @@ export const GET: APIRoute = async (context) => {
     items: collection.map((post) => ({
       title: post.data.title,
       link: `${context.url.origin}/blog/${post.id}`,
-      description: post.data.description,
+      description: post.data.description ?? "",
       pubDate: post.data.publishedAt,
       categories: post.data.tags,
       customData: `<cdrss:spanishPubDate>${spanishPubDate(post.data.publishedAt)}</cdrss:spanishPubDate>`,
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index 96e857a..710006a 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -1,29 +1,38 @@
 ---
+import { Icon } from "astro-icon/components";
 import t from "../i18n/es.json";
 ---
 
 <footer>
-  <div class="footer-content">
+  <section class="footer-content">
     <p>
       Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {
         t.footer.copyright
       }
     </p>
+  </section>
 
-    <p>
-      {t.footer.contentLicencedUnder}
-      <a href={`https://creativecommons.org/licenses/by-sa/4.0/deed.es`}
-        >CC BY-SA 4.0</a
-      >.
+  <section class="footer-badges">
+    <article id="footer-badge-rss">
+      <Icon name="tabler:rss" />
+      <a href="/blog.xml" title="RSS Feed">RSS</a>
+    </article>
 
-      {t.footer.sourceCodeAvailableOn}
-      <a href="https://github.com/arielcostas/costasdev">GitHub</a>
-      {t.footer.andIsLicencedUnder}
-      <a href="https://joinup.ec.europa.eu/collection/eupl/eupl-text-11-12"
-        >{t.footer.eupl} 1.2</a
+    <article id="footer-badge-eupl">
+      <Icon name="tabler:brand-open-source" />
+      <a
+        href="https://github.com/arielcostas/costasdev"
+        >EUPL 1.2</a
       >
-    </p>
-  </div>
+    </article>
+
+    <article id="footer-badge-cc">
+      <Icon name="tabler:creative-commons" />
+      <a
+        href="https://github.com/arielcostas/costasdev"
+        >BY-SA 4.0</a
+      >
+  </section>
 </footer>
 
 <style lang="scss">
@@ -39,21 +48,66 @@ import t from "../i18n/es.json";
     vertical-align: middle;
     text-align: center;
 
-    padding: 2rem 1rem;
+    padding: 1.5rem 1rem;
 
     .footer-content {
       max-width: 900px;
       margin: 0 auto;
+
+      a {
+        color: $accentLight;
+      }
+      p {
+        margin-inline: auto;
+        margin-block: 0 0.5rem;
+      }
+    }
+  }
+
+  .footer-badges {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+
+    article {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.25rem;
+      min-width: 67px;
+      height: 33px;
+      border-radius: 3px;
+      padding: 0 0.5rem;
+
+      a, span {
+        color: currentColor;
+        font-weight: 600;
+        text-decoration: none;
+        box-shadow: none !important;
+      }
+
+      svg {
+        width: 1.2rem;
+        height: 1.2rem;
+        color: currentColor;
+      }
     }
 
-    a {
+    #footer-badge-rss {
+      background: linear-gradient(to bottom, orangered, red);
       color: white;
-      text-shadow: 0 1px 1px rgba(0,0,0,0.5);
     }
 
-    p {
-      margin-inline: auto;
-      margin-bottom: 0.5rem;
+    #footer-badge-eupl {
+      background: linear-gradient(to bottom, blue, navy);
+      color: gold;
+    }
+
+    #footer-badge-cc {
+      background-color: black;
+      background: linear-gradient(to bottom, #333, #000);
+      color: white;
     }
   }
 </style>
diff --git a/styles/shared.scss b/styles/shared.scss
index 96f20c6..d89de37 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -12,7 +12,7 @@ body {
 %heading {
   font-family: $titleFontStack;
   margin-block-start: 1rem;
-  margin-block-end: 0.5rem;
+  margin-block-end: 1.5rem;
   color: $accentDark;
   text-shadow: 1px 1px 0 #fff;
 }
@@ -21,15 +21,18 @@ h1 {
   @extend %heading;
   font-size: 2.75rem;
   line-height: 1.2;
-  border-bottom: 2px solid $accentLight;
   padding-bottom: 0.5rem;
-  margin-bottom: 1.5rem;
+  border-bottom: 2px solid $accent;
+  letter-spacing: -0.02em;
 }
 
 h2 {
   @extend %heading;
   font-size: 2rem;
-  line-height: 1.3;
+  line-height: 1.2;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid $accent;
+  letter-spacing: -0.02em;
 }
 
 h3 {