Footer Fix

- fix mobile styles
- move Footer to own dir

docs/components/Global/Footer/Footer.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { FlexRow, FlexCol } from 'artifak';
+import { Container } from '../Container';
+import {
+  FooterBrandText,
+  FooterBrandTagline,
+  FooterCopyright,
+  StyledFooter
+} from './styles';
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <Container pr={`1em`} pl={`1em`}>
+      <StyledFooter>
+        <FlexRow justifyContent="center">
+          <FlexCol columnSize={[12, 6]} pl={0}>
+            <FooterBrandText>
+              artifak
+              <FooterBrandTagline>
+                a React UI primitives library
+              </FooterBrandTagline>
+            </FooterBrandText>
+          </FlexCol>
+
+          <FlexCol
+            columnSize={[12, 6]}
+            display="flex"
+            justifyContent={['center', 'flex-end']}
+            p={['0.5em 0 0', 0]}
+          >
+            <FooterCopyright>
+              created by Julian Low 2020 - {currentYear}
+            </FooterCopyright>
+          </FlexCol>
+        </FlexRow>
+      </StyledFooter>
+    </Container>
+  );
+}

docs/components/Global/Footer/index.tsx

@@ -0,0 +1 @@
+export { Footer } from './Footer';

docs/components/Global/Footer/styles.ts

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+
+export const FooterBrandText = styled.p`
+  ${({ theme }) => css`
+    font-size: 1.1rem;
+    font-family: ${theme.fontFamily.poppins};
+    color: ${theme.colors.primary};
+    margin: 0;
+
+    @media (hover: none) {
+      text-align: center;
+    }
+  `}
+`;
+
+export const FooterBrandTagline = styled.span`
+  ${({ theme }) => css`
+    font-size: 0.9rem;
+    font-family: ${theme.fontFamily.biryani};
+    padding-left: 0.25em;
+    color: ${theme.colors.grey};
+    margin: 0;
+  `}
+`;
+
+export const FooterCopyright = styled.p`
+  ${({ theme }) => css`
+    font-size: 0.9rem;
+    font-family: ${theme.fontFamily.biryani};
+    color: ${theme.colors.grey};
+    margin: 0;
+
+    @media (hover: none) {
+      text-align: center;
+    }
+  `}
+`;
+
+export const StyledFooter = styled.footer`
+  ${({ theme }) => css`
+    padding: 2em 0;
+    border-top: 1px solid ${theme.colors.primary};
+    font-family: ${theme.fontFamily.heading};
+
+    @media (hover: none) {
+      padding: 2em 0 90px;
+    }
+  `}
+`;