Michael/PleinR
1
0 Fork 0
mirror of https://github.com/R0m1k3/PleinR.git synced 2026-10-11 17:27:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refonte du pied de page

Browse Source 
Trois colonnes dont une très large laissaient le tiers droit vide, les titres ne
se distinguaient pas des liens, et les deux icônes sociales flottaient en bas à
gauche sans rattachement.

- Quatre colonnes : marque, Accès rapide, Informations, Nous suivre. La largeur
  est enfin occupée, et la dernière colonne accueille aussi les coordonnées de
  l'association dès qu'elles sont renseignées dans Paramètres.
- Titres en capitales espacées sur le brun de la marque : ils reprennent le
  vocabulaire des pastilles utilisées partout ailleurs sur le site, et se lisent
  désormais comme des titres.
- Icônes sociales remplacées par des boutons libellés, calés à gauche pour ne
  pas s'étirer en pavés vides.
- Filet doré en haut du bloc, pastille dorée devant « Bassin de Pompey » : la
  page se referme au lieu de s'arrêter sur une ligne grise.
- Liens plus aérés, décalage léger au survol.
- Deux entrées utiles ajoutées : Rencontres passées et Espace adhérent.
- Replis : 3 colonnes sur tablette, 2 sur téléphone avec la marque et les
  réseaux sur toute la largeur.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QXNXRC4j5VLfKvpyyisrnb
