d52814c81d
RENOMBRAMIENTOS COMPLETADOS (19 archivos adicionales): COMPONENTES (carpetas 10, 12, 14, 15, 17, 18, 19): ✅ post-content.css → componente-post-content.css (10) ✅ cta-box-sidebar.css → componente-cta-box-sidebar.css (12) ✅ cta.css → componente-cta-ab-testing.css (14) ✅ related-posts.css → componente-related-posts.css (15) ✅ header.css → componente-footer-principal.css (17) ✅ modal-contact.css → componente-modal-contacto.css (18) ✅ tables-apu.css → css-tablas-apu.css (19) CSS GLOBALES (carpeta 20): ✅ variables.css → css-global-variables.css ✅ fonts.css → css-global-fonts.css ✅ utilities.css → css-global-utilities.css ✅ animations.css → css-global-animations.css ✅ responsive.css → css-global-responsive.css ✅ accessibility.css → css-global-accessibility.css ✅ print.css → css-global-print.css ✅ badges.css → css-global-badges.css ✅ pagination.css → css-global-pagination.css ✅ toc.css → css-global-toc.css ✅ generic-tables.css → css-global-generic-tables.css ✅ video.css → css-global-video.css ACTUALIZACIONES: - enqueue-scripts.php: Todas las referencias actualizadas (48 cambios) - functions.php: Version bump 1.0.9 → 1.0.10 TOTAL RENOMBRAMIENTOS: - Commit 8d876: 7 archivos (carpetas 05, 06, 07, 08, 11, 13, 16) - Este commit: 19 archivos (carpetas 10, 12, 14, 15, 17, 18, 19 + globales 20) - TOTAL: 26 archivos renombrados CORRESPONDENCIA 1-A-1 COMPLETADA: ✅ Cada componente tiene su archivo CSS con nombre de carpeta ✅ Archivos globales con prefijo css-global- ✅ Sin duplicaciones ✅ Nomenclatura consistente Issue: #133 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
214 lines
6.1 KiB
CSS
214 lines
6.1 KiB
CSS
/**
|
|
* Sistema de Tipografías - APUS Theme
|
|
*
|
|
* RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
|
|
* - Declaraciones @font-face (comentadas - usar Google Fonts)
|
|
* - Variables CSS de tipografía (:root)
|
|
* - Clases utilitarias de fuentes
|
|
*
|
|
* NO debe contener:
|
|
* - Estilos de body (van en style.css)
|
|
* - Estilos de elementos HTML (van en style.css)
|
|
* - Variables de colores o espaciados (van en variables.css)
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ============================================
|
|
SYSTEM FONTS (Por defecto - Recomendado)
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Stack de fuentes del sistema - Fallback */
|
|
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
|
|
/* Fuente primaria - Poppins según template y documentación */
|
|
--font-primary: 'Poppins', sans-serif;
|
|
|
|
/* Fuente para encabezados - Poppins según template */
|
|
--font-headings: 'Poppins', sans-serif;
|
|
|
|
/* Fuente para código (monospace) */
|
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
|
|
Consolas, 'Courier New', monospace;
|
|
|
|
/* Tamaños de fuente base */
|
|
--font-size-base: 16px;
|
|
--line-height-base: 1.6;
|
|
}
|
|
|
|
/* ELIMINADO: body, code, pre (movidos a style.css)
|
|
* Este archivo SOLO debe contener variables y @font-face
|
|
* Los estilos de elementos HTML van en style.css
|
|
*/
|
|
|
|
/* ============================================
|
|
POPPINS (Opcional - Solo si se activa)
|
|
============================================
|
|
|
|
Las siguientes declaraciones @font-face solo
|
|
se cargan cuando el usuario activa "Use Custom Fonts"
|
|
en Apariencia > Personalizar > Tipografía.
|
|
|
|
Para activar Poppins:
|
|
1. Descargar archivos WOFF2 de Google Fonts
|
|
2. Colocar en assets/fonts/poppins/
|
|
3. Descomentar las declaraciones @font-face
|
|
4. Activar en Customizer
|
|
|
|
============================================ */
|
|
|
|
/*
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
*/
|
|
|
|
/* Cuando Poppins esté activo, se aplica con clase .use-custom-fonts */
|
|
/*
|
|
.use-custom-fonts {
|
|
--font-primary: 'Poppins', var(--font-system);
|
|
--font-headings: 'Poppins', var(--font-system);
|
|
}
|
|
*/
|
|
|
|
/* ============================================
|
|
UTILIDADES DE FUENTES
|
|
============================================ */
|
|
|
|
/* Font Weight Utilities */
|
|
.font-light { font-weight: 300; }
|
|
.font-regular { font-weight: 400; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
|
|
/* Font Family Utilities */
|
|
.font-system {
|
|
font-family: var(--font-system) !important;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Font Size Utilities */
|
|
.text-xs { font-size: 0.75rem; line-height: 1.4; } /* 12px */
|
|
.text-sm { font-size: 0.875rem; line-height: 1.5; } /* 14px */
|
|
.text-base { font-size: 1rem; line-height: 1.6; } /* 16px */
|
|
.text-lg { font-size: 1.125rem; line-height: 1.6; } /* 18px */
|
|
.text-xl { font-size: 1.25rem; line-height: 1.5; } /* 20px */
|
|
.text-2xl { font-size: 1.5rem; line-height: 1.4; } /* 24px */
|
|
.text-3xl { font-size: 1.875rem; line-height: 1.3; } /* 30px */
|
|
.text-4xl { font-size: 2.25rem; line-height: 1.2; } /* 36px */
|
|
.text-5xl { font-size: 3rem; line-height: 1.1; } /* 48px */
|
|
|
|
/* Line Height Utilities */
|
|
.leading-none { line-height: 1; }
|
|
.leading-tight { line-height: 1.25; }
|
|
.leading-snug { line-height: 1.375; }
|
|
.leading-normal { line-height: 1.5; }
|
|
.leading-relaxed { line-height: 1.625; }
|
|
.leading-loose { line-height: 2; }
|
|
|
|
/* Text Transform */
|
|
.uppercase { text-transform: uppercase; }
|
|
.lowercase { text-transform: lowercase; }
|
|
.capitalize { text-transform: capitalize; }
|
|
.normal-case { text-transform: none; }
|
|
|
|
/* Font Smoothing */
|
|
.text-smooth,
|
|
.antialiased {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.subpixel-antialiased {
|
|
-webkit-font-smoothing: auto;
|
|
-moz-osx-font-smoothing: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE FONT SIZES
|
|
============================================ */
|
|
|
|
/* Móviles (< 768px) */
|
|
@media (max-width: 767px) {
|
|
:root {
|
|
--font-size-base: 15px;
|
|
}
|
|
|
|
/* ELIMINADO: h1-h6 responsive - Template usa Bootstrap defaults */
|
|
}
|
|
|
|
/* Tablets (768px - 1024px) */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
:root {
|
|
--font-size-base: 16px;
|
|
}
|
|
}
|
|
|
|
/* Desktop (> 1024px) */
|
|
@media (min-width: 1025px) {
|
|
:root {
|
|
--font-size-base: 16px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
PERFORMANCE NOTES
|
|
============================================
|
|
|
|
System Fonts Benefits:
|
|
✅ 0 HTTP requests (fuentes ya en el sistema)
|
|
✅ 0 KB descargados (mejora LCP)
|
|
✅ Sin FOIT/FOUT (sin parpadeo de texto)
|
|
✅ Mejor Core Web Vitals
|
|
✅ Familiar para usuarios (fuentes nativas)
|
|
|
|
Custom Fonts (Poppins):
|
|
⚠️ Requiere descarga (~30-50 KB por peso)
|
|
⚠️ Impacto en LCP si no se optimiza
|
|
✅ Branding consistente
|
|
✅ Diseño específico del template
|
|
|
|
Recomendación: Mantener system fonts por defecto.
|
|
Solo activar Poppins si el branding lo requiere.
|
|
|
|
============================================ */
|