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}
|
||||
>
|
||||
<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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
"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"
|
||||
<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"
|
||||
>
|
||||
"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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue