From 7e0a01a754041db56c75f00c099c211013473794 Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Sun, 28 Dec 2025 16:13:58 +0000
Subject: [PATCH] Adjust Facebook icon sizes and card rounding

---
 src/components/SiteHeader.astro |   8 +-
 src/pages/index.astro           | 353 ++++++++++++++++++--------------
 2 files changed, 207 insertions(+), 154 deletions(-)

diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index 8f32f65..18412e2 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -57,11 +57,11 @@ const lineClass = isDark ? "bg-white" : "bg-black";
                     href={facebookHref}
                 >
                     <span
-                        class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/20 text-black"
+                        class="inline-flex items-center justify-center h-8 w-8 rounded-full border border-black/20 text-black"
                     >
                         <svg
                             viewBox="0 0 24 24"
-                            class="h-4 w-4"
+                            class="h-6 w-6"
                             aria-hidden="true"
                             focusable="false"
                         >
@@ -122,13 +122,13 @@ const lineClass = isDark ? "bg-white" : "bg-black";
                     }
                     <li class="hidden sm:block">
                         <a
-                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
+                            class={`inline-flex items-center justify-center h-10 w-10 sm:h-10 sm:w-10 rounded-full border ${borderClass} ${textClass}`}
                             href={facebookHref}
                             aria-label="Highland Group RDA on Facebook"
                         >
                             <svg
                                 viewBox="0 0 24 24"
-                                class="h-6 w-6"
+                                class="h-6 w-6 sm:h-6 sm:w-6"
                                 aria-hidden="true"
                                 focusable="false"
                             >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 90bc920..57c9851 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,159 +5,212 @@ import SiteFooter from "../components/SiteFooter.astro";
 import { navigationItems } from "../lib/navigation";
 
 const cardData = [
-  {
-    title: "About Us",
-    imageUrl: "/about-640.webp",
-    imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
-    href: "/about",
-  },
-  {
-    title: "Support Us",
-    imageUrl: "/support-640.webp",
-    imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
-    href: "/support-us",
-  },
-  {
-    title: "Contact",
-    imageUrl: "/contact-640.webp",
-    imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
-    href: "/contact",
-  },
+    {
+        title: "About Us",
+        imageUrl: "/about-640.webp",
+        imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
+        href: "/about",
+    },
+    {
+        title: "Support Us",
+        imageUrl: "/support-640.webp",
+        imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
+        href: "/support-us",
+    },
+    {
+        title: "Contact",
+        imageUrl: "/contact-640.webp",
+        imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
+        href: "/contact",
+    },
 ];
 ---
 
 <Base title="Home" path="/">
