Footer: fix mobile padding and overflow
This commit is contained in:
parent
54c4aa698b
commit
d4c0b2fc51
|
|
@ -80,18 +80,18 @@ function NewsletterBox() {
|
||||||
export function Footer() {
|
export function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
|
<footer dir="rtl" style={{ backgroundColor: 'var(--ink)', color: 'rgba(255,255,255,0.6)' }}>
|
||||||
<div style={{ padding: '56px 0 48px' }} className="max-w-7xl mx-auto w-full px-6 max-md:px-5">
|
<div className="max-w-7xl mx-auto w-full px-8 max-md:px-6" style={{ paddingTop: 56, paddingBottom: 48 }}>
|
||||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-start' }} className="max-md:grid-cols-1 max-md:gap-10">
|
<div className="grid grid-cols-2 max-md:grid-cols-1 gap-10">
|
||||||
|
|
||||||
{/* Brand */}
|
{/* Brand */}
|
||||||
<div style={{ minWidth: 0 }}>
|
<div>
|
||||||
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.2, marginBottom: 4 }}>
|
<div style={{ fontSize: 22, fontWeight: 900, color: '#fff', lineHeight: 1.3, marginBottom: 6 }}>
|
||||||
اندیشکده فولاد آینده
|
اندیشکده فولاد آینده
|
||||||
</div>
|
</div>
|
||||||
<div style={{ fontSize: 10, letterSpacing: 3, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20, direction: 'ltr', textAlign: 'right', wordBreak: 'break-all' }}>
|
<div style={{ fontSize: 10, letterSpacing: 2, color: 'rgba(255,255,255,0.3)', textTransform: 'uppercase', marginBottom: 20 }}>
|
||||||
FUTURE STEEL POLICY INSTITUTE
|
FUTURE STEEL POLICY INSTITUTE
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||||
<SocialIcon label="in" />
|
<SocialIcon label="in" />
|
||||||
<SocialIcon label="tg" />
|
<SocialIcon label="tg" />
|
||||||
<SocialIcon label="tw" />
|
<SocialIcon label="tw" />
|
||||||
|
|
@ -100,7 +100,7 @@ export function Footer() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Links + newsletter */}
|
{/* Links + newsletter */}
|
||||||
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
<nav aria-label="پیوندهای پایین" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
|
||||||
{FOOTER_LINKS.map(link => (
|
{FOOTER_LINKS.map(link => (
|
||||||
<FooterLink key={link.label} href={link.href} label={link.label} />
|
<FooterLink key={link.label} href={link.href} label={link.label} />
|
||||||
))}
|
))}
|
||||||
|
|
@ -112,7 +112,7 @@ export function Footer() {
|
||||||
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
<div style={{ borderTop: '1px solid rgba(255,255,255,0.08)' }}>
|
||||||
<div
|
<div
|
||||||
style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }}
|
style={{ padding: '22px 0', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.8, textAlign: 'center', fontWeight: 500 }}
|
||||||
className="max-w-7xl mx-auto w-full px-12 max-md:px-5"
|
className="max-w-7xl mx-auto w-full px-6 max-md:px-5"
|
||||||
>
|
>
|
||||||
<div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div>
|
<div>تمامی حقوق این وب سایت محفوظ و متعلق به شرکت فولاد مبارکه است.</div>
|
||||||
<div style={{ color: 'rgba(255,255,255,0.55)', marginTop: 6, fontSize: 12 }}>
|
<div style={{ color: 'rgba(255,255,255,0.55)', marginTop: 6, fontSize: 12 }}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue