hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Stick footer to page bottom

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-05 15:25:43 +01:00
parent 48f988fbd1
commit d665157e23
2 changed files with 15 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Footer.tsx
+9
View File
@@ -4,6 +4,11 @@ import styled from 'styled-components';
import IconButton from '../components/IconButton'; import IconButton from '../components/IconButton';
const StyledFooter = styled.footer` const StyledFooter = styled.footer`
position: absolute;
bottom: 0;
min-height: 100px;
width: 85%;
margin: auto;
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: 2rem; column-gap: 2rem;
@@ -11,6 +16,10 @@ const StyledFooter = styled.footer`
align-content: center; align-content: center;
padding: 1rem 0rem; padding: 1rem 0rem;
@media (max-width: 768px) {
width: 95%;
}
.contact { .contact {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, 16px); grid-template-columns: repeat(auto-fill, 16px);
components/GlobalStyles.tsx
+6
View File
@@ -38,11 +38,17 @@ const Global = createGlobalStyle<Props>`
} }
} }
html {
position: relative;
min-height: 100%;
}
ul, ol { ul, ol {
margin-inline-start: 1.9rem; margin-inline-start: 1.9rem;
} }
body { body {
margin: 0 0 100px;
background: ${({ dark, theme }) => background: ${({ dark, theme }) =>
dark ? theme.colors.dark.background : theme.colors.light.background}; dark ? theme.colors.dark.background : theme.colors.light.background};
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)}; color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};