diff --git a/components/Footer.tsx b/components/Footer.tsx index 7c85d3d..69343e9 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -4,6 +4,11 @@ import styled from 'styled-components'; import IconButton from '../components/IconButton'; const StyledFooter = styled.footer` + position: absolute; + bottom: 0; + min-height: 100px; + width: 85%; + margin: auto; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; @@ -11,6 +16,10 @@ const StyledFooter = styled.footer` align-content: center; padding: 1rem 0rem; + @media (max-width: 768px) { + width: 95%; + } + .contact { display: grid; grid-template-columns: repeat(auto-fill, 16px); diff --git a/components/GlobalStyles.tsx b/components/GlobalStyles.tsx index 016dab1..9074fd1 100644 --- a/components/GlobalStyles.tsx +++ b/components/GlobalStyles.tsx @@ -38,11 +38,17 @@ const Global = createGlobalStyle` } } + html { + position: relative; + min-height: 100%; + } + ul, ol { margin-inline-start: 1.9rem; } body { + margin: 0 0 100px; background: ${({ dark, theme }) => dark ? theme.colors.dark.background : theme.colors.light.background}; color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};