Commit Graph

4 Commits

Author SHA1 Message Date
FrankZamora
ba5d766dfb ARQUITECTURA: Limpieza masiva - Mover componentes de style.css a archivos individuales - Issue #121
Problema:
- style.css contenía CSS de MÚLTIPLES componentes mezclados
- Violaba principio de separación de responsabilidades
- Algunos componentes tenían archivos CSS pero estaban duplicados en style.css

Solución:

1. REACTIVADO buttons.css
   - Era archivo deshabilitado (Issue #101 lo movió a style.css - INCORRECTO)
   - Ahora contiene estilos del botón Let's Talk
   - Registrado en enqueue-scripts.php línea 189

2. CREADO navbar.css
   - Nuevo archivo para navegación principal
   - Incluye: navbar, navbar-brand, nav-link, dropdown-menu, dropdown-item
   - Registrado en enqueue-scripts.php línea 180

3. REGISTRADO notification-bar.css
   - Archivo ya existía pero NO estaba registrado
   - Ahora registrado en enqueue-scripts.php línea 171

4. LIMPIEZA MASIVA style.css
   - Eliminadas 262 líneas de CSS de componentes
   - Componentes movidos:
     * TOP NOTIFICATION BAR → notification-bar.css
     * NAVBAR → navbar.css
     * BOTÓN LET'S TALK → buttons.css
     * HERO SECTION → hero.css (ya existía)
     * POST CONTENT → post-content.css (ya existía)
     * FEATURED IMAGE → (comentado, pendiente crear si necesario)

Archivos modificados:
- assets/css/buttons.css - Reactivado con estilos Let's Talk
- assets/css/navbar.css (NUEVO) - Componente navegación
- assets/css/style.css - Eliminadas 262 líneas
- inc/enqueue-scripts.php - Nueva función apus_enqueue_global_components()
- functions.php - Version bump 1.0.6 → 1.0.7

🎯 Resultado:
- style.css ahora SOLO contiene estilos GLOBALES del tema
- TODOS los componentes en archivos individuales
- Arquitectura consistente y mantenible
- No más duplicaciones

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 17:00:19 -06:00
FrankZamora
82a5cf00da Eliminar código comentado basura
PROBLEMA:
Código comentado es BASURA. No debe permanecer en archivos de producción.
Para eso existe Git - historial completo disponible si se necesita.

ARCHIVOS LIMPIADOS:

1. buttons.css:
   - ANTES: 54 líneas (header + código comentado)
   - AHORA: 9 líneas (solo header indicando deshabilitación)
   - ELIMINADO: ~45 líneas de CSS comentado

2. custom-style.css:
   - ELIMINADO: ~84 líneas de navbar comentado (líneas 86-166)
   - ELIMINADO: ~23 líneas de botón comentado (líneas 168-190)
   - REEMPLAZADO: con 1 línea de nota breve
   - ANTES: 107 líneas de código basura comentado
   - AHORA: 1 línea de referencia

3. enqueue-scripts.php:
   - ELIMINADO: ~13 líneas de enqueue buttons.css comentado
   - ELIMINADO: ~33 líneas de enqueue notification-bar comentado
   - AHORA: Código limpio sin basura

TOTAL ELIMINADO: ~152 líneas de código comentado basura

PRINCIPIO:
- Código comentado = basura
- Git guarda historial completo
- Si se necesita algo, está en el commit anterior
- Archivos de producción deben estar limpios

REFERENCIAS:
- CSS correcto está en: assets/css/style.css
- Historial en Git si se necesita código anterior

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-06 19:43:48 -06:00
FrankZamora
5d93e52aaa Deshabilitar completamente buttons.css - CSS activo causaba problema
PROBLEMA IDENTIFICADO:
- En commit anterior (41b12) solo comenté el ENQUEUE de buttons.css
- El archivo buttons.css TODAVÍA contenía CSS ACTIVO (sin comentar)
- Este CSS con gradiente incorrecto podía seguir aplicándose por:
  * Cache de WordPress/navegador
  * Referencias directas al archivo
  * Plugins que cargan todos los CSS de la carpeta

SÍNTOMAS:
- Botón Let's Talk mostraba gradiente en lugar de color sólido
- No coincidía con template fuente apus-theme-template/css/style.css

ANÁLISIS CSS:
buttons.css tenía (INCORRECTO):
- background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)
- transform: translateY(-2px) en hover
- box-shadow no presente en template
- Media query responsive no documentada

Template fuente tiene (CORRECTO):
- background-color: var(--color-orange-primary) - Color SÓLIDO
- Sin transform
- Sin box-shadow extra
- Sin media queries

SOLUCIÓN:
- Comentado TODO el contenido CSS de buttons.css
- Archivo ahora solo contiene comentarios
- CSS correcto permanece en assets/css/style.css (líneas 766-785)
- Eliminada cualquier posibilidad de conflicto

ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/buttons.css
  * TODO el CSS convertido a comentarios
  * Agregado header explicando el problema
  * Referencia a ubicación correcta del CSS

