diff --git a/package-lock.json b/package-lock.json index 598f64a..8df035d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -76,6 +76,7 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -215,6 +216,7 @@ "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", "dev": true, "license": "MIT", + "peer":true, "engines": { "node": ">=6.9.0" } @@ -1047,6 +1049,7 @@ "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-3.1.1.tgz", "integrity": "sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==", "license": "MIT", + "peer": true, "dependencies": { "@mdx-js/mdx": "^3.0.0", "source-map": "^0.7.0" @@ -1106,6 +1109,7 @@ "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", "integrity": "sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==", "license": "MIT", + "peer": true, "dependencies": { "@types/mdx": "^2.0.0" }, @@ -1350,6 +1354,7 @@ "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "playwright": "1.58.2" }, @@ -2191,6 +2196,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2485,6 +2491,7 @@ "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/types": "^7.26.0" } @@ -2559,6 +2566,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2812,8 +2820,7 @@ "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -3275,6 +3282,7 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3397,6 +3405,7 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -3643,6 +3652,7 @@ "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.55.0", "@typescript-eslint/types": "8.55.0", @@ -4072,6 +4082,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -6913,6 +6924,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -6922,6 +6934,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -7746,7 +7759,8 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/tapable": { "version": "2.3.0", @@ -7803,6 +7817,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -8457,6 +8472,7 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/app/_styles/main.css b/src/app/_styles/main.css index aebce83..92ebb45 100644 --- a/src/app/_styles/main.css +++ b/src/app/_styles/main.css @@ -4,7 +4,7 @@ @import "./about.css"; @import "../faq/faq.css"; @import "./contact.css"; -@import "../../components/layout/footer.css"; +@import "./contact.css"; @import "../../components/layout/navbar.css"; @import "../../components/layout/navbar-menu.css"; @import "../../components/ui/button/button.css"; diff --git a/src/components/layout/footer-alignment.md b/src/components/layout/footer-alignment.md new file mode 100644 index 0000000..0d4de65 --- /dev/null +++ b/src/components/layout/footer-alignment.md @@ -0,0 +1,34 @@ + # Footer Alignment & Mobile Responsiveness Fix + + ## Overview + This document outlines the modifications made to the `Footer` component and its associated styles (`footer.css`) to address alignment issues on mobile devices and enhance the overall visual hierarchy. + + ## Key Changes + + ### 1. Structural Layout Updates (CSS Grid & Flexbox) + - **Responsive Grid System**: Replaced the basic `1fr` grid with a more robust responsive layout. + - **Mobile**: Single column stack with increased gap (`3rem`) for better touch target separation. + - **Desktop (`min-width: 1024px`)**: Implemented a `2fr 1fr 1fr` grid to allocate more space to the description/mission statement while keeping links and social icons compact. + - **Flexbox Alignment**: + - `footer-bottom-content`: adopted `flex-direction: column-reverse` on mobile devices. This ensures legal/copyright text appears below navigation links on small screens, following standard mobile UX patterns. + - `footer-socials`: Aligned to `flex-end` on desktop to balance the layout against the left-aligned content. + + ### 2. Visual Enhancements & Typography + - **Animated Interactions**: Replaced standard `border-bottom` underlines with a CSS transition effect (`transform: scaleX`) on `.footer-link--underline`. This creates a smooth left-to-right underline animation on hover. + - **Typography**: + - Updated font weights to `500` for better readability. + - Added "Community" and "Follow Us" section headers in uppercase, tracking-wider styles to establish clear visual hierarchy. + - Standardized font sizes and colors using Tailwind utility classes (e.g., `text-gray-600`, `text-sm`). + - **Clean Cleanup**: Removed temporary debug styles (`background-color: red;`). + + ### 3. Component Refactoring (`footer.jsx`) + - **Semantic Grouping**: Grouped navigation links into a "Community" section and social icons into a "Follow Us" section. + - **Content Updates**: + - Added "Fiscally sponsored by Root Access" block with proper spacing. + - Renamed link labels for clarity (e.g., "meetup" → "Weekly Meetup"). + - Implemented dynamic date rendering for the copyright year (`new Date().getFullYear()`). + - **Tailwind Integration**: Utilized Tailwind utility classes for spacing (`mb-6`, `space-y-4`) and responsive visibility (`hidden md:block`) to reduce custom CSS bloat. + + ## Files Modified + - `src/components/layout/footer.css` + - `src/components/layout/footer.jsx` diff --git a/src/components/layout/footer.css b/src/components/layout/footer.css index edc3758..e16bf6a 100644 --- a/src/components/layout/footer.css +++ b/src/components/layout/footer.css @@ -1,54 +1,87 @@ .footer-top-content { display: grid; grid-template-columns: 1fr; - column-gap: 2rem; - row-gap: 2rem; + gap: 3rem; margin: auto; - padding: 2.5rem 1.5rem 2rem; + padding: 3rem 1.5rem; width: 100%; max-width: calc(var(--screen-xxl) + 80px); @media (min-width: 768px) { grid-template-columns: 1fr 1fr; + padding: 4rem 2.5rem; } - @media (min-width: 992px) { - grid-template-columns: 1fr 1fr auto; - padding: 4rem 2.5rem 2rem; + @media (min-width: 1024px) { + grid-template-columns: 2fr 1fr 1fr; + column-gap: 4rem; } } +.footer-link-list { + display: flex; + flex-direction: column; + gap: 1rem; +} + .footer-link--underline { cursor: pointer; - border-bottom: 1px solid var(--primary-900); color: var(--primary-900); - font-weight: bold; + font-weight: 500; text-decoration: none; + position: relative; + display: inline-block; + width: fit-content; +} + +.footer-link--underline::after { + content: ""; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 1px; + bottom: 0; + left: 0; + background-color: var(--primary-900); + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +.footer-link--underline:hover::after { + transform: scaleX(1); + transform-origin: bottom left; } .footer-bottom-content { display: flex; - flex-direction: column; - justify-content: space-between; + flex-direction: column-reverse; + gap: 1.5rem; margin: auto; - padding: 1rem 1.5rem; + padding: 2rem 1.5rem; max-width: calc(var(--screen-xxl) + 80px); + border-top: 1px solid rgba(0, 0, 0, 0.1); @media (min-width: 768px) { flex-direction: row; - } - - @media (min-width: 992px) { - padding: 1rem 2.5rem; + justify-content: space-between; + align-items: center; + padding: 2rem 2.5rem; } } .footer-socials { display: flex; - justify-content: start; - gap: 3rem; + gap: 1.5rem; + align-items: center; + + justify-content: flex-start; - @media (min-width: 992px) { - justify-content: end; + @media (min-width: 1024px) { + justify-content: flex-end; } } + +.caption-footer { + font-size: 0.875rem; + color: #666; +} diff --git a/src/components/layout/footer.jsx b/src/components/layout/footer.jsx index 02de873..b8a5a74 100644 --- a/src/components/layout/footer.jsx +++ b/src/components/layout/footer.jsx @@ -3,108 +3,129 @@ import twitterIcon from "@/../public/img/socialmedia/twitter.svg"; import youtubeIcon from "@/../public/img/socialmedia/youtube.svg"; import Image from "next/image"; import Link from "next/link"; +import "./footer.css"; -/** - * The default footer for the application. - * - "Get Involved" message: Describes Open Fresno's mission and fiscal sponsorship. - * - Action links: Provides quick links to the Open Fresno Meetup group, projects, and FAQs. - * - Social media links: Includes icons that link to the organization's Facebook, X (formerly Twitter), and YouTube pages. - * - Bottom section displays the "Open Fresno" title and additional links - * for getting started, learning about the team, and viewing the code of conduct. - * @returns {JSX.Element} The rendered footer component. - */ export default function Footer() { return ( -