From 3501ecd459f1e4798f7d2889fee158ff2552123e Mon Sep 17 00:00:00 2001 From: Varna Sri Raman Date: Thu, 9 Jul 2026 09:04:51 +0000 Subject: [PATCH] Add shared canonical footer (ImpactMojo shell) Adopt the ImpactMojo shell's shared footer for a frame identical to the other libraries: - Update the vendored ImpactMojo Kit to 1.1.0 (adds .imx-footer). - Replace the footer on index and resource pages with the canonical footer (brand mark + four-library ecosystem nav + tagline), Discourses current. - Precache the updated kit and bump the service-worker cache to dd-v3. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_012msh1nNMxadJd417S8FjP2 --- css/impactmojo-kit.css | 41 ++++++++++++++++++++++++++++++++++++++++- index.html | 20 +++++++++----------- resource.html | 20 +++++++++----------- service-worker.js | 2 +- 4 files changed, 59 insertions(+), 24 deletions(-) diff --git a/css/impactmojo-kit.css b/css/impactmojo-kit.css index e533974..be59ea3 100644 --- a/css/impactmojo-kit.css +++ b/css/impactmojo-kit.css @@ -6,7 +6,7 @@ link it BEFORE the site's own stylesheet, then reference the --imx-* tokens (or use the .imx-* components) instead of hard-coding brand values. - Version: 1.0.0 + Version: 1.1.0 ========================================================================== */ /* ---------- Canonical brand tokens (light) ---------- */ @@ -97,3 +97,42 @@ /* Focus ring */ .imx-focusable:focus-visible { outline: 2px solid var(--imx-accent); outline-offset: 2px; border-radius: 4px; } + +/* ========================================================================== + Shared shell — canonical footer (identical across every ImpactMojo app) + ========================================================================== */ +.imx-footer { + background: #12161c; + color: rgba(255,255,255,0.72); + border-top: 3px solid transparent; + border-image: var(--imx-brand-grad) 1; + padding: 28px 0; + margin-top: auto; +} +.imx-footer-inner { + max-width: 1120px; margin: 0 auto; padding: 0 24px; + display: flex; flex-direction: column; gap: 14px; +} +.imx-footer-brandrow { + display: flex; align-items: center; justify-content: space-between; + gap: 16px; flex-wrap: wrap; +} +.imx-footer-brand { + display: inline-flex; align-items: center; gap: 9px; + color: #fff; font-weight: 700; font-family: var(--imx-font-serif); + text-decoration: none; font-size: 1rem; +} +.imx-footer-brand:hover { color: #fff; text-decoration: none; } +.imx-footer-nav { display: flex; gap: 18px; flex-wrap: wrap; } +.imx-footer-nav a { + color: rgba(255,255,255,0.72); font-size: 0.85rem; font-weight: 600; + text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 1px; +} +.imx-footer-nav a:hover { color: #fff; border-bottom-color: var(--imx-accent-2); } +.imx-footer-nav a.current { color: #fff; border-bottom-color: var(--imx-accent-2); } +.imx-footer-tagline { + font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 660px; margin: 0; +} +.imx-footer-tagline strong { color: rgba(255,255,255,0.85); } +.imx-footer-tagline a { color: rgba(255,255,255,0.78); text-decoration: underline; } +@media (max-width: 600px) { .imx-footer-brandrow { flex-direction: column; align-items: flex-start; } } diff --git a/index.html b/index.html index 5feaae2..8b266d4 100644 --- a/index.html +++ b/index.html @@ -286,17 +286,15 @@

Suggest a Resource

- +