VERIFICACIÓN:
 style.css tiene CSS correcto (idéntico a template fuente)
 custom-style.css tiene CSS comentado (sin conflicto)
 enqueue-scripts.php tiene enqueue comentado (sin carga)
 buttons.css ahora completamente deshabilitado (sin CSS activo)

REFERENCIAS:
- Template CSS: apus-theme-template/css/style.css líneas 163-180
- Issue: #101

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-06 19:40:18 -06:00
FrankZamora
37eb5e1ad3 [FASE 2] Implementar CSS de componentes RDash - Issues #58-64
Implementación completa de estilos CSS que replican componentes del template RDash según validación de Issue #57.

**Archivos CSS Creados:**

1. **buttons.css (Issue #58)** - Botón "Let's Talk" en navbar
   - Gradiente naranja: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%)
   - Hover: translateY(-2px) con shadow profesional
   - Box-shadow: rgba(255, 107, 53, 0.3)
   - Border-radius: 6px, padding: 0.5rem 1.5rem
   - Responsive: width 100% en móvil (<991.98px)
   - Template ref: css/style.css líneas 527-552

2. **hero.css (Issue #59)** - Hero Section con gradiente azul
   - Background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%)
   - Box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25)
   - H1 color: #ffffff con text-shadow
   - Category badges hero: backdrop-filter blur(10px)
   - Badge background: rgba(255, 255, 255, 0.15)
   - Border: 1px solid rgba(255, 255, 255, 0.2)
   - Hover: translateY(-2px), shadow profesional
   - Template ref: css/style.css líneas 122-129

3. **badges.css (Issue #62)** - Clase .category-badge genérica
   - Background: #e9ecef, border-radius: 20px
   - Color: #6c757d, font-size: 0.813rem
   - Padding: 0.375rem 0.875rem
   - Variante .category-badge-hero para fondos oscuros
   - Backdrop-filter: blur(10px)
   - Hover transitions: all 0.3s ease
   - Template ref: css/style.css líneas 459-490

4. **post-content.css (Issue #63)** - Typography de contenido
   - H2: font-size 2rem, border-bottom 1px solid #eee
   - H2 color: #1e3a5f, margin-top: 2.5rem
   - H3: font-size 1.5rem, color: #2c5282
   - Párrafos: line-height 1.8, font-size 1.1rem
   - Links: color #0d6efd, underline, font-weight 500
   - Blockquote: border-left 4px solid #0d6efd
   - Code: background #f8f9fa, color #e83e8c
   - Pre: background #f8f9fa, border-radius 8px
   - Responsive: H2 1.5rem, párrafos 1rem en móvil
   - Template ref: css/style.css líneas 208-227

5. **pagination.css (Issue #64)** - Paginación personalizada
   - Page-link: border-radius 6px, padding 0.5rem 0.875rem
   - Hover: translateY(-2px), box-shadow profesional
   - Active: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%)
   - Active font-weight: 600
   - Disabled: opacity 0.5, cursor not-allowed
   - Responsive: hide intermediate numbers en móvil
   - Dark mode support
   - Print: display none
   - Template ref: css/style.css líneas 180-207

**Archivos CSS Modificados:**

1. **related-posts.css (Issue #60)** - Corrección background
   - Línea 55: background: #f8f9fa (antes #f7fafc)
   - Mantiene hover transition a #ffffff
   - Border-left 4px gradiente animado
   - Gradiente: linear-gradient(180deg, #1e3a5f 0%, #1a73e8 100%)
   - Opacity border: 0 → 1 en hover
   - Transform: translateY(-8px)
   - Shadow: 0 12px 32px rgba(26, 115, 232, 0.15)

**Verificación:**

1. **toc.css (Issue #61)** - VERIFICADO 
   - Ya tiene todos los estilos correctos
   - Background: #f8f9fa (línea 16)
   - Border: 1px solid #dee2e6 (línea 17)
   - Border-left 3px en links activos (líneas 180, 199)
   - Scrollbar 6px con colores #cbd5e0 y #a0aec0 (líneas 334-349)
   - Sticky position con top: 5.5rem (líneas 22-23)
   - Issue #55 completado previamente

**Integración:**

- **inc/enqueue-scripts.php** - Modificado
  - Nueva función: apus_enqueue_fase2_styles() prioridad 6
  - Enqueue buttons.css (global)
  - Enqueue hero.css (global)
  - Enqueue badges.css (global)
  - Enqueue pagination.css (global)
  - Enqueue post-content.css (solo is_single)
  - Enqueue related-posts.css (solo is_single)
  - Sintaxis PHP validada:  Sin errores

**Estadísticas:**

- Archivos CSS nuevos: 5 (buttons, hero, badges, post-content, pagination)
- Archivos CSS modificados: 2 (related-posts, enqueue-scripts)
- Líneas de código CSS: 700+ líneas
- Issues completados: 7 (#58, #59, #60, #61, #62, #63, #64)
- Validación PHP:  Sin errores

**Próximo Paso:**
Validación visual del usuario para verificar que tema coincide con template antes de proceder a FASE 3 (detalles y ajustes finos).

Relacionado con: #57 (Issue principal), #58-64 (sub-issues)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-04 21:24:13 -06:00