git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ARQUITECTURA: Renombrar CSS para correspondencia 1-a-1 con documentación - Issue #133

Browse Source 
PROBLEMA RESUELTO:
- Duplicación de archivos CSS (hero.css y hero-section.css)
- Nombres genéricos que no corresponden con documentación
- Confusión sobre qué archivo editar

RENOMBRAMIENTOS (7 archivos):
✅ notification-bar.css → componente-top-bar.css
✅ navbar.css → componente-navbar.css
✅ buttons.css → componente-boton-lets-talk.css
✅ hero.css → componente-hero-section.css (+ CSS correcto del template)
✅ toc-sidebar.css → componente-sidebar-toc.css
✅ social-share.css → componente-share-buttons.css
✅ footer-contact.css → componente-footer-contact-form.css

ELIMINADO:
❌ hero-section.css (duplicado con CSS incorrecto)
- Usaba clases .hero-section y .hero-category-badge
- El HTML real usa .hero-title y .category-badge
- Consolidado en componente-hero-section.css

ACTUALIZACIONES:
- enqueue-scripts.php: Todas las referencias actualizadas
- functions.php: Version bump 1.0.8 → 1.0.9
- Eliminada función apus_enqueue_hero_section_styles() (duplicada)

BENEFICIOS:
✅ Correspondencia directa 1-a-1 con carpetas de documentación
✅ Evita duplicaciones futuras
✅ Facilita identificar qué CSS editar
✅ Nomenclatura consistente y estándar

Issue: #133

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-08 17:18:21 -06:00
parent 2b7ba24ada
commit 8d8767e84c
11 changed files with 84 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
wp-content/themes/apus-theme/assets/css/buttons.css → wp-content/themes/apus-theme/assets/css/componente-boton-lets-talk.css
View File

0
wp-content/themes/apus-theme/assets/css/footer-contact.css → wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css
View File

69
wp-content/themes/apus-theme/assets/css/componente-hero-section.css Normal file
View File

@@ -0,0 +1,69 @@
/**
* Hero Section Styles
*
* RESPONSABILIDAD: Estilos del componente Hero Section
* - Contenedor principal con gradiente navy
* - Título H1 del post
* - Category badges con efecto glassmorphism
*
* CORRECCIÓN Issue #121: Este archivo estaba vacío (solo comentarios)
* diciendo que los estilos estaban en style.css
*
* Ahora contiene el CSS correcto del template según:
* _planeacion/_desarrollo-tema-apus/theme-documentation/08-componente-hero-section/CSS-ESPECIFICO.md
*
* ELIMINADO: hero-section.css (duplicado con CSS incorrecto)
* - hero-section.css usaba clases .hero-section y .hero-category-badge
* - El HTML real usa .hero-title y .category-badge
* - Se consolidó todo en este archivo con las clases correctas
*
* @package Apus_Theme
* @since 1.0.9
* @source apus-theme-template/css/style.css líneas 186-222
*/
/* ========================================
Hero Section
======================================== */
.hero-title {
background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%);
box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
padding: 3rem 0;
}
.hero-title h1 {
color: #ffffff !important;
font-weight: 700;
line-height: 1.4;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 0;
}
/* ========================================
Category Badges (Glassmorphism Effect)
======================================== */
.category-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.813rem;
font-weight: 500;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.category-badge:hover {
background: rgba(255, 133, 0, 0.2);
border-color: rgba(255, 133, 0, 0.4);
color: #ffffff;
}
.category-badge i {
color: var(--color-orange-light);
}

0
wp-content/themes/apus-theme/assets/css/navbar.css → wp-content/themes/apus-theme/assets/css/componente-navbar.css
View File

0
wp-content/themes/apus-theme/assets/css/social-share.css → wp-content/themes/apus-theme/assets/css/componente-share-buttons.css
View File

0
wp-content/themes/apus-theme/assets/css/toc-sidebar.css → wp-content/themes/apus-theme/assets/css/componente-sidebar-toc.css
View File

0
wp-content/themes/apus-theme/assets/css/notification-bar.css → wp-content/themes/apus-theme/assets/css/componente-top-bar.css
View File

62
wp-content/themes/apus-theme/assets/css/hero-section.css
View File

@@ -1,62 +0,0 @@
.hero-section {
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
color: #ffffff;
margin-bottom: 2rem;
}
.hero-content {
max-width: 900px;
margin: 0 auto;
}
.hero-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.hero-category-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.hero-meta {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
margin-top: 1rem;
}
.hero-meta-item {
display: inline-flex;
align-items: center;
}
.hero-meta-separator {
margin: 0 0.75rem;
opacity: 0.6;
}
/* Responsive */
@media (max-width: 767px) {
.hero-meta {
font-size: 0.85rem;
}
.hero-meta-separator {
margin: 0 0.5rem;
}
}
@media (max-width: 575px) {
.hero-category-badge {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
}
}

11
wp-content/themes/apus-theme/assets/css/hero.css
View File

@@ -1,11 +0,0 @@
/**
* Hero Section Styles
*
* NOTA: Todos los estilos del hero section están en style.css según template original.
* Este archivo se mantiene vacío para evitar duplicaciones.
*
* @package Apus_Theme
* @since 1.0.0
*/
/* Los estilos de .hero-title y .category-badge están en style.css líneas 812-848 */

