feat: Agregar CSS del componente Related Posts

- Implementar estilos completos en style.css (líneas 1111-1155)
- Border izquierdo visual indicator (gris → naranja hover)
- Cards altura uniforme con height 100%
- Uso estratégico de !important para override de Bootstrap
- Cursor pointer y transiciones suaves
- HTML ya existía en single.php (sin cambios)

Referencias: Issue #127

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-07 16:22:14 -06:00
parent 9fa353db80
commit 4d30bd1f04

View File

@@ -1107,3 +1107,49 @@ img {
margin-top: 1rem;
}
}
/* === RELATED POSTS === */
.related-posts {
margin: 3rem 0;
}
.related-posts h2 {
color: var(--color-navy-primary);
font-weight: 700;
margin-bottom: 2rem;
}
.related-posts .card {
cursor: pointer;
background: #ffffff !important;
border: 1px solid var(--color-neutral-100) !important;
border-left: 4px solid var(--color-neutral-600) !important;
transition: all 0.3s ease;
height: 100%;
}
.related-posts .card:hover {
background: var(--color-neutral-50) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
border-left-color: var(--color-orange-primary) !important;
}
.related-posts .card-body {
padding: 1.5rem !important;
}
.related-posts .card-title {
color: var(--color-navy-primary) !important;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.4;
}
.related-posts a {
text-decoration: none;
}
.related-posts a:hover .card-title {
color: var(--color-orange-primary) !important;
}