ferst-core 0.1.0

package/components/SiteFooter.astro

@@ -0,0 +1,245 @@
+---
+/**
+ * Site-wide footer: site name, a one-line description, a Facebook /
+ * Contact link row, then a legal-nav + copyright strip. Extracted from
+ * Base.astro so changing footer links is a JSON edit, not a layout edit.
+ *
+ * Split masthead at 48em+ (768px, matching --bp-tablet): name/description
+ * left, Facebook/Contact right, one row — below that it's a centred stack.
+ * Fills the page's width deliberately on desktop instead of sitting as a
+ * small centred island inside a full-bleed band.
+ *
+ * Follows the page's light/dark theme like every other component. Colour
+ * rule throughout: accent links/labels are `--accent` in light mode and
+ * `--gold` in dark mode, never the reverse — `--gold` measures only
+ * ~1.75:1 against the light-mode footer background (fails WCAG AA badly),
+ * it only reads well on the dark background. Checked with the WCAG 2.1
+ * relative-luminance formula before writing the CSS below, not after.
+ */
+import type { NavLink } from '../content/schemas';
+
+interface Props {
+  facebookUrl: string;
+  footerLinks: NavLink[];
+  footerClass?: string;
+  /** Brand / site name shown in the footer masthead. */
+  shortName: string;
+  /** Optional one-line tagline under the brand. Client-provided; omitted if blank. */
+  tagline?: string;
+}
+
+const { facebookUrl, footerLinks, footerClass, shortName, tagline } = Astro.props;
+const year = new Date().getFullYear();
+---
+
+<footer class:list={['site-footer', footerClass]}>
+  <div class="footer-top">
+    <div class="footer-row">
+      <div class="footer-copyblock">
+        <p class="footer-brand">{shortName}</p>
+        {tagline && <p class="footer-blurb">{tagline}</p>}
+      </div>
+      <div class="footer-social">
+        {facebookUrl && (
+          <>
+            <a class="footer-social__link" href={facebookUrl} target="_blank" rel="noopener noreferrer">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M22 12c0-5.522-4.477-10-10-10S2 6.478 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987H7.898V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path>
+              </svg>
+              Facebook
+            </a>
+            <span class="footer-social__divider" aria-hidden="true"></span>
+          </>
+        )}
+        <a class="footer-social__link" href="/contact/">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          Contact
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer-bottom">
+    <nav class="footer-nav" aria-label="Footer navigation">
+      {footerLinks.map((link) => (
+        <a href={link.href} set:html={link.label} />
+      ))}
+      <button type="button" id="footer-cookie-preferences">Cookie preferences</button>
+    </nav>
+    <p class="footer-copy">&copy; {year} All rights reserved.</p>
+  </div>
+</footer>
+
+<script>
+  document.getElementById('footer-cookie-preferences')?.addEventListener('click', () => {
+    document.dispatchEvent(new CustomEvent('open-cookie-preferences'));
+  });
+</script>
+
+<style is:global>
+  /*
+   * Every rule below is qualified under `.site-footer` on purpose, even
+   * where a bare class would normally do. Base.astro's global stylesheet
+   * carries `[data-theme="dark"] p { color: #C8D4C2 }` and
+   * `[data-theme="dark"] a { color: #E8A84A }` — both specificity (0,1,1).
+   * A bare `.footer-brand { color: ... }` is only (0,1,0) and loses that
+   * fight in dark mode. Prefixing with `.site-footer` (0,2,0/1) wins
+   * outright instead of depending on stylesheet order.
+   */
+  .site-footer {
+    font-size: 0.85rem;
+    background: var(--bg-tag);
+    color: var(--fg);
+  }
+  [data-theme="dark"] .site-footer {
+    background: var(--dark-bg);
+    color: var(--text-light);
+  }
+  .site-footer a {
+    text-decoration: none;
+  }
+  .site-footer a:focus-visible,
+  .site-footer button:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  /* ── Top: title, description, social row ──
+     Below 48em (768px): centred stack, same as before. At 768px+: a split
+     masthead — name/description left, Facebook/Contact right — so the
+     top section uses the page's width instead of sitting as a small
+     centred island inside it. */
+  .site-footer .footer-top {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding: clamp(1.75rem, 4vw, 2.5rem) 1.25rem clamp(1.5rem, 3vw, 2rem);
+  }
+  .site-footer .footer-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: center;
+  }
+  .site-footer .footer-copyblock {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .site-footer .footer-brand {
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    font-size: 1.15rem;
+    line-height: 1.3;
+    color: inherit;
+  }
+  .site-footer .footer-blurb {
+    margin: 0;
+    font-size: 0.85rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--muted);
+  }
+  .site-footer .footer-social {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    margin-top: 0.35rem;
+  }
+  @media (min-width: 48em) {
+    .site-footer .footer-row {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+    }
+    .site-footer .footer-social {
+      margin-top: 0;
+    }
+  }
+  .site-footer .footer-social__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-height: 44px;
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--accent);
+  }
+  [data-theme="dark"] .site-footer .footer-social__link {
+    color: var(--gold);
+  }
+  .site-footer .footer-social__divider {
+    width: 1px;
+    height: 1.4rem;
+    background: var(--border);
+  }
+
+  /* ── Legal nav + copyright ── */
+  .site-footer .footer-bottom {
+    border-top: 1px solid var(--border);
+    padding: 1.1rem clamp(1.25rem, 4vw, 2.25rem);
+    max-width: 72rem;
+    margin-inline: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.6rem 1.5rem;
+  }
+  .site-footer .footer-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.3rem 1rem;
+  }
+  .site-footer .footer-nav a,
+  .site-footer .footer-nav button {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    font-family: inherit;
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.02em;
+    color: var(--accent);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  [data-theme="dark"] .site-footer .footer-nav a,
+  [data-theme="dark"] .site-footer .footer-nav button {
+    color: var(--gold);
+  }
+  .site-footer .footer-copy {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    font-size: 0.68rem;
+    font-weight: 400;
+    color: var(--muted);
+  }
+
+  /* 48em / 768px, matching --bp-tablet in theme.css — the bottom bar's
+     row layout (legal nav | copyright, space-between) gets cramped once
+     the nav wraps below it, so it stacks and centres instead. */
+  @media (min-width: 48em) {
+    .site-footer .footer-bottom {
+      flex-direction: row;
+      justify-content: space-between;
+      text-align: left;
+    }
+    .site-footer .footer-nav {
+      justify-content: flex-start;
+    }
+  }
+
+  @media (max-width: 22.5em) {
+    .site-footer .footer-social {
+      gap: 1rem;
+    }
+  }
+</style>