2
wp-content/themes/apus-theme/functions.php
View File

@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
/**
* Theme Version
*/
define('APUS_VERSION', '1.0.8');
define('APUS_VERSION', '1.0.9');
/**
* Theme Setup

48
wp-content/themes/apus-theme/inc/enqueue-scripts.php
View File

@@ -111,9 +111,9 @@ function apus_enqueue_fase2_styles() {
// Hero Section CSS - Gradiente azul (Issue #59)
wp_enqueue_style(
'apus-hero',
get_template_directory_uri() . '/assets/css/hero.css',
get_template_directory_uri() . '/assets/css/componente-hero-section.css',
array('apus-bootstrap'),
filemtime(get_template_directory() . '/assets/css/hero.css'),
filemtime(get_template_directory() . '/assets/css/componente-hero-section.css'),
'all'
);
@@ -170,27 +170,27 @@ function apus_enqueue_global_components() {
// Notification Bar CSS - Barra superior (Issue #39)
wp_enqueue_style(
'apus-notification-bar',
get_template_directory_uri() . '/assets/css/notification-bar.css',
get_template_directory_uri() . '/assets/css/componente-top-bar.css',
array('apus-bootstrap'),
filemtime(get_template_directory() . '/assets/css/notification-bar.css'),
filemtime(get_template_directory() . '/assets/css/componente-top-bar.css'),
'all'
);
// Navbar CSS - Navegación principal
wp_enqueue_style(
'apus-navbar',
get_template_directory_uri() . '/assets/css/navbar.css',
get_template_directory_uri() . '/assets/css/componente-navbar.css',
array('apus-bootstrap'),
filemtime(get_template_directory() . '/assets/css/navbar.css'),
filemtime(get_template_directory() . '/assets/css/componente-navbar.css'),
'all'
);
// Buttons CSS - Botones personalizados (Let's Talk, etc.)
wp_enqueue_style(
'apus-buttons',
get_template_directory_uri() . '/assets/css/buttons.css',
get_template_directory_uri() . '/assets/css/componente-boton-lets-talk.css',
array('apus-bootstrap'),
filemtime(get_template_directory() . '/assets/css/buttons.css'),
filemtime(get_template_directory() . '/assets/css/componente-boton-lets-talk.css'),
'all'
);
}
@@ -482,7 +482,7 @@ add_action('wp_enqueue_scripts', 'apus_enqueue_theme_styles', 13);
*
* HABILITADO: CSS de share buttons debe estar en su propio archivo
* Arquitectura correcta: cada componente tiene su archivo CSS individual
* Ver: wp-content/themes/apus-theme/assets/css/social-share.css
* Ver: wp-content/themes/apus-theme/assets/css/componente-share-buttons.css
*/
function apus_enqueue_social_share_styles() {
// Only enqueue on single posts
@@ -493,7 +493,7 @@ function apus_enqueue_social_share_styles() {
// Social Share CSS
wp_enqueue_style(
'apus-social-share',
get_template_directory_uri() . '/assets/css/social-share.css',
get_template_directory_uri() . '/assets/css/componente-share-buttons.css',
array('apus-bootstrap'),
APUS_VERSION,
'all'
@@ -619,9 +619,9 @@ function apus_enqueue_toc_sidebar_assets() {
// TOC Sidebar CSS
wp_enqueue_style(
'apus-toc-sidebar',
get_template_directory_uri() . '/assets/css/toc-sidebar.css',
get_template_directory_uri() . '/assets/css/componente-sidebar-toc.css',
array('apus-bootstrap'),
filemtime(get_template_directory() . '/assets/css/toc-sidebar.css'),
filemtime(get_template_directory() . '/assets/css/componente-sidebar-toc.css'),
'all'
);
}
@@ -633,13 +633,13 @@ add_action('wp_enqueue_scripts', 'apus_enqueue_toc_sidebar_assets', 18);
*
* ARQUITECTURA CORRECTA: Cada componente debe tener su propio archivo CSS
* Footer Contact Form CSS ahora está en su archivo individual
* Ver: wp-content/themes/apus-theme/assets/css/footer-contact.css
* Ver: wp-content/themes/apus-theme/assets/css/componente-footer-contact-form.css
*/
function apus_enqueue_footer_contact_assets() {
// Footer Contact CSS
wp_enqueue_style(
'apus-footer-contact',
get_template_directory_uri() . '/assets/css/footer-contact.css',
get_template_directory_uri() . '/assets/css/componente-footer-contact-form.css',
array('apus-bootstrap'),
APUS_VERSION,
'all'
@@ -648,23 +648,3 @@ function apus_enqueue_footer_contact_assets() {
add_action('wp_enqueue_scripts', 'apus_enqueue_footer_contact_assets', 18);
/**
* Enqueue Hero Section styles (Issue #40)
*/
function apus_enqueue_hero_section_styles() {
// Solo enqueue en posts individuales
if (!is_single()) {
return;
}
// Hero Section CSS
wp_enqueue_style(
'apus-hero-section',
get_template_directory_uri() . '/assets/css/hero-section.css',
array('apus-bootstrap'),
APUS_VERSION,
'all'
);
}
add_action('wp_enqueue_scripts', 'apus_enqueue_hero_section_styles', 20);