calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Adjust Facebook icon sizes and card rounding

Browse source
This commit is contained in:
Calum Muir 2025-12-28 16:13:58 +00:00
parent 4496ab97b7
commit 7e0a01a754
2 changed files with 207 additions and 154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/SiteHeader.astro
View file

@ -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"
> >

115
src/pages/index.astro
View file

@ -38,8 +38,12 @@ const cardData = [
</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"
>
<div
class="relative w-full min-h-[70vh] sm:min-h-0 overflow-hidden"
>
<img <img
class="absolute inset-0 h-full w-full object-cover" class="absolute inset-0 h-full w-full object-cover"
alt="" alt=""
@ -50,29 +54,53 @@ const cardData = [
fetchpriority="high" fetchpriority="high"
decoding="async" decoding="async"
/> />
<div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"></div> <div
<SiteHeader navigationItems={navigationItems} theme="dark" className="px-6 sm:px-4" /> class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/35 to-black/25"
<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"> </div>
<h1 class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8] text-[34px] leading-[1.15] sm:text-[52px] sm:leading-[normal]"> <SiteHeader
<span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"> 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 Enriching lives through horses in the
</span> </span>
<span class="underline">Highlands</span> <span class="underline">Highlands</span>
<span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"> <span
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
>
since since
</span> </span>
<span class="underline">1975</span> <span class="underline">1975</span>
<span class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]">.</span> <span
class="[font-family:'Merriweather',Helvetica] font-bold text-[#f5f1e8]"
>.</span
>
</h1> </h1>
</div> </div>
</div> </div>
<div class="relative pb-16 sm:pb-[42px]"> <div class="relative pb-16 sm:pb-[42px]">
<div class="flex justify-end px-4 sm:px-6"> <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"> <blockquote
&quot;Our mission is to bring about meaningful and positive changes in the 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"
health and well-being of people with physical or mental disabilities through >
activities with our horses and ponies.&quot; &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> </blockquote>
</div> </div>
</div> </div>
@ -82,26 +110,41 @@ const cardData = [
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
<img class="w-full h-full object-contain" alt="Donate via JustGiving" src="/Button.webp" /> <img
class="w-full h-full object-contain"
alt="Donate via JustGiving"
src="/Button.webp"
/>
</a> </a>
</div> </div>
</section> </section>
<section class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0"> <section
class="w-full sm:max-w-[1200px] sm:mx-auto sm:px-8 pt-0 pb-0"
>
<div class="w-full"> <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="bg-[#d6d6d6] w-full px-4 sm:px-0 py-8 sm:py-[50px] sm:rounded-[7px]"
>
<div class="text-center"> <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]"> <p
Find out more about who we are, what we do and how you can support us to help make a 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. difference.
</p> </p>
<div class="mt-4 mx-auto h-[2px] w-16 bg-black/60"></div> <div class="mt-4 mx-auto h-[2px] w-16 bg-black/60">
</div>
</div> </div>
<div class="mt-8 sm:mt-[60px]"> <div class="mt-8 sm:mt-[60px]">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]"> <div
{cardData.map((card) => ( class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-[10px]"
<div class="w-full h-[220px] sm:h-[273px] overflow-hidden border-0 shadow-none bg-transparent"> >
{
cardData.map((card) => (
<div class="w-full h-[220px] sm:h-[273px] overflow-hidden rounded-[6px] border-0 shadow-none bg-transparent">
<a <a
class="group block h-full focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black/80" 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} href={card.href}
@ -111,12 +154,14 @@ const cardData = [
class="absolute inset-0 h-full w-full object-cover" class="absolute inset-0 h-full w-full object-cover"
alt={`${card.title} background`} alt={`${card.title} background`}
src={card.imageUrl} src={card.imageUrl}
srcset={card.imageSrcSet} srcset={
card.imageSrcSet
}
sizes="(min-width: 640px) 33vw, 100vw" sizes="(min-width: 640px) 33vw, 100vw"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />
<div class="absolute inset-0 bg-black/40"></div> <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"> <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]"> <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} {card.title}
@ -125,18 +170,26 @@ const cardData = [
</div> </div>
</a> </a>
</div> </div>
))} ))
}
</div> </div>
</div> </div>
<div class="mt-6 sm:mt-8"> <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
<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]"> 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"
Highland Group RDA is a member of the National Riding for the Disabled >
Association (RDA), and of the Grampian and Highland Regional RDA. <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 />
<br /> <br />
We are a registered Scottish Charitable Incorporated Organisation (SC007357). We are a registered Scottish Charitable Incorporated
Organisation (SC007357).
</div> </div>
<a <a
href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357" href="https://www.oscr.org.uk/about-charities/search-the-register/charity-details?number=SC007357"