Rewrite styles to scss and use i respective components

This commit is contained in:
Max Karkowski
2020-07-17 08:44:02 +02:00
committed by Bastian
parent be0241674c
commit 73865eb209
94 changed files with 969 additions and 974 deletions

View File

@@ -0,0 +1,41 @@
import React from 'react';
import classNames from 'classnames';
import './footerend.scss';
export default function FooterEnd({ modifier }: { modifier?: 'in-sidebar' }) {
return (
<div className={classNames('footer-end', { [`footer-end__${modifier}`]: modifier })}>
<div className='footer-social'>
<div className='footer-social__label'>
<p>Follow us:</p>
</div>
<div className='footer-social__links'>
<a className='social-links-icon' href='https://www.facebook.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-facebook social-icon'></i>
</a>
<a className='social-links-icon' href='https://twitter.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-twitter social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.linkedin.com/company/aoe' target='_blank' rel='noopener noreferrer'>
<i className='socicon-linkedin social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.xing.com/company/aoe' target='_blank' rel='noopener noreferrer'>
<i className='socicon-xing social-icon'></i>
</a>
<a className='social-links-icon' href='https://www.youtube.com/user/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-youtube social-icon'></i>
</a>
<a className='social-links-icon' href='https://github.com/aoepeople' target='_blank' rel='noopener noreferrer'>
<i className='socicon-github social-icon'></i>
</a>
</div>
</div>
<div className='footer-copyright'>
<p>
<a href='https://www.aoe.com/en/copyright-meta/legal-information.html' target='_blank' rel='noopener noreferrer'>
Legal Information
</a>
</p>
</div>
</div>
);
}

View File

@@ -0,0 +1,36 @@
.footer-end {
font-size: 12px;
color: var(--color-gray-normal);
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
padding: 0 0 10px 0;
& a {
color: var(--color-gray-normal);
}
&__in-sidebar {
flex-direction: column;
align-items: flex-start;
margin-top: 100px;
}
@media (--until-sm) {
flex-direction: column;
align-items: center;
margin: 20px 0 0;
}
}
.footer-social {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
&__label {
margin: 0 10px 0 0;
}
}