✨feature: Refactor footer layout and styles for improved design consistency
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Sync TODOs with Issues / sync_todos (push) Successful in 6s
This commit is contained in:
Keith Solomon
+62
-74
@@ -23,87 +23,75 @@ $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>
|
||||
<footer role="contentinfo" class="site-footer bg-cwc-blue-02 text-white pt-16 pb-12 text-base">
|
||||
<div class="container mx-auto grid grid-cols-4 gap-6">
|
||||
<div class="max-w-[40ch]">
|
||||
<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>
|
||||
|
||||
<div id="footer-description" aria-label="Footer description">
|
||||
<?php echo wp_kses_post( $footerDesc ); ?>
|
||||
</div>
|
||||
<div id="footer-nav" aria-labelledby="footer-navigation">
|
||||
<?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 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 aria-labelledby="footer-area-1" class="prose-p:text-balance">
|
||||
<div id="footer-description" aria-label="Footer description">
|
||||
<?php echo wp_kses_post( $footerDesc ); ?>
|
||||
</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>
|
||||
<?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 class="text-right flex flex-col justify-end items-end">
|
||||
<?php dynamic_sidebar( 'footer-2' ); ?>
|
||||
|
||||
<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>
|
||||
<x-back-to-top></x-back-to-top>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links mt-12">
|
||||
<?php
|
||||
get_template_part(
|
||||
'views/partials/social-media',
|
||||
null,
|
||||
array(
|
||||
'circle' => true,
|
||||
'classes' => 'social-icons p-0 text-18px',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</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( '© ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="copyright text-white text-right py-3 text-12px">
|
||||
<?php
|
||||
if ( $copyright ) {
|
||||
echo wp_kses_post( $copyright );
|
||||
} else {
|
||||
echo esc_html( '© ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
|
||||
@@ -2,23 +2,21 @@
|
||||
class BackToTopButton extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style="">
|
||||
↑ Top
|
||||
</button>
|
||||
<button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style=""><i class="icon-arrow-upward"></i></button>
|
||||
`;
|
||||
|
||||
const btn = this.querySelector('#backToTopBtn');
|
||||
|
||||
let previousScrollY = window.scrollY;
|
||||
// let previousScrollY = window.scrollY;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScrollY = window.scrollY;
|
||||
const isScrollingUp = currentScrollY < previousScrollY;
|
||||
const shouldShowButton = currentScrollY > 300 && isScrollingUp;
|
||||
// window.addEventListener('scroll', () => {
|
||||
// const currentScrollY = window.scrollY;
|
||||
// const isScrollingUp = currentScrollY < previousScrollY;
|
||||
// const shouldShowButton = currentScrollY > 300 && isScrollingUp;
|
||||
|
||||
btn.style.display = shouldShowButton ? 'block' : 'none';
|
||||
previousScrollY = currentScrollY;
|
||||
});
|
||||
// btn.style.display = shouldShowButton ? 'block' : 'none';
|
||||
// previousScrollY = currentScrollY;
|
||||
// });
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
@@ -27,7 +25,7 @@ class BackToTopButton extends HTMLElement {
|
||||
}
|
||||
|
||||
export function registerBackToTopButton() {
|
||||
if (!customElements.get('back-to-top')) {
|
||||
customElements.define('back-to-top', BackToTopButton);
|
||||
if (!customElements.get('x-back-to-top')) {
|
||||
customElements.define('x-back-to-top', BackToTopButton);
|
||||
}
|
||||
}
|
||||
|
||||
+36
-36
@@ -10,41 +10,41 @@ import Navigation from './modules/Navigation.js';
|
||||
|
||||
// Add passive event listeners
|
||||
! function (e) {
|
||||
"function" == typeof define && define.amd ? define(e) : e()
|
||||
"function" == typeof define && define.amd ? define(e) : e()
|
||||
}(function () {
|
||||
let e;
|
||||
const t = ["scroll", "wheel", "touchstart", "touchmove", "touchenter", "touchend", "touchleave", "mouseout", "mouseleave", "mouseup", "mousedown", "mousemove", "mouseenter", "mousewheel", "mouseover"];
|
||||
if (function () {
|
||||
let e = !1;
|
||||
try {
|
||||
const t = Object.defineProperty({}, "passive", {
|
||||
get: function () {
|
||||
e = !0
|
||||
}
|
||||
});
|
||||
window.addEventListener("test", null, t);
|
||||
window.removeEventListener("test", null, t);
|
||||
} catch (e) { }
|
||||
return e
|
||||
}()) {
|
||||
const n = EventTarget.prototype.addEventListener;
|
||||
e = n;
|
||||
EventTarget.prototype.addEventListener = function (n, o, r) {
|
||||
let i;
|
||||
const s = "object" == typeof r && null !== r,
|
||||
u = s ? r.capture : r;
|
||||
if (s) {
|
||||
const t = Object.getOwnPropertyDescriptor(r, "passive");
|
||||
r = t && !0 !== t.writable && void 0 === t.set ? { ...r } : r;
|
||||
} else {
|
||||
r = {};
|
||||
}
|
||||
r.passive = void 0 !== (i = r.passive) ? i : -1 !== t.indexOf(n) && !0;
|
||||
r.capture = void 0 !== u && u;
|
||||
e.call(this, n, o, r);
|
||||
};
|
||||
EventTarget.prototype.addEventListener._original = e
|
||||
}
|
||||
let e;
|
||||
const t = ["scroll", "wheel", "touchstart", "touchmove", "touchenter", "touchend", "touchleave", "mouseout", "mouseleave", "mouseup", "mousedown", "mousemove", "mouseenter", "mousewheel", "mouseover"];
|
||||
if (function () {
|
||||
let e = !1;
|
||||
try {
|
||||
const t = Object.defineProperty({}, "passive", {
|
||||
get: function () {
|
||||
e = !0
|
||||
}
|
||||
});
|
||||
window.addEventListener("test", null, t);
|
||||
window.removeEventListener("test", null, t);
|
||||
} catch (e) { }
|
||||
return e
|
||||
}()) {
|
||||
const n = EventTarget.prototype.addEventListener;
|
||||
e = n;
|
||||
EventTarget.prototype.addEventListener = function (n, o, r) {
|
||||
let i;
|
||||
const s = "object" == typeof r && null !== r,
|
||||
u = s ? r.capture : r;
|
||||
if (s) {
|
||||
const t = Object.getOwnPropertyDescriptor(r, "passive");
|
||||
r = t && !0 !== t.writable && void 0 === t.set ? { ...r } : r;
|
||||
} else {
|
||||
r = {};
|
||||
}
|
||||
r.passive = void 0 !== (i = r.passive) ? i : -1 !== t.indexOf(n) && !0;
|
||||
r.capture = void 0 !== u && u;
|
||||
e.call(this, n, o, r);
|
||||
};
|
||||
EventTarget.prototype.addEventListener._original = e
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
@@ -69,8 +69,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
GetHeaderHeight();
|
||||
|
||||
// Add Back to Top button to body
|
||||
const backToTop = document.createElement('back-to-top');
|
||||
document.body.appendChild(backToTop);
|
||||
// const backToTop = document.createElement('x-back-to-top');
|
||||
// document.body.appendChild(backToTop);
|
||||
});
|
||||
|
||||
console.log(`theme.js loaded.`);
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
--color-background: oklch(89.75% 0 0);
|
||||
--color-text: var(--color-black);
|
||||
|
||||
--color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
|
||||
--color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
|
||||
--color-cwc-blue-03: oklch(80.63% 0.0724 230.4);
|
||||
--color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
|
||||
--color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
|
||||
--color-cwc-blue-03: oklch(80.63% 0.0724 230.4);
|
||||
--color-cwc-orange-01: oklch(63.53% 0.1751 29.61);
|
||||
|
||||
--color-primary: var(--color-cwc-blue-01);
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
* Font sizes at standard viewport widths:
|
||||
* | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
|
||||
* --------- | ----- | ----- | ----- | ------ | ------ | ------ | ------
|
||||
* text-12px | 10.00 | 10.36 | 10.52 | 10.85 | 11.18 | 11.38 | 12.00
|
||||
* text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00
|
||||
* text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00
|
||||
* text-18px | 16.00 | 16.36 | 16.52 | 16.85 | 17.18 | 17.38 | 18.00
|
||||
@@ -41,6 +42,7 @@
|
||||
--line-height: 1.6;
|
||||
|
||||
--text-base: 1rem;
|
||||
--text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
|
||||
--text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
|
||||
--text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
|
||||
--text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);
|
||||
|
||||
+28
-32
@@ -76,24 +76,6 @@
|
||||
|
||||
.btn:active, .button:active { transform: scale(99%); }
|
||||
|
||||
/* Back To Top Button */
|
||||
#backToTopBtn {
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
bottom: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.75em 1.5em;
|
||||
position: fixed;
|
||||
right: 2rem;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Variants
|
||||
*
|
||||
@@ -159,21 +141,35 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
|
||||
--button-hover-color: var(--color-dark);
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
background: var(--color-primary, #3857BC);
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
color: #fff;
|
||||
/* Back To Top Button */
|
||||
#backToTopBtn {
|
||||
align-items: center;
|
||||
background: var(--color-secondary);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 100%;
|
||||
color: var(--color-white);
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.85;
|
||||
padding: 0.75em 1.5em;
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
height: 1rem;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
outline: 1px solid transparent;
|
||||
padding: 1rem;
|
||||
transition: opacity 0.2s, background 0.2s;
|
||||
}
|
||||
width: 1rem;
|
||||
|
||||
.back-to-top:hover, .back-to-top:focus {
|
||||
background: var(--color-info, #233a7a);
|
||||
opacity: 1;
|
||||
outline: 2px solid var(--color-info, #233a7a);
|
||||
i {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin: -4px 0 0 0;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background: var(--color-secondary-800);
|
||||
border: 1px solid var(--color-secondary);
|
||||
color: var(--color-white);
|
||||
opacity: 1;
|
||||
outline: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,21 @@
|
||||
/* Footer styles */
|
||||
|
||||
.site-footer {
|
||||
#footRight {
|
||||
div {
|
||||
@apply col-span-1 md:col-span-4 lg:col-span-1;
|
||||
border-bottom: 1rem solid var(--color-orange, #F26B53);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
a { @apply text-white transition-colors duration-300 hover:text-secondary-400 focus-visible:text-secondary-400; }
|
||||
|
||||
.widget {
|
||||
li {
|
||||
@apply text-16px my-1 mb-2 leading-4;
|
||||
}
|
||||
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;
|
||||
}
|
||||
h4 { @apply font-bold text-18px text-secondary mb-2; }
|
||||
}
|
||||
|
||||
.menu-footer-menu-container {
|
||||
@apply grow;
|
||||
.menu-footer-menu-container { @apply grow; }
|
||||
|
||||
.copyright {
|
||||
p { @apply text-white leading-none m-0 p-0; }
|
||||
|
||||
a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
p { @apply leading-none m-0 p-0; }
|
||||
|
||||
a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,7 +26,8 @@ Lineicons regular icon font
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
font-size: 120%;
|
||||
font-size: 110%;
|
||||
line-height: 1;
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -37,11 +38,21 @@ Lineicons regular icon font
|
||||
*/
|
||||
}
|
||||
|
||||
.social-links{
|
||||
@apply flex flex-row justify-end w-full;
|
||||
|
||||
a {
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child { margin-right: 0 !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Circular Icons */
|
||||
.circular-icon {
|
||||
@apply box-content bg-secondary rounded-full text-gray-800 inline-block;
|
||||
@apply box-content bg-secondary rounded-full text-white flex justify-center items-center;
|
||||
|
||||
--size: 3rem;
|
||||
--size: 2rem;
|
||||
height: var(--size);
|
||||
text-align: center;
|
||||
width: var(--size);
|
||||
@@ -49,7 +60,8 @@ Lineicons regular icon font
|
||||
i {
|
||||
display: inline-block;
|
||||
height: var(--size);
|
||||
line-height: var(--size);
|
||||
line-height: 1;
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: var(--size);
|
||||
|
||||
@@ -52,5 +52,4 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview );
|
||||
></x-button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user