Adjust Facebook icon sizes and card rounding
This commit is contained in:
Calum Muir
parent
4496ab97b7
commit
7e0a01a754
2 changed files with 207 additions and 154 deletions
|
|
@ -57,11 +57,11 @@ const lineClass = isDark ? "bg-white" : "bg-black";
|
||||||
href={facebookHref}
|
href={facebookHref}
|
||||||
>
|
>
|
||||||
<span
|
<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
|
<svg
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="h-4 w-4"
|
class="h-6 w-6"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
>
|
>
|
||||||
|
|
@ -122,13 +122,13 @@ const lineClass = isDark ? "bg-white" : "bg-black";
|
||||||
}
|
}
|
||||||
<li class="hidden sm:block">
|
<li class="hidden sm:block">
|
||||||
<a
|
<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}
|
href={facebookHref}
|
||||||
aria-label="Highland Group RDA on Facebook"
|
aria-label="Highland Group RDA on Facebook"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
class="h-6 w-6"
|
class="h-6 w-6 sm:h-6 sm:w-6"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -5,159 +5,212 @@ import SiteFooter from "../components/SiteFooter.astro";
|
||||||
import { navigationItems } from "../lib/navigation";
|
import { navigationItems } from "../lib/navigation";
|
||||||
|
|
||||||
const cardData = [
|
const cardData = [
|
||||||
{
|
{
|
||||||
title: "About Us",
|
title: "About Us",
|
||||||
imageUrl: "/about-640.webp",
|
imageUrl: "/about-640.webp",
|
||||||
imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
|
imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
|
||||||
href: "/about",
|
href: "/about",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Support Us",
|
title: "Support Us",
|
||||||
imageUrl: "/support-640.webp",
|
imageUrl: "/support-640.webp",
|
||||||
imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
|
imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
|
||||||
href: "/support-us",
|
href: "/support-us",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Contact",
|
title: "Contact",
|
||||||
imageUrl: "/contact-640.webp",
|
imageUrl: "/contact-640.webp",
|
||||||
imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
|
imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
|
||||||
href: "/contact",
|
href: "/contact",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<Base title="Home" path="/">
|
<Base title="Home" path="/">
|
||||||
<Fragment slot="head">
|
<Fragment slot="head">
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
as="image"
|
as="image"
|
||||||
href="/Samantha-and-Connolly-1280.webp"
|
href="/Samantha-and-Connolly-1280.webp"
|
||||||
imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||||
imagesizes="100vw"
|
imagesizes="100vw"
|
||||||
/>
|
/>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
<div class="flex flex-col min-h-screen items-center bg-[#e2e2e2]">
|
||||||
<main class="w-full">
|
<main class="w-full">
|
||||||
<section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0">
|
<section
|
||||||
<div class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden">
|
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 mt-0 sm:mt-0"
|
||||||
<img
|
>
|
||||||
class="absolute inset-0 h-full w-full object-cover"
|
<div
|
||||||
alt=""
|
class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden"
|
||||||
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">
|
|
||||||
"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."
|
|
||||||
</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"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="w-[110px] h-[110px] sm:w-[140px] sm:h-[140px] object-cover self-start sm:self-auto"
|
class="absolute inset-0 h-full w-full object-cover"
|
||||||
alt="Small mono"
|
alt=""
|
||||||
src="/small-mono.webp"
|
src="/Samantha-and-Connolly-1280.webp"
|
||||||
loading="lazy"
|
srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||||
decoding="async"
|
sizes="100vw"
|
||||||
/>
|
loading="eager"
|
||||||
</a>
|
fetchpriority="high"
|
||||||
</div>
|
decoding="async"
|
||||||
</div>
|
/>
|
||||||
</div>
|
<div
|
||||||
</div>
|
class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
|
||||||
</section>
|
>
|
||||||
<SiteFooter fullBleedOnMobile />
|
</div>
|
||||||
</main>
|
<SiteHeader
|
||||||
</div>
|
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"
|
||||||
|
>
|
||||||
|
"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."
|
||||||
|
</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>
|
</Base>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue