From d3e879c439e895591d1cccbf9354af4fbca34303 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Sat, 6 Jun 2026 22:55:32 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Refactor=20footer=20layout?= =?UTF-8?q?=20and=20styles=20for=20improved=20design=20consistency?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- footer.php | 136 +++++++++---------- static/js/components/backToTop.js | 24 ++-- static/js/theme.js | 72 +++++----- styles/base/colors.css | 6 +- styles/base/typography.css | 2 + styles/blocks/buttons.css | 60 ++++---- styles/components/site-footer.css | 40 ++---- styles/fonts/lineicons.css | 20 ++- views/blocks/contact-block/contact-block.php | 1 - 9 files changed, 168 insertions(+), 193 deletions(-) diff --git a/footer.php b/footer.php index 939b66e..6424405 100644 --- a/footer.php +++ b/footer.php @@ -23,87 +23,75 @@ $footerNav = ! empty( $locations['footer_navigation'] ) - diff --git a/static/js/components/backToTop.js b/static/js/components/backToTop.js index 8a0ce2b..ce4a940 100644 --- a/static/js/components/backToTop.js +++ b/static/js/components/backToTop.js @@ -2,23 +2,21 @@ class BackToTopButton extends HTMLElement { connectedCallback() { this.innerHTML = ` - + `; 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); } } diff --git a/static/js/theme.js b/static/js/theme.js index 3d6e871..c1e01ed 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -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.`); diff --git a/styles/base/colors.css b/styles/base/colors.css index ef6c388..1ec82b1 100644 --- a/styles/base/colors.css +++ b/styles/base/colors.css @@ -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); diff --git a/styles/base/typography.css b/styles/base/typography.css index 4fd08d9..a1b4f37 100644 --- a/styles/base/typography.css +++ b/styles/base/typography.css @@ -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); diff --git a/styles/blocks/buttons.css b/styles/blocks/buttons.css index e90c843..e608e0a 100644 --- a/styles/blocks/buttons.css +++ b/styles/blocks/buttons.css @@ -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); + } } diff --git a/styles/components/site-footer.css b/styles/components/site-footer.css index 4c5437b..f5aae3f 100644 --- a/styles/components/site-footer.css +++ b/styles/components/site-footer.css @@ -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; } - } } diff --git a/styles/fonts/lineicons.css b/styles/fonts/lineicons.css index 0b6410c..989ab31 100644 --- a/styles/fonts/lineicons.css +++ b/styles/fonts/lineicons.css @@ -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); diff --git a/views/blocks/contact-block/contact-block.php b/views/blocks/contact-block/contact-block.php index 59d8079..bd32083 100644 --- a/views/blocks/contact-block/contact-block.php +++ b/views/blocks/contact-block/contact-block.php @@ -52,5 +52,4 @@ $wrapper = blockWrapperAttributes( $classes, $is_preview ); > -