This commit is contained in:
Claude committed 2026-07-25 13:11:29 +00:00
1 parent b0788d3f20
commit dd7bbfb777
2 files changed
+160 -56
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+111 -16
View File
@@ -319,48 +319,129 @@ button {
}
/* ---- Public footer & legal pages ---- */
.site-footer {
background: var(--cream-2);
/* Filet doré : referme la page au lieu d'une simple ligne grise. */
border-top: 3px solid var(--gold);
}
/* Quatre colonnes : à trois, la dernière laissait un tiers de la largeur vide. */
.footer-grid {
display: grid;
grid-template-columns: minmax(280px, 1.8fr) 1fr 1fr;
gap: 48px;
grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(0, 1fr));
gap: 40px;
align-items: start;
}
.footer-brand img {
display: block;
width: 96px;
height: auto;
}
.footer-tagline {
margin: 10px 0 0;
max-width: 340px;
color: var(--muted);
font-size: 13.5px;
line-height: 1.65;
}
.footer-title {
font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
color: var(--ink-strong);
font-size: 13px;
margin: 0 0 14px;
color: var(--brown);
font-size: 11.5px;
font-weight: 800;
margin: 3px 0 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
gap: 10px;
color: var(--muted);
font-size: 13px;
font-size: 13.5px;
}
.footer-links a,
.footer-links button {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: color 0.15s ease, transform 0.15s ease;
}
.footer-links a:hover,
.footer-links button:hover {
color: var(--brown) !important;
text-decoration: underline;
color: var(--brown);
transform: translateX(2px);
}
/* Boutons sociaux libellés : plus lisibles que deux icônes isolées, et ils
donnent enfin du contenu à la quatrième colonne. */
.footer-social {
display: flex;
flex-direction: column;
/* Sans cela les boutons s'étirent sur toute la colonne et deviennent des
pavés vides. */
align-items: flex-start;
gap: 9px;
}
.footer-social a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 13px;
border: 1px solid #e2d6bd;
border-radius: 11px;
background: #fff;
color: var(--ink-soft);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover {
transform: translateY(-1px);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 16px;
color: var(--muted);
font-size: 13px;
}
.footer-contact a {
color: inherit;
text-decoration: none;
}
.footer-contact a:hover {
color: var(--brown);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
gap: 10px 20px;
flex-wrap: wrap;
border-top: 1px solid #ded2b9;
margin-top: 26px;
margin-top: 34px;
padding-top: 18px;
color: var(--muted-2);
font-size: 12.5px;
}
.footer-bottom__place {
display: inline-flex;
align-items: center;
gap: 7px;
}
.footer-bottom__place::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
.legal-content h2 {
font-family: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
color: var(--ink-strong);
@@ -408,8 +489,12 @@ button {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr;
gap: 28px;
/* Quatre colonnes ne tiennent plus : la marque prend toute la ligne. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
}
.footer-grid > :first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
@@ -427,11 +512,21 @@ button {
padding: 0 16px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
}
.footer-grid > :first-child {
.footer-grid > :first-child,
/* « Nous suivre » resterait seule dans une colonne, la moitié droite vide. */
.footer-grid > :last-child {
grid-column: 1 / -1;
}
.footer-social {
flex-direction: row;
flex-wrap: wrap;
}
.footer-bottom {
justify-content: flex-start;
}
}
/* Évite tout débordement horizontal sur mobile. */
src/components/SiteFooter.tsx
+49 -40
View File
@@ -5,48 +5,27 @@ import { SOCIAL_BRAND, SocialIcon } from "./SocialIcons";
export async function SiteFooter() {
const year = new Date().getFullYear();
const socials = socialLinks(await getSiteSettings());
const settings = await getSiteSettings();
const socials = socialLinks(settings);
const email = settings.association_email.trim();
const phone = settings.association_phone.trim();
const address = settings.association_address.trim();
const hasContact = !!(email || phone || address);
return (
<footer style={{ background: "#EFE9DA", borderTop: "1px solid #e2d6bd" }}>
<div className="container" style={{ paddingTop: 34, paddingBottom: 24 }}>
<footer className="site-footer">
<div className="container" style={{ paddingTop: 40, paddingBottom: 26 }}>
<div className="footer-grid">
<div>
<div className="footer-brand">
<Link href="/" aria-label="Plein R — accueil" style={{ display: "inline-flex" }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/assets/logo.png" alt="Plein R" style={{ width: 118, height: "auto", display: "block" }} />
<img src="/assets/logo.png" alt="Plein R" />
</Link>
<p style={{ margin: "12px 0 0", maxWidth: 370, fontSize: 13.5, lineHeight: 1.65, color: "#6c6150" }}>
<p className="footer-tagline">
Association des commerçants et entreprises du Bassin de Pompey.
Réseau · Rencontre · Réussite.
</p>
{socials.length > 0 && (
<div style={{ display: "flex", gap: 9, marginTop: 16 }}>
{socials.map((s) => (
<a
key={s.network}
href={s.href}
target="_blank"
rel="noopener noreferrer"
aria-label={`Plein R sur ${s.label}`}
title={`Plein R sur ${s.label}`}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
width: 38,
height: 38,
borderRadius: 11,
border: "1px solid #e2d6bd",
background: "#fff",
color: SOCIAL_BRAND[s.network],
}}
>
<SocialIcon network={s.network} />
</a>
))}
</div>
)}
</div>
<div>
@@ -54,27 +33,57 @@ export async function SiteFooter() {
<div className="footer-links">
<Link href="/annuaire">Annuaire</Link>
<Link href="/#promotions">Promotions</Link>
<Link href="/association">Association</Link>
<Link href="/login">Connexion</Link>
<Link href="/association">L&apos;association</Link>
<Link href="/rencontres-passees">Rencontres passées</Link>
<Link href="/login">Espace adhérent</Link>
</div>
</div>
<div>
<div className="footer-title">Informations</div>
<div className="footer-links">
<ContactModalButton
label="Nous contacter"
style={{ background: "none", border: "none", padding: 0, font: "inherit", color: "inherit", textAlign: "left" }}
/>
<ContactModalButton label="Nous contacter" />
<Link href="/mentions-legales">Mentions légales</Link>
<Link href="/confidentialite">Confidentialité</Link>
</div>
</div>
<div>
{socials.length > 0 && (
<>
<div className="footer-title">Nous suivre</div>
<div className="footer-social">
{socials.map((s) => (
<a
key={s.network}
href={s.href}
target="_blank"
rel="noopener noreferrer"
aria-label={`Plein R sur ${s.label}`}
>
<span style={{ color: SOCIAL_BRAND[s.network], display: "inline-flex" }}>
<SocialIcon network={s.network} size={17} />
</span>
{s.label}
</a>
))}
</div>
</>
)}
{hasContact && (
<div className="footer-contact">
{email && <a href={`mailto:${email}`}>{email}</a>}
{phone && <a href={`tel:${phone.replace(/[^\d+]/g, "")}`}>{phone}</a>}
{address && <span>{address}</span>}
</div>
)}
</div>
</div>
<div className="footer-bottom">
<span>© {year} Plein R. Tous droits réservés.</span>
<span>Bassin de Pompey</span>
<span className="footer-bottom__place">Bassin de Pompey</span>
</div>
</div>
</footer>