mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 20:53:24 +10:00
Fix footer top border
Change the border so that it does not cover the outer paddings in desktop view but in mobile view it covers the whole viewport width.
This commit is contained in:
Hannu Lyytikainen
parent
378384c7e5
commit
7620a17b2f
2 changed files with 215 additions and 201 deletions
|
|
@ -10,8 +10,20 @@
|
|||
background-color: var(--matterColorBright);
|
||||
|
||||
@media (--viewportMedium) {
|
||||
padding: 73px 30px 81px 30px;
|
||||
background-color: var(--matterColorLight);
|
||||
padding: 0 30px 81px 30px;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Wrapper to limit the top border in desktop
|
||||
* view from the outermost paddings*/
|
||||
.topBorderWrapper {
|
||||
@media (--viewportMedium) {
|
||||
padding-top: 73px;
|
||||
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--matterColorNegative);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -60,213 +60,215 @@ const Footer = props => {
|
|||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className={css.content}>
|
||||
<div className={css.someLiksMobile}>{socialMediaLinks}</div>
|
||||
<div className={css.links}>
|
||||
<div className={css.organization} id="organization">
|
||||
<NamedLink name="LandingPage" className={css.logoLink}>
|
||||
<Logo format="desktop" className={css.logo} />
|
||||
</NamedLink>
|
||||
<div className={css.organizationInfo}>
|
||||
<p className={css.organizationDescription}>
|
||||
<FormattedMessage id="Footer.organizationDescription" />
|
||||
</p>
|
||||
<p className={css.organizationCopyright}>
|
||||
<ExternalLink href="https://www.sharetribe.com/" className={css.copyrightLink}>
|
||||
<FormattedMessage id="Footer.copyright" />
|
||||
</ExternalLink>
|
||||
</p>
|
||||
<div className={css.topBorderWrapper}>
|
||||
<div className={css.content}>
|
||||
<div className={css.someLiksMobile}>{socialMediaLinks}</div>
|
||||
<div className={css.links}>
|
||||
<div className={css.organization} id="organization">
|
||||
<NamedLink name="LandingPage" className={css.logoLink}>
|
||||
<Logo format="desktop" className={css.logo} />
|
||||
</NamedLink>
|
||||
<div className={css.organizationInfo}>
|
||||
<p className={css.organizationDescription}>
|
||||
<FormattedMessage id="Footer.organizationDescription" />
|
||||
</p>
|
||||
<p className={css.organizationCopyright}>
|
||||
<ExternalLink href="https://www.sharetribe.com/" className={css.copyrightLink}>
|
||||
<FormattedMessage id="Footer.copyright" />
|
||||
</ExternalLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.infoLinks}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="NewListingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toNewListingPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="AboutPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toAboutPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="LandingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toFAQPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="LandingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toHelpPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="AboutPage" to={{ hash: '#contact' }} className={css.link}>
|
||||
<FormattedMessage id="Footer.toContactPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.searches}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchHelsinki" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Turku%2C%20Finland&bounds=60.5304531%2C22.38197820000005%2C60.33361189999999%2C22.066440100000023&country=FI&origin=60.4518126%2C22.26663020000001',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchTurku" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Tampere%2C%20Finland&bounds=61.83657359999999%2C24.118384099999957%2C61.42728169999999%2C23.542201299999988&country=FI&origin=61.4977524%2C23.760953500000028',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchTampere" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Oulu%2C%20Finland&bounds=65.5643426%2C26.770696000000044%2C64.8443082%2C24.114941999999928&country=FI&origin=65.0120888%2C25.465077199999996',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchOulu" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Rukatunturi%2C%20Kuusamo%2C%20Finland&bounds=66.1699707%2C29.167735499999935%2C66.1609529%2C29.13572069999998&country=FI&origin=66.1654622%2C29.151728100000014',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchRuka" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.searchesExtra}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Kuopio%2C%20Finland&bounds=63.40340329999999%2C28.457629300000008%2C62.592254%2C26.890028099999995&country=FI&origin=62.89796999999999%2C27.67817249999996',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchKuopio" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Mikkeli%2C%20Finland&bounds=62.1990357%2C27.900274999999965%2C61.20955799999999%2C26.82762809999997&country=FI&origin=61.68872709999999%2C27.27214570000001',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchMikkeli" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Espoo%2C%20Finland&bounds=60.3636105%2C24.8505715%2C60.0499087%2C24.499656500000015&country=FI&origin=60.2054911%2C24.655899999999974',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchEspoo" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Vantaa%2C%20Finland&bounds=60.40113659999999%2C25.19306240000003%2C60.23714200000001%2C24.746512199999984&country=FI&origin=60.29335239999999%2C25.037768599999936',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchVantaa" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Ahvenanmaan%20saaristo%2C%20Åland%20Islands&bounds=60.87664400000001%2C21.34532850000005%2C59.45425059999999%2C19.94061499999998&country=AX&origin=59.8994405%2C20.593996100000027',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchAhvenanmaa" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.extraLinks}>
|
||||
<div className={css.someLinks}>{socialMediaLinks}</div>
|
||||
<div className={css.legalMatters}>
|
||||
<ul className={css.tosAndPrivacy}>
|
||||
<li>
|
||||
<NamedLink name="TermsOfServicePage" className={css.legalLink}>
|
||||
<FormattedMessage id="Footer.termsOfUse" />
|
||||
<div className={css.infoLinks}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="NewListingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toNewListingPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li>
|
||||
<NamedLink name="PrivacyPolicyPage" className={css.legalLink}>
|
||||
<FormattedMessage id="Footer.privacyPolicy" />
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="AboutPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toAboutPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="LandingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toFAQPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="LandingPage" className={css.link}>
|
||||
<FormattedMessage id="Footer.toHelpPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink name="AboutPage" to={{ hash: '#contact' }} className={css.link}>
|
||||
<FormattedMessage id="Footer.toContactPage" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.searches}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Helsinki%2C%20Finland&bounds=60.2978389%2C25.254484899999966%2C59.9224887%2C24.782875800000056&country=FI&origin=60.16985569999999%2C24.93837910000002',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchHelsinki" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Turku%2C%20Finland&bounds=60.5304531%2C22.38197820000005%2C60.33361189999999%2C22.066440100000023&country=FI&origin=60.4518126%2C22.26663020000001',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchTurku" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Tampere%2C%20Finland&bounds=61.83657359999999%2C24.118384099999957%2C61.42728169999999%2C23.542201299999988&country=FI&origin=61.4977524%2C23.760953500000028',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchTampere" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Oulu%2C%20Finland&bounds=65.5643426%2C26.770696000000044%2C64.8443082%2C24.114941999999928&country=FI&origin=65.0120888%2C25.465077199999996',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchOulu" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Rukatunturi%2C%20Kuusamo%2C%20Finland&bounds=66.1699707%2C29.167735499999935%2C66.1609529%2C29.13572069999998&country=FI&origin=66.1654622%2C29.151728100000014',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchRuka" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.searchesExtra}>
|
||||
<ul className={css.list}>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Kuopio%2C%20Finland&bounds=63.40340329999999%2C28.457629300000008%2C62.592254%2C26.890028099999995&country=FI&origin=62.89796999999999%2C27.67817249999996',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchKuopio" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Mikkeli%2C%20Finland&bounds=62.1990357%2C27.900274999999965%2C61.20955799999999%2C26.82762809999997&country=FI&origin=61.68872709999999%2C27.27214570000001',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchMikkeli" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Espoo%2C%20Finland&bounds=60.3636105%2C24.8505715%2C60.0499087%2C24.499656500000015&country=FI&origin=60.2054911%2C24.655899999999974',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchEspoo" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Vantaa%2C%20Finland&bounds=60.40113659999999%2C25.19306240000003%2C60.23714200000001%2C24.746512199999984&country=FI&origin=60.29335239999999%2C25.037768599999936',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchVantaa" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li className={css.listItem}>
|
||||
<NamedLink
|
||||
name="SearchPage"
|
||||
to={{
|
||||
search:
|
||||
'?address=Ahvenanmaan%20saaristo%2C%20Åland%20Islands&bounds=60.87664400000001%2C21.34532850000005%2C59.45425059999999%2C19.94061499999998&country=AX&origin=59.8994405%2C20.593996100000027',
|
||||
}}
|
||||
className={css.link}
|
||||
>
|
||||
<FormattedMessage id="Footer.searchAhvenanmaa" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className={css.extraLinks}>
|
||||
<div className={css.someLinks}>{socialMediaLinks}</div>
|
||||
<div className={css.legalMatters}>
|
||||
<ul className={css.tosAndPrivacy}>
|
||||
<li>
|
||||
<NamedLink name="TermsOfServicePage" className={css.legalLink}>
|
||||
<FormattedMessage id="Footer.termsOfUse" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
<li>
|
||||
<NamedLink name="PrivacyPolicyPage" className={css.legalLink}>
|
||||
<FormattedMessage id="Footer.privacyPolicy" />
|
||||
</NamedLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.copyrightAndTermsMobile}>
|
||||
<ExternalLink
|
||||
href="https://www.sharetribe.com/"
|
||||
className={css.organizationCopyrightMobile}
|
||||
>
|
||||
<FormattedMessage id="Footer.copyright" />
|
||||
</ExternalLink>
|
||||
<div className={css.tosAndPrivacyMobile}>
|
||||
<NamedLink name="PrivacyPolicyPage" className={css.privacy}>
|
||||
<FormattedMessage id="Footer.privacy" />
|
||||
</NamedLink>
|
||||
<NamedLink name="TermsOfServicePage" className={css.terms}>
|
||||
<FormattedMessage id="Footer.terms" />
|
||||
</NamedLink>
|
||||
<div className={css.copyrightAndTermsMobile}>
|
||||
<ExternalLink
|
||||
href="https://www.sharetribe.com/"
|
||||
className={css.organizationCopyrightMobile}
|
||||
>
|
||||
<FormattedMessage id="Footer.copyright" />
|
||||
</ExternalLink>
|
||||
<div className={css.tosAndPrivacyMobile}>
|
||||
<NamedLink name="PrivacyPolicyPage" className={css.privacy}>
|
||||
<FormattedMessage id="Footer.privacy" />
|
||||
</NamedLink>
|
||||
<NamedLink name="TermsOfServicePage" className={css.terms}>
|
||||
<FormattedMessage id="Footer.terms" />
|
||||
</NamedLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue