From 32ea7a004a418b6d312f41a6234dcef77b7a7bb2 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Wed, 21 Jan 2026 18:55:59 +0100 Subject: New retro design for most of the site --- src/components/PortfolioProject.astro | 40 +++++++++++++--- src/components/TechnologyBadge.astro | 21 +++++---- src/layouts/BlogListLayout.astro | 14 +----- src/layouts/BlogSingleLayout.astro | 5 +- src/layouts/HomePageLayout.astro | 20 +++----- src/layouts/Layout.astro | 37 ++++++++------- src/partials/Footer.astro | 59 +++++++++++++---------- src/partials/Header.astro | 88 +++++++++++++++++++---------------- 8 files changed, 158 insertions(+), 126 deletions(-) (limited to 'src') diff --git a/src/components/PortfolioProject.astro b/src/components/PortfolioProject.astro index b3483e9..c583325 100644 --- a/src/components/PortfolioProject.astro +++ b/src/components/PortfolioProject.astro @@ -58,20 +58,46 @@ const { title, summary, tags, detailsLink, githubLink, onlineLink } = justify-content: start; gap: 0.75rem; - padding: 1.5rem 1rem; - border-radius: 0.5rem; - - background-color: white; - border: 1px solid $accent; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 1.5rem; + border-radius: 10px; + + background-color: #fcfcfc; + border: 1px solid #ccd6e0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff; + + h3 { + color: $accent; + text-shadow: 1px 1px 0 #fff; + margin-bottom: 0.25rem; + border-bottom: 1px solid #eee; + padding-bottom: 0.25rem; + } } a { display: inline-flex; align-items: center; gap: 0.5rem; - color: var(--text); + color: white; text-decoration: none; + background: $accent; + padding: 0.4rem 0.8rem; + border-radius: 6px; + font-size: 0.9rem; + font-weight: bold; + border: 1px solid $accentDark; + box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); + + &:hover { + filter: brightness(1.1); + transform: translateY(-1px); + } + + &:active { + box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); + transform: translateY(0); + } } div *:not(:last-child) { diff --git a/src/components/TechnologyBadge.astro b/src/components/TechnologyBadge.astro index 204bef6..ad32c6e 100644 --- a/src/components/TechnologyBadge.astro +++ b/src/components/TechnologyBadge.astro @@ -112,20 +112,24 @@ const tech = technologies[code] as Technology; 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 = {

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.

- +

Entradas recientes del blog