keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(footer): Carbon Blue surface + cleaner widget rendering

Browse Source
This commit is contained in:
Keith Solomon
2026-08-16 13:12:01 -05:00
parent bb8c35a0a3
commit 2d9f92618b
2 changed files with 67 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
footer.php
+44 -76
View File
@@ -23,86 +23,54 @@ $footerNav = ! empty( $locations['footer_navigation'] )
</main>
<footer role="contentinfo" class="site-footer bg-gray-800 text-white text-base">
<div class="pt-16 pb-12 text-base">
<div class="container mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-4 md:col-span-8 lg:col-span-4 max-w-[40ch] prose-p:text-14px prose-p:mb-4 text-balance" aria-labelledby="footer-header">
<h2 id="footer-header" class="max-w-64 h-auto">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-footer__logo-link h-full w-full">
<?php if ( $footerLogo ) { ?>
<img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="site-footer__logo-image" />
<?php
} else {
echo esc_html( get_bloginfo( 'name' ) );
}
?>
</a>
</h2>
<div id="footer-description" aria-label="Footer description">
<?php echo wp_kses_post( $footerDesc ); ?>
</div>
<div class="social-links mt-8">
<?php
get_template_part(
'views/partials/social-media',
null,
array(
'circle' => false,
'classes' => 'social-icons p-0 mr-2 text-30px text-gray-300! hover:text-info!',
)
);
?>
</div>
</div>
<div id="footRight" class="col-span-4 md:col-span-8 grid md:grid-cols-4 gap-10 lg:justify-end">
<div aria-labelledby="footer-area-1" class="prose-p:text-balance">
<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-1">Footer Area 1</h3>
<?php dynamic_sidebar( 'footer-1' ); ?>
</div>
<div aria-labelledby="footer-area-2" class="prose-p:text-balance">
<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-2">Footer Area 2</h3>
<?php dynamic_sidebar( 'footer-2' ); ?>
</div>
<div aria-labelledby="footer-area-3" class="prose-p:text-balance">
<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-3">Footer Area 3</h3>
<?php dynamic_sidebar( 'footer-3' ); ?>
</div>
<div id="footer-nav" aria-labelledby="footer-navigation">
<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-navigation"><?php echo esc_html__( 'Navigation' ); ?></h3>
<?php if ( $footerNav ) : ?>
<nav class="site-footer__nav" aria-label="Footer navigation">
<ul class="site-footer__nav-list">
<?php foreach ( $footerNav as $item ) : ?>
<li class="site-footer__nav-item list-none text-left <?php echo esc_attr( implode( ' ', $item->classes ) ); ?>">
<a href="<?php echo esc_url( $item->url ); ?>" class="site-footer__nav-link">
<?php echo esc_html( $item->title ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<?php endif; ?>
</div>
</div>
<footer role="contentinfo" class="site-footer">
<div class="container mx-auto py-12">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="site-footer__brand max-w-[40ch]">
<h2 class="site-footer__title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php if ( $footerLogo ) { ?>
<img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
<?php } else {
echo esc_html( get_bloginfo( 'name' ) );
} ?>
</a>
</h2>
<?php if ( $footerDesc ) : ?>
<p class="site-footer__desc"><?php echo wp_kses_post( $footerDesc ); ?></p>
<?php endif; ?>
</div>
<?php for ( $i = 1; $i <= 3; $i++ ) :
$area_id = 'footer-' . $i;
if ( ! is_active_sidebar( $area_id ) ) {
continue;
}
?>
<div class="site-footer__area">
<?php dynamic_sidebar( $area_id ); ?>
</div>
<?php endfor; ?>
<?php if ( $footerNav ) : ?>
<nav class="site-footer__nav" aria-label="<?php echo esc_attr__( 'Footer navigation', 'ks-portfolio' ); ?>">
<h3><?php echo esc_html__( 'Navigation', 'ks-portfolio' ); ?></h3>
<ul>
<?php foreach ( $footerNav as $item ) : ?>
<li>
<a href="<?php echo esc_url( $item->url ); ?>">
<?php echo esc_html( $item->title ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<?php endif; ?>
</div>
</div>
<div class="copyright bg-primary text-white text-center py-3 text-14px">
<?php
if ( $copyright ) {
echo wp_kses_post( $copyright );
} else {
echo esc_html( '&copy; ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
}
?>
<div class="site-footer__copyright">
<?php echo wp_kses_post( $copyright ); ?>
</div>
</footer>
styles/components/site-footer.css
+23 -37
View File
@@ -1,41 +1,27 @@
/* Footer styles */
.site-footer {
#footRight {
div {
@apply col-span-1 md:col-span-4 lg:col-span-1;
h3 {
@apply font-bold text-secondary-300 text-20px mb-4 pb-2 border-b border-b-secondary-300
}
a {
@apply text-footlinks hover:opacity-60;
}
}
.widget {
li {
@apply text-16px my-1 mb-2 leading-4;
}
h4 {
@apply font-bold text-18px text-secondary mb-2;
}
a {
@apply transition-colors duration-300 hover:text-success focus-visible:text-success;
}
}
.menu-footer-menu-container {
@apply grow;
}
}
.copyright {
p { @apply leading-none m-0 p-0; }
a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
}
background: var(--color-surface, #121318);
color: var(--color-on-surface, #e3e1e9);
border-top: 1px solid var(--color-outline-variant, #444651);
}
.site-footer__title a { color: var(--color-on-surface, #e3e1e9); text-decoration: none; }
.site-footer__desc { color: var(--color-on-surface-variant, #c5c5d3); }
.site-footer__area h3,
.site-footer__nav h3 {
color: var(--color-on-surface, #e3e1e9);
font-family: var(--font-sans);
font-weight: 700;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-outline-variant, #444651);
}
.site-footer a { color: var(--color-primary, #b6c4ff); }
.site-footer a:hover { text-decoration: underline; }
.site-footer__copyright {
background: var(--color-surface-container-lowest, #0d0e13);
color: var(--color-on-surface-variant, #c5c5d3);
text-align: center;
padding: 0.75rem;
font-size: 0.875rem;
}