Updated smaller footer

[perdi8]

No description provided.

[juanpms2]

I think is not a good idea you use these properties in the container and each container element, don't necessary and are confusing. This is my propsed CSS for your analysis and study. :-)
`import { css } from 'emotion';
import { theme } from 'core/theme';

const { palette, spacing, breakpoints } = theme;
const color = palette.customPalette;

export const footerContainer = cssdisplay: flex; flex-direction: column; justify-content: space-between; background-color: ${color.secondary};;

// you have change the name in footer.component.tsx
export const logoContainer = cssdisplay: flex; justify-content: center; align-items: center;;

export const bottomContainer = cssdisplay: flex; justify-content: space-between; padding: ${spacing(3)}; border-top: 1px solid ${color.primary}; @media (max-width: ${breakpoints.values.md}px) { flex-direction: column; justify-content: center; align-items: center; };

export const lemoncodeIcon = cssmax-width: 100px; padding: ${spacing(3)} 0;;

export const iconContainer = cssdisplay: flex; justify-content: space-between; width: 50%; margin: 0; padding: 0 0 ${spacing(1)}; list-style: none; @media (min-width: ${breakpoints.values.sm}px) { width: 20%; } @media (min-width: ${breakpoints.values.lg}px) { width: 10%; };

export const icon = cssfont-size: 1.5rem; color: ${color.greyLight}; &:hover { cursor: pointer; color: ${color.primary}; };

export const githubIcon = cssheight: ${spacing(2.75)}; fill: ${color.greyLight}; &:hover { cursor: pointer; fill: ${color.primary}; };

export const copyright = csscolor: ${color.greyLight}; @media (max-width: ${breakpoints.values.xs}px) { margin-top: ${spacing(0.8)}; };
`

[juanpms2]

the same

[juanpms2]

the same

[juanpms2]

the same

[juanpms2]

the same

[juanpms2]

I think isn't necessary because the top menu is fixed