Commit c5bf3353 authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Fix max-width issue on footer

parent 63a5f723
...@@ -2,55 +2,74 @@ ...@@ -2,55 +2,74 @@
footer { footer {
background-color: @color-dark-blue; background-color: @color-dark-blue;
display: grid;
grid-template-columns: repeat(6, 1fr);
color: @color-grey; color: @color-grey;
div.copyright { > div {
width: 100%; display: grid;
display: flex; grid-template-columns: repeat(6, 1fr);
align-items: center; padding: 0 1em;
justify-content: center; margin: 0 auto;
grid-column: ~'1 / 3';
@media @wide, @desktop {
.copyright { grid-template-columns: 1fr auto auto;
padding-right: 1em; grid-template-areas: 'copyright eth-logo vseth-logo';
border-right: 1px solid #fff; max-width: @dimension-max-content-width;
@media @mobile {
display: block;
grid-column: ~'1 / 7';
border-right: none;
padding: 2em 0 0;
margin-bottom: 1em;
}
} }
a { @media @tablet {
margin-left: 1em; grid-template-columns: 1fr auto auto;
color: @color-red; grid-template-areas: 'copyright eth-logo vseth-logo';
text-decoration: none; font-size: .7em;
}
@media @mobile {
grid-template-columns: 1fr 1fr;
grid-template-areas:
'copyright copyright'
'eth-logo vseth-logo';
} }
} }
}
footer div.copyright {
display: flex;
align-items: center;
justify-content: left;
grid-area: copyright;
padding: 2.5em 0;
div.footer-logo { @media @mobile {
width: 100%;
display: flex;
justify-content: center; justify-content: center;
grid-column: span 2; }
@media @mobile { a {
grid-column: span 3; margin-left: 1em;
} color: @color-red;
text-decoration: none;
}
}
footer .vseth {
grid-area: vseth-logo;
}
footer .eth {
grid-area: eth-logo;
}
footer div.footer-logo {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
a { a {
position: relative; position: relative;
img { img {
height: 4em; height: 4em;
max-width: 100%; max-width: 100%;
background-color: @color-dark-blue; background-color: @color-dark-blue;
}
} }
} }
} }
...@@ -34,26 +34,29 @@ export default class Footer { ...@@ -34,26 +34,29 @@ export default class Footer {
} }
view() { view() {
return m('footer', [ return m(
m('div.copyright', [ 'footer',
m('span', `© 1893 - ${new Date().getFullYear()} AMIV an der ETH`), m('div', [
m('div.copyright', [
m('span', `© 1893 - ${new Date().getFullYear()} AMIV an der ETH`),
m(
'a',
{
href: `/${currentLanguage()}/legal-notice`,
onupdate: m.route.link,
},
i18n('legal-notice')
),
]),
m('div.footer-logo', m('a', { href: `https://www.ethz.ch/` }, m('img', { src: EthLogo }))),
m( m(
'a', 'div.footer-logo',
{ {
href: `/${currentLanguage()}/legal-notice`, onclick: () => this.handleClick(),
onupdate: m.route.link,
}, },
i18n('legal-notice') renderVseth(this.coord)
), ),
]), ])
m('div.footer-logo', m('a', { href: `https://www.ethz.ch/` }, m('img', { src: EthLogo }))), );
m(
'div.footer-logo',
{
onclick: () => this.handleClick(),
},
renderVseth(this.coord)
),
]);
} }
} }
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment