[COMPONENTE 10] Implementar Post Content con tipografía optimizada - Issue #120
- Cambiar <div> a <article> para mejor semántica HTML - Agregar CSS completo con 9 selectores: * .post-content: Contenedor con fondo, padding, shadow * .post-content h2: Border-bottom naranja 3px * .post-content h3: Color navy light para jerarquía * .post-content p: Line-height 1.8 para legibilidad * .post-content ul/ol: Listas estilizadas * .post-content li: Items con espaciado * .post-content strong: Color navy para destacar * .post-content a: Enlaces naranjas con underline * .post-content a:hover: Hover naranja oscuro Archivos modificados: - wp-content/themes/apus-theme/single.php (líneas 61, 70) - wp-content/themes/apus-theme/assets/css/style.css (líneas 865-921) 🎨 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -861,3 +861,60 @@ img {
|
|||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* === POST CONTENT === */
|
||||||
|
|
||||||
|
.post-content {
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h2 {
|
||||||
|
color: var(--color-navy-primary);
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
padding-bottom: 0.75rem;
|
||||||
|
border-bottom: 3px solid var(--color-orange-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content h3 {
|
||||||
|
color: var(--color-navy-light);
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content p {
|
||||||
|
color: var(--color-neutral-600);
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content ul,
|
||||||
|
.post-content ol {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content li {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--color-neutral-600);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content strong {
|
||||||
|
color: var(--color-navy-primary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a {
|
||||||
|
color: var(--color-orange-primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-content a:hover {
|
||||||
|
color: var(--color-orange-hover);
|
||||||
|
}
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ get_header();
|
|||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<!-- Post Content -->
|
<!-- Post Content -->
|
||||||
<div class="post-content">
|
<article class="post-content">
|
||||||
<?php
|
<?php
|
||||||
the_content();
|
the_content();
|
||||||
|
|
||||||
@@ -67,7 +67,7 @@ get_header();
|
|||||||
'after' => '</div>',
|
'after' => '</div>',
|
||||||
));
|
));
|
||||||
?>
|
?>
|
||||||
</div>
|
</article>
|
||||||
|
|
||||||
<!-- Share Buttons (Template líneas 786-810) -->
|
<!-- Share Buttons (Template líneas 786-810) -->
|
||||||
<div class="my-5 py-4 border-top">
|
<div class="my-5 py-4 border-top">
|
||||||
|
|||||||
Reference in New Issue
Block a user