d-bis/miracles_in_motion
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix light/dark and responsive layout across mobile, tablet, and desktop.

Browse Source 
Sync theme toggle with html.dark body styles; Tailwind dark: on nav/footer; tablet uses hamburger until lg; symbol logo in dark mode; mobile menu scroll and contrast; cookie/donate FAB spacing.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
defiQUG
2026-05-27 13:28:41 -07:00
co-authored by Cursor
parent 51dffd79ca
commit b096a79573
7 changed files with 72 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/brand/MIM4U-Brand-Kit.zip
BIN
View File
Binary file not shown.
src/App.tsx
+4 -8
View File
@@ -4336,7 +4336,7 @@ function BackgroundDecor() {
function StickyDonate() {
return (
<div className="fixed bottom-4 right-4 z-50 md:hidden">
<div className="fixed bottom-4 left-4 z-40 lg:hidden">
<a
href="#/donate"
className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg shadow-primary-500/25 transition hover:scale-105"
@@ -4366,8 +4366,8 @@ function CookieBanner() {
if (!show) return null
return (
<div className="fixed bottom-4 left-4 right-4 z-50 card p-4 md:max-w-md md:right-auto" role="dialog" aria-label="Cookie consent">
<p className="text-sm">
<div className="fixed bottom-20 left-4 right-4 z-40 card p-4 sm:bottom-4 md:max-w-md md:right-auto lg:bottom-4" role="dialog" aria-label="Cookie consent">
<p className="text-sm text-neutral-700 dark:text-neutral-200">
We use cookies to improve your experience. By continuing, you agree to our{' '}
<a href="#/legal" className="underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded">cookie policy</a>.
</p>
@@ -4435,11 +4435,7 @@ function AppContent() {
}, [])
useEffect(() => {
if (darkMode) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
document.documentElement.classList.toggle('dark', darkMode)
localStorage.setItem('darkMode', darkMode.toString())
}, [darkMode])
src/components/Footer.tsx
+13 -13
View File
@@ -37,22 +37,22 @@ export function Footer() {
<h3 className="font-semibold">Get Involved</h3>
<ul className="mt-4 space-y-2 text-sm">
<li>
<a href="#/donate" className="navlink">
<a href="#/donate" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Donate
</a>
</li>
<li>
<a href="#/volunteers" className="navlink">
<a href="#/volunteers" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Volunteer
</a>
</li>
<li>
<a href="#/events" className="navlink">
<a href="#/events" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Community Events
</a>
</li>
<li>
<a href="#/stories" className="navlink">
<a href="#/stories" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Stories of Hope
</a>
</li>
@@ -63,22 +63,22 @@ export function Footer() {
<h3 className="font-semibold">About</h3>
<ul className="mt-4 space-y-2 text-sm">
<li>
<a href="#/about" className="navlink">
<a href="#/about" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
About Us
</a>
</li>
<li>
<a href="#/mission" className="navlink">
<a href="#/mission" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Our Mission
</a>
</li>
<li>
<a href="#/what-we-do" className="navlink">
<a href="#/what-we-do" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
What We Do
</a>
</li>
<li>
<a href="#/contact" className="navlink">
<a href="#/contact" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Contact Us
</a>
</li>
@@ -89,27 +89,27 @@ export function Footer() {
</a>
</li>
<li>
<a href="#/request-assistance" className="navlink">
<a href="#/request-assistance" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Request assistance
</a>
</li>
<li>
<a href="#/legal" className="navlink">
<a href="#/legal" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Legal & Policies
</a>
</li>
<li>
<a href="#/brand" className="navlink">
<a href="#/brand" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Brand assets
</a>
</li>
<li>
<a href="#/portals" className="navlink">
<a href="#/portals" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Staff & partner portals
</a>
</li>
<li>
<a href="#/sponsors" className="navlink">
<a href="#/sponsors" className="navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300">
Corporate partnerships
</a>
</li>
src/components/Navigation.tsx
+13 -13
View File
@@ -25,7 +25,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
}
const navLinkClass =
'navlink focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm lg:text-[0.9375rem]'
'navlink text-zinc-600 hover:text-primary-600 dark:text-zinc-300 dark:hover:text-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded text-sm xl:text-[0.9375rem] whitespace-nowrap'
return (
<>
@@ -42,7 +42,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
<LogoMark variant="nav" />
</a>
<div className="hidden items-center gap-3 md:flex lg:gap-4 xl:gap-5">
<div className="hidden items-center gap-2 lg:flex lg:gap-3 xl:gap-4">
{NAV_LINKS.map((link) => (
<a
key={link.href}
@@ -60,7 +60,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
))}
</div>
<div className="hidden items-center gap-3 md:flex">
<div className="hidden items-center gap-3 lg:flex">
<Magnetic>
<a
href="#/donate"
@@ -85,7 +85,7 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
</button>
</div>
<div className="flex items-center gap-2 md:hidden">
<div className="flex items-center gap-2 lg:hidden">
<Magnetic>
<a
href="#/donate"
@@ -116,36 +116,36 @@ export function Navigation({ darkMode, setDarkMode, mobileMenuOpen, setMobileMen
<motion.div
id="mobile-menu"
className="md:hidden"
className="lg:hidden"
initial={false}
animate={{ height: mobileMenuOpen ? 'auto' : 0, opacity: mobileMenuOpen ? 1 : 0 }}
transition={{ duration: 0.2 }}
style={{ overflow: 'hidden' }}
>
<div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-black/90">
<div className="space-y-1">
<a className="block rounded py-2 text-sm font-medium" href="#/">
<div className="border-t border-secondary-200/50 bg-[var(--mim-cream)]/95 px-4 py-3 backdrop-blur dark:border-white/10 dark:bg-neutral-950/95">
<div className="max-h-[min(70vh,28rem)] space-y-1 overflow-y-auto overscroll-contain">
<a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/">
Home
</a>
{NAV_LINKS.map((link) => (
<a
key={link.href}
className="block rounded py-2 text-sm font-medium focus-visible:ring-2 focus-visible:ring-primary-500"
className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100 focus-visible:ring-2 focus-visible:ring-primary-500"
href={link.href}
>
{link.label}
</a>
))}
<a className="block rounded py-2 text-sm font-medium" href="#/donate">
<a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/donate">
Donate
</a>
<a className="block rounded py-2 text-sm font-medium" href="#/request-assistance">
<a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/request-assistance">
Request assistance
</a>
<a className="block rounded py-2 text-sm font-medium" href="#/portals">
<a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/portals">
Portals
</a>
<a className="block rounded py-2 text-sm font-medium" href="#/sponsors">
<a className="block rounded py-2.5 text-sm font-medium text-neutral-800 dark:text-neutral-100" href="#/sponsors">
Partner with us
</a>
</div>
src/components/ui/LogoMark.tsx
+2 -2
View File
@@ -25,7 +25,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
<img
src={BRAND.symbolSvg}
alt=""
className="logo-mark__img logo-mark__img--symbol md:hidden"
className="logo-mark__img logo-mark__img--symbol block lg:hidden dark:block dark:lg:block"
width={100}
height={99}
decoding="async"
@@ -34,7 +34,7 @@ export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
<img
src={BRAND.horizontal}
alt=""
className="logo-mark__img logo-mark__img--horizontal hidden md:block"
className="logo-mark__img logo-mark__img--horizontal hidden lg:block dark:hidden"
width={1024}
height={354}
decoding="async"
src/index.css
+39 -63
View File
@@ -62,8 +62,7 @@
background-attachment: fixed;
}
.dark body,
body.dark {
html.dark body {
background: #0a0f0e;
background-image: none;
}
@@ -217,7 +216,7 @@
align-items: center;
}
@media (min-width: 768px) {
@media (min-width: 1024px) {
.mim-site-nav {
min-height: 4.5rem;
padding-top: 0.375rem;
@@ -251,10 +250,8 @@
max-width: 20rem;
}
@media (prefers-color-scheme: dark) {
.footer-brand-block .footer-tagline {
color: #d4d4d8;
}
.dark .footer-brand-block .footer-tagline {
color: #d4d4d8;
}
.btn-primary {
@@ -323,16 +320,14 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.btn-secondary {
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
color: #e5e5e5;
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: var(--mim-brand-gold);
}
.dark .btn-secondary {
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.1);
color: #e5e5e5;
}
.dark .btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
border-color: var(--mim-brand-gold);
}
.btn-white {
@@ -364,20 +359,8 @@
.navlink {
font-size: 0.875rem;
font-weight: 500;
color: #52525b;
transition: color 0.2s;
}
.navlink:hover {
color: var(--mim-brand-green);
}
@media (prefers-color-scheme: dark) {
.navlink {
color: #d4d4d8;
}
.navlink:hover {
color: var(--mim-brand-gold-bright);
}
}
.input-field {
width: 100%;
@@ -402,15 +385,13 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.input-field {
border: 1px solid #4b5563;
background-color: #1f2937;
color: #f3f4f6;
}
.input-field:focus {
border-color: var(--mim-brand-gold);
}
.dark .input-field {
border: 1px solid #4b5563;
background-color: #1f2937;
color: #f3f4f6;
}
.dark .input-field:focus {
border-color: var(--mim-brand-gold);
}
.line-clamp-2 {
@@ -449,14 +430,16 @@
outline: 2px solid var(--mim-brand-green);
outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
.input {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
}
.input:focus {
border-color: var(--mim-brand-gold);
}
.dark .input {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
color: #f3f4f6;
}
.dark .input::placeholder {
color: #9ca3af;
}
.dark .input:focus {
border-color: var(--mim-brand-gold);
}
.card {
@@ -467,11 +450,10 @@
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
}
@media (prefers-color-scheme: dark) {
.card {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05);
}
.dark .card {
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05);
color: #e5e5e5;
}
.card-hover {
@@ -496,10 +478,8 @@
color: var(--mim-brand-gold);
font-weight: 600;
}
@media (prefers-color-scheme: dark) {
.section-eyebrow {
color: var(--mim-brand-gold-bright);
}
.dark .section-eyebrow {
color: var(--mim-brand-gold-bright);
}
.section-title {
@@ -517,10 +497,8 @@
line-height: 2.5rem;
}
}
@media (prefers-color-scheme: dark) {
.section-title {
color: #f4f4f5;
}
.dark .section-title {
color: #f4f4f5;
}
.section-subtitle {
@@ -528,10 +506,8 @@
font-size: 1.125rem;
color: #52525b;
}
@media (prefers-color-scheme: dark) {
.section-subtitle {
color: #d4d4d8;
}
.dark .section-subtitle {
color: #d4d4d8;
}
}
src/pages/foundation/FoundationPages.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ function PageIntro({
return (
<div className="foundation-page mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
<p className="section-eyebrow">{eyebrow}</p>
<h1 className="section-title mt-2">{title}</h1>
<h1 className="section-title mt-2 text-primary-900 dark:text-zinc-50">{title}</h1>
<div className="mt-6 space-y-4 text-base leading-relaxed text-neutral-700 dark:text-neutral-300">
{children}
</div>