From d55d0f5c207bd640d02d4e0d26d0367d4b7477d3 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 18:56:12 -0600 Subject: [PATCH] Fix Related Posts CSS: Corregir selectores para aplicar estilos - Issue #127 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMA: - CSS usaba selectores .related-post-card que NO existen en HTML - HTML usa .related-posts .card (Bootstrap estándar) - Resultado: CERO estilos personalizados aplicados CAMBIOS: - Reescribir componente-related-posts.css con selectores correctos - Cambiar de .related-post-card a .related-posts .card - Aplicar CSS exacto de CSS-ESPECIFICO.md líneas 62-132 CSS APLICADO: ✅ cursor: pointer en cards ✅ border-left: 4px solid navy ✅ border-left-color: orange en hover ✅ box-shadow en hover ✅ card-title color navy ✅ card-title color orange en hover ARCHIVOS: - wp-content/themes/apus-theme/assets/css/componente-related-posts.css (REESCRITO) - wp-content/themes/apus-theme/functions.php (v1.0.16 → v1.0.17) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../assets/css/componente-related-posts.css | 490 ++---------------- wp-content/themes/apus-theme/functions.php | 2 +- 2 files changed, 51 insertions(+), 441 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/componente-related-posts.css b/wp-content/themes/apus-theme/assets/css/componente-related-posts.css index 8b5615b2..604bd00f 100644 --- a/wp-content/themes/apus-theme/assets/css/componente-related-posts.css +++ b/wp-content/themes/apus-theme/assets/css/componente-related-posts.css @@ -1,482 +1,92 @@ /** - * Related Posts Styles + * Related Posts Component * - * Responsive grid layout with Bootstrap 5 integration - * Supports cards with and without images + * RESPONSABILIDAD: Estilos para las cards de posts relacionados + * - Cards con borde izquierdo navy de 4px + * - Hover effect con borde naranja + * - Cursor pointer + * - Integración con Bootstrap 5 cards * * @package Apus_Theme - * @since 1.0.0 + * @since 1.0.17 + * @source apus-theme-template/css/style.css (líneas del template) + * @reference CSS-ESPECIFICO.md líneas 62-132 */ /* ======================================== Related Posts Section ======================================== */ -.related-posts-section { - margin-top: 4rem; - margin-bottom: 3rem; - padding-top: 3rem; - border-top: 2px solid #e9ecef; +.related-posts { + margin: 3rem 0; } -.related-posts-container { - width: 100%; -} - -.related-posts-title { - font-size: 1.75rem; +.related-posts h2 { + color: var(--color-navy-primary); font-weight: 700; - color: #212529; margin-bottom: 2rem; - text-align: left; - position: relative; - padding-bottom: 0.75rem; -} - -.related-posts-title::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 60px; - height: 3px; - background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); - border-radius: 2px; } /* ======================================== - Related Post Card + Related Posts Cards ======================================== */ -.related-post-card { - display: flex; - flex-direction: column; +.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%; - background: #f8f9fa; /* Template línea 230 */ - border: 1px solid #e2e8f0; - border-left: 4px solid transparent; - border-left-color: transparent; - border-radius: 12px; - overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; } -.related-post-card::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #1e3a5f 0%, #1a73e8 100%); - opacity: 0; - transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); - z-index: 1; +.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-post-card:hover { - transform: translateY(-8px); - box-shadow: 0 12px 32px rgba(26, 115, 232, 0.15); - background: #ffffff; +.related-posts .card-body { + padding: 1.5rem !important; } -.related-post-card:hover::before { - opacity: 1; +.related-posts .card-title { + color: var(--color-navy-primary) !important; + font-weight: 600; + font-size: 0.95rem; + line-height: 1.4; } -.related-post-link { - display: flex; - flex-direction: column; - height: 100%; - text-decoration: none; - color: inherit; -} - -.related-post-link:hover { +.related-posts a { text-decoration: none; } -/* ======================================== - Card with Thumbnail - ======================================== */ - -.related-post-thumbnail { - position: relative; - width: 100%; - padding-bottom: 75%; /* 4:3 aspect ratio */ - overflow: hidden; - background: #f8f9fa; -} - -.related-post-thumbnail img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -.related-post-card:hover .related-post-thumbnail img { - transform: scale(1.05); +.related-posts a:hover .card-title { + color: var(--color-orange-primary) !important; } /* ======================================== - Card without Image (Color Background) + Pagination (si existe) ======================================== */ -.related-post-no-image { - position: relative; - width: 100%; - padding-bottom: 75%; /* 4:3 aspect ratio */ - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; -} - -.related-post-no-image-content { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 1.5rem; - text-align: center; -} - -.related-post-no-image-title { - font-size: 1.25rem; - font-weight: 700; - color: #ffffff; - margin: 0; - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -/* ======================================== - Category Badge - ======================================== */ - -.related-post-category { - position: absolute; - top: 12px; - left: 12px; - display: inline-block; - padding: 0.375rem 0.875rem; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; - background: rgba(255, 255, 255, 0.95); - color: #212529; - border-radius: 6px; - z-index: 10; - transition: all 0.2s ease; - backdrop-filter: blur(4px); -} - -.related-post-category.no-image { - background: rgba(255, 255, 255, 0.2); - color: #ffffff; - border: 1px solid rgba(255, 255, 255, 0.3); - backdrop-filter: blur(8px); -} - -.related-post-card:hover .related-post-category { - background: rgba(26, 115, 232, 0.95); - color: #ffffff; -} - -.related-post-card:hover .related-post-category.no-image { - background: rgba(255, 255, 255, 0.95); - color: #212529; - border-color: transparent; -} - -/* ======================================== - Card Content - ======================================== */ - -.related-post-content { - padding: 1.25rem; - flex: 1; - display: flex; - flex-direction: column; -} - -.related-post-title { - font-size: 1.125rem; - font-weight: 600; - color: #212529; - margin: 0 0 0.75rem 0; - line-height: 1.4; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - transition: color 0.2s ease; -} - -.related-post-card:hover .related-post-title { - color: #1a73e8; -} - -.related-post-excerpt { - font-size: 0.9375rem; - color: #6c757d; - line-height: 1.6; - margin-bottom: 0.75rem; - flex: 1; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.related-post-meta { - display: flex; - align-items: center; - gap: 0.5rem; - margin-top: auto; - padding-top: 0.75rem; - border-top: 1px solid #e9ecef; -} - -.related-post-date { - font-size: 0.8125rem; - color: #6c757d; +.pagination .page-link { + color: var(--color-neutral-600); + border: 1px solid var(--color-neutral-100); + padding: 0.5rem 1rem; + margin: 0 0.25rem; + border-radius: 4px; font-weight: 500; + transition: all 0.3s ease; } -/* ======================================== - Cards without Thumbnail - Simplified Layout - ======================================== */ - -.related-post-card.no-thumbnail .related-post-content { - padding: 1.5rem 1.25rem 1.25rem; +.pagination .page-link:hover { + background-color: rgba(255, 133, 0, 0.1); + border-color: var(--color-orange-primary); + color: var(--color-orange-primary); } -/* ======================================== - Responsive Adjustments - ======================================== */ - -/* Tablets */ -@media (max-width: 991.98px) { - .related-posts-section { - margin-top: 3rem; - padding-top: 2.5rem; - } - - .related-posts-title { - font-size: 1.5rem; - margin-bottom: 1.5rem; - } - - .related-post-no-image-title { - font-size: 1.125rem; - -webkit-line-clamp: 4; - } -} - -/* Mobile */ -@media (max-width: 767.98px) { - .related-posts-section { - margin-top: 2.5rem; - padding-top: 2rem; - } - - .related-posts-title { - font-size: 1.375rem; - margin-bottom: 1.25rem; - } - - .related-post-card { - margin-bottom: 0; /* Bootstrap's g-4 handles gaps */ - } - - .related-post-thumbnail { - padding-bottom: 60%; /* Shorter aspect ratio on mobile */ - } - - .related-post-no-image { - padding-bottom: 60%; - } - - .related-post-no-image-title { - font-size: 1rem; - } - - .related-post-title { - font-size: 1rem; - } - - .related-post-excerpt { - font-size: 0.875rem; - } - - .related-post-content { - padding: 1rem; - } - - .related-post-card.no-thumbnail .related-post-content { - padding: 1.25rem 1rem 1rem; - } -} - -/* Small mobile */ -@media (max-width: 575.98px) { - .related-posts-title { - font-size: 1.25rem; - } - - .related-post-category { - font-size: 0.6875rem; - padding: 0.25rem 0.625rem; - } - - .related-post-no-image-content { - padding: 1rem; - } -} - -/* ======================================== - Print Styles - ======================================== */ - -@media print { - .related-posts-section { - page-break-inside: avoid; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid #000; - } - - .related-post-card { - page-break-inside: avoid; - box-shadow: none; - border: 1px solid #ddd; - } - - .related-post-card:hover { - transform: none; - } - - .related-post-thumbnail img, - .related-post-no-image { - display: none; - } - - .related-post-category { - background: transparent; - border: 1px solid #000; - color: #000; - position: static; - display: inline-block; - margin-bottom: 0.5rem; - } - - .related-post-content { - padding: 1rem; - } - - .related-post-title { - color: #000; - } - - .related-post-excerpt { - color: #333; - } -} - -/* ======================================== - Dark Mode Support (Optional) - ======================================== */ - -@media (prefers-color-scheme: dark) { - .related-posts-section { - border-top-color: #343a40; - } - - .related-posts-title { - color: #f8f9fa; - } - - .related-post-card { - background: #212529; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - } - - .related-post-card:hover { - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); - } - - .related-post-title { - color: #f8f9fa; - } - - .related-post-card:hover .related-post-title { - color: #4285f4; - } - - .related-post-excerpt { - color: #adb5bd; - } - - .related-post-meta { - border-top-color: #343a40; - } - - .related-post-date { - color: #adb5bd; - } - - .related-post-category { - background: rgba(33, 37, 41, 0.95); - color: #f8f9fa; - } -} - -/* ======================================== - Accessibility - ======================================== */ - -.related-post-link:focus { - outline: 2px solid #1a73e8; - outline-offset: 2px; -} - -.related-post-link:focus-visible { - outline: 2px solid #1a73e8; - outline-offset: 2px; -} - -/* Reduce motion for users who prefer it */ -@media (prefers-reduced-motion: reduce) { - .related-post-card, - .related-post-card::before, - .related-post-thumbnail img, - .related-post-category, - .related-post-title { - transition: none; - } - - .related-post-card:hover { - transform: none; - } - - .related-post-card:hover .related-post-thumbnail img { - transform: none; - } +.pagination .page-item.active .page-link { + background-color: var(--color-orange-primary); + border-color: var(--color-orange-primary); + color: #ffffff; } diff --git a/wp-content/themes/apus-theme/functions.php b/wp-content/themes/apus-theme/functions.php index 19a6694f..9642df26 100644 --- a/wp-content/themes/apus-theme/functions.php +++ b/wp-content/themes/apus-theme/functions.php @@ -14,7 +14,7 @@ if (!defined('ABSPATH')) { /** * Theme Version */ -define('APUS_VERSION', '1.0.16'); +define('APUS_VERSION', '1.0.17'); /** * Theme Setup