-  <Fragment slot="head">
-    <link
-      rel="preload"
-      as="image"
-      href="/Samantha-and-Connolly-1280.webp"
-      imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
-      imagesizes="100vw"
-    />
-  </Fragment>
-  <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
-    <main class="w-full">
-      <section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
-        <div class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden">
-          <img
-            class="absolute inset-0 h-full w-full object-cover"
-            alt=""
-            src="/Samantha-and-Connolly-1280.webp"
-            srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
-            sizes="100vw"
-            loading="eager"
-            fetchpriority="high"
-            decoding="async"
-          />
-          <div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"></div>
-          <SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" />
-          <div class="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]">
-            <div class="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm">
-              <h1 class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]">
-                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
-                  Enriching lives through horses in the
-                </span>
-                <span class="underline">Highlands</span>
-                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">
-                  since
-                </span>
-                <span class="underline">1975</span>
-                <span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">.</span>
-              </h1>
-            </div>
-          </div>
-          <div class="relative pb-16 sm:pb-[42px]">
-            <div class="flex justify-end px-4 sm:px-6">
-              <blockquote class="max-w-[520px] rounded-[7px] bg-black/35 px-5 py-5 sm:px-6 sm:py-6 [font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3] backdrop-blur-sm">
-                &quot;Our mission is to bring about meaningful and positive changes in the
-                health and well-being of people with physical or mental disabilities through
-                activities with our horses and ponies.&quot;
-              </blockquote>
-            </div>
-          </div>
-          <a
-            class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
-            href="https://www.justgiving.com/charity/highlandgrouprda"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" />
-          </a>
-        </div>
-      </section>
-
-      <section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0">
-        <div class="w-full">
-          <div class="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]">
-            <div class="text-center">
-              <p class="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]">
-                Find out more about who we are, what we do and how you can support us to help make a
-                difference.
-              </p>
-              <div class="mt-4 mx-auto h-[2px] w-16 bg-black/60"></div>
-            </div>
-
-            <div class="mt-8 sm:mt-[60px]">
-              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]">
-                {cardData.map((card) => (
-                  <div class="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent">
-                    <a
-                      class="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
-                      href={card.href}
-                    >
-                      <div class="relative p-2.5 h-full flex flex-col overflow-hidden">
-                        <img
-                          class="absolute inset-0 h-full w-full object-cover"
-                          alt={`${card.title} background`}
-                          src={card.imageUrl}
-                          srcset={card.imageSrcSet}
-                          sizes="(min-width: 640px) 33vw, 100vw"
-                          loading="lazy"
-                          decoding="async"
-                        />
-                        <div class="absolute inset-0 bg-black/40"></div>
-                        <div class="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
-                          <h3 class="group-hover:underline group-focus-visible:underline group-active:underline [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
-                            {card.title}
-                          </h3>
-                        </div>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            <div class="mt-6 sm:mt-8">
-              <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8">
-                <div class="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]">
-                  Highland Group RDA is a member of the National Riding for the Disabled
-                  Association (RDA), and of the Grampian and Highland Regional RDA.
-                  <br />
-                  <br />
-                  We are a registered Scottish Charitable Incorporated Organisation (SC007357).
-                </div>
-                <a
-                  href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
-                  target="_blank"
-                  rel="noreferrer"
-                  aria-label="View Highland Group RDA on the OSCR register"
+    <Fragment slot="head">
+        <link
+            rel="preload"
+            as="image"
+            href="/Samantha-and-Connolly-1280.webp"
+            imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
+            imagesizes="100vw"
+        />
+    </Fragment>
+    <div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
+        <main class="w-full">
+            <section
+                class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0"
+            >
+                <div
+                    class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden"
                 >
-                  <img
-                    class="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
-                    alt="Small mono"
-                    src="/small-mono.webp"
-                    loading="lazy"
-                    decoding="async"
-                  />
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <SiteFooter fullBleedOnMobile />
-    </main>
-  </div>
+                    <img
+                        class="absolute inset-0 h-full w-full object-cover"
+                        alt=""
+                        src="/Samantha-and-Connolly-1280.webp"
+                        srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
+                        sizes="100vw"
+                        loading="eager"
+                        fetchpriority="high"
+                        decoding="async"
+                    />
+                    <div
+                        class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
+                    >
+                    </div>
+                    <SiteHeader
+                        navigationItems={navigationItems}
+                        theme="dark"
+                        className="px-6 sm:px-4"
+                    />
+                    <div
+                        class="relative px-4 sm:px-6 pt-8 pb-6 sm:pt-[70px] sm:pb-[42px]"
+                    >
+                        <div
+                            class="max-w-[640px] rounded-[7px] bg-black/45 px-5 py-5 sm:px-6 sm:py-6 backdrop-blur-sm"
+                        >
+                            <h1
+                                class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]"
+                            >
+                                <span
+                                    class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
+                                >
+                                    Enriching lives through horses in the
+                                </span>
+                                <span class="underline">Highlands</span>
+                                <span
+                                    class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
+                                >
+                                    since
+                                </span>
+                                <span class="underline">1975</span>
+                                <span
+                                    class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
+                                    >.</span
+                                >
+                            </h1>
+                        </div>
+                    </div>
+                    <div class="relative pb-16 sm:pb-[42px]">
+                        <div class="flex justify-end px-4 sm:px-6">
+                            <blockquote
+                                class="max-w-[520px] rounded-[7px] bg-black/35 px-5 py-5 sm:px-6 sm:py-6 [font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-lg sm:text-2xl text-left sm:text-right tracking-[0] leading-[1.3] backdrop-blur-sm"
+                            >
+                                &quot;Our mission is to bring about meaningful
+                                and positive changes in the health and
+                                well-being of people with physical or mental
+                                disabilities through activities with our horses
+                                and ponies.&quot;
+                            </blockquote>
+                        </div>
+                    </div>
+                    <a
+                        class="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 w-[190px] sm:w-[240px] h-[48px] sm:h-[50px]"
+                        href="https://www.justgiving.com/charity/highlandgrouprda"
+                        target="_blank"
+                        rel="noreferrer"
+                    >
+                        <img
+                            class="w-full h-full object-contain"
+                            alt="Donate via JustGiving"
+                            src="/Button.webp"
+                        />
+                    </a>
+                </div>
+            </section>
+
+            <section
+                class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0"
+            >
+                <div class="w-full">
+                    <div
+                        class="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]"
+                    >
+                        <div class="text-center">
+                            <p
+                                class="mx-auto max-w-[820px] [font-family:'Merriweather',Helvetica] font-bold text-black text-[22px] sm:text-[32px] tracking-[0] leading-[1.3] sm:leading-[1.2] px-0 sm:px-[27px]"
+                            >
+                                Find out more about who we are, what we do and
+                                how you can support us to help make a
+                                difference.
+                            </p>
+                            <div class="mt-4 mx-auto h-[2px] w-16 bg-black/60">
+                            </div>
+                        </div>
+
+                        <div class="mt-8 sm:mt-[60px]">
+                            <div
+                                class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]"
+                            >
+                                {
+                                    cardData.map((card) => (
+                                        <div class="w-full h-[220px] sm:h-[273px] overflow-hidden rounded-[6px] border-0 shadow-none bg-transparent">
+                                            <a
+                                                class="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80"
+                                                href={card.href}
+                                            >
+                                                <div class="relative p-2.5 h-full flex flex-col overflow-hidden">
+                                                    <img
+                                                        class="absolute inset-0 h-full w-full object-cover"
+                                                        alt={`${card.title} background`}
+                                                        src={card.imageUrl}
+                                                        srcset={
+                                                            card.imageSrcSet
+                                                        }
+                                                        sizes="(min-width: 640px) 33vw, 100vw"
+                                                        loading="lazy"
+                                                        decoding="async"
+                                                    />
+                                                    <div class="absolute inset-0 bg-black/40" />
+                                                    <div class="relative mt-auto flex flex-col items-end justify-end gap-2.5 p-2.5 bg-[#7ca371]/85">
+                                                        <h3 class="group-hover:underline group-focus-visible:underline group-active:underline [font-family:'Merriweather',Helvetica] font-bold text-white text-2xl sm:text-4xl text-center tracking-[0] leading-[normal]">
+                                                            {card.title}
+                                                        </h3>
+                                                    </div>
+                                                </div>
+                                            </a>
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        </div>
+
+                        <div class="mt-6 sm:mt-8">
+                            <div
+                                class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between bg-[#d6d6d6] border-t border-black/20 px-6 sm:px-8 py-6 sm:py-8"
+                            >
+                                <div
+                                    class="flex-1 max-w-[700px] [font-family:'Public_Sans',Helvetica] font-extrabold text-black text-base sm:text-lg tracking-[0] leading-[1.6]"
+                                >
+                                    Highland Group RDA is a member of the
+                                    National Riding for the Disabled Association
+                                    (RDA), and of the Grampian and Highland
+                                    Regional RDA.
+                                    <br />
+                                    <br />
+                                    We are a registered Scottish Charitable Incorporated
+                                    Organisation (SC007357).
+                                </div>
+                                <a
+                                    href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    aria-label="View Highland Group RDA on the OSCR register"
+                                >
+                                    <img
+                                        class="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
+                                        alt="Small mono"
+                                        src="/small-mono.webp"
+                                        loading="lazy"
+                                        decoding="async"
+                                    />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <SiteFooter fullBleedOnMobile />
+        </main>
+    </div>
 </Base>