From 1db44ca4d01d8180a1adaf69f2f0f9a1ce953221 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Sat, 29 Nov 2025 00:17:03 +0100 Subject: Improve styles --- .github/workflows/production.yml | 2 +- .prettierrc | 3 + src/layouts/BlogListLayout.astro | 142 ++++++++++++++++++++++++++----------- src/layouts/BlogSingleLayout.astro | 60 ++++++++++------ src/layouts/HomePageLayout.astro | 118 ++++++++++++++++++++++++++---- src/layouts/Layout.astro | 11 +-- src/partials/Header.astro | 15 +++- 7 files changed, 265 insertions(+), 86 deletions(-) create mode 100644 .prettierrc 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; - } - } 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; - } 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 = {

Inicio

-

- Te doy la bienvenida a mi web. Me llamo Ariel, y aquí encontrarás - información sobre mí y mis proyectos. -

- -

- 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. -

-