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

Make pages full-bleed on mobile

Browse source
This commit is contained in:
Calum Muir 2025-12-21 21:07:47 +00:00
parent 7e3b72d8f3
commit f484437451
8 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/SiteFooter.tsx
View file

@ -1,8 +1,17 @@
import React from "react"; import React from "react";
export const SiteFooter = (): JSX.Element => { type SiteFooterProps = {
fullBleedOnMobile?: boolean;
};
export const SiteFooter = ({
fullBleedOnMobile = false,
}: SiteFooterProps): JSX.Element => {
const outerClass = fullBleedOnMobile
? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
: "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
return ( return (
<footer className="mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8"> <footer className={outerClass}>
<div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8"> <div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8">
<div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]"> <div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
<p className="font-semibold"> <p className="font-semibold">

8
client/src/pages/About.tsx
View file

@ -77,7 +77,7 @@ export const About = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@ -193,7 +193,7 @@ export const About = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="h-px w-24 bg-black/20" /> <div className="h-px w-24 bg-black/20" />
<h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@ -306,7 +306,7 @@ export const About = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="h-px w-24 bg-black/20" /> <div className="h-px w-24 bg-black/20" />
<h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@ -323,7 +323,7 @@ export const About = (): JSX.Element => {
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

6
client/src/pages/Contact.tsx
View file

@ -55,7 +55,7 @@ export const Contact = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]"> <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
<div> <div>
@ -131,7 +131,7 @@ export const Contact = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="h-px w-full bg-black/20 mb-6" /> <div className="h-px w-full bg-black/20 mb-6" />
<div className="overflow-hidden rounded-[7px] border border-black/10"> <div className="overflow-hidden rounded-[7px] border border-black/10">
@ -145,7 +145,7 @@ export const Contact = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

2
client/src/pages/Desktop.tsx
View file

@ -171,7 +171,7 @@ export const Desktop = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

4
client/src/pages/Facebook.tsx
View file

@ -60,7 +60,7 @@ export const Facebook = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="mt-6 w-full max-w-[500px] mx-auto"> <div className="mt-6 w-full max-w-[500px] mx-auto">
<iframe <iframe
@ -83,7 +83,7 @@ export const Facebook = (): JSX.Element => {
</a> </a>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

4
client/src/pages/News.tsx
View file

@ -54,7 +54,7 @@ export const News = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div className="grid grid-cols-1 gap-6 sm:grid-cols-3"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
{newsArticles.map((item) => ( {newsArticles.map((item) => (
@ -96,7 +96,7 @@ export const News = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

4
client/src/pages/NewsArticle.tsx
View file

@ -64,7 +64,7 @@ export const NewsArticle = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<div <div
className="prose prose-neutral max-w-[720px] text-base sm:text-lg [font-family:'Public_Sans',Helvetica] prose-headings:font-['Merriweather',Helvetica] prose-headings:font-bold prose-p:leading-[1.75] prose-li:leading-[1.75]" className="prose prose-neutral max-w-[720px] text-base sm:text-lg [font-family:'Public_Sans',Helvetica] prose-headings:font-['Merriweather',Helvetica] prose-headings:font-bold prose-p:leading-[1.75] prose-li:leading-[1.75]"
@ -80,7 +80,7 @@ export const NewsArticle = (): JSX.Element => {
</div> </div>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );

10
client/src/pages/SupportUs.tsx
View file

@ -62,7 +62,7 @@ export const SupportUs = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#f2e2a2] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#f2e2a2] px-6 sm:px-8 py-6 sm:py-8">
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
<div> <div>
@ -93,7 +93,7 @@ export const SupportUs = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Volunteering Volunteering
@ -189,7 +189,7 @@ export const SupportUs = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Sponsor a pony Sponsor a pony
@ -243,7 +243,7 @@ export const SupportUs = (): JSX.Element => {
</div> </div>
</section> </section>
<section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0"> <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
<div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8"> <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
<h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl"> <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
Fundraising Fundraising
@ -266,7 +266,7 @@ export const SupportUs = (): JSX.Element => {
</p> </p>
</div> </div>
</section> </section>
<SiteFooter /> <SiteFooter fullBleedOnMobile />
</main> </main>
</div> </div>
); );