diff options
Diffstat (limited to 'src/layouts/BlogListLayout.astro')
| -rw-r--r-- | src/layouts/BlogListLayout.astro | 142 |
1 files changed, 100 insertions, 42 deletions
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> |