diff --git a/src/components/footer.js b/src/components/footer.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/footer/footer-styles.js b/src/components/footer/footer-styles.js new file mode 100644 index 0000000..369c086 --- /dev/null +++ b/src/components/footer/footer-styles.js @@ -0,0 +1,149 @@ +import styled from "styled-components" +import dimensions from "../../style/dimensions" +export const FooterContainer = styled.div` + background-color: #848484; + width: 100%; + color: #ffffff; +` + +export const FooterMainContent = styled.div` + @media (min-width: ${dimensions.maxwidthTablet}px) { + display: flex; + } +` + +export const SocialSection = styled.div` + padding-left: 80px; + padding-top: 50px; + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-left: 32px; + } +` + +export const FooterHeader = styled.div` + font-weight: bold; + font-size: 24px; +` + +export const SocialIcons = styled.div` + display: flex; + padding-top: 15px; +` + +export const SocialPlaceholder = styled.div` + width: 24px; + height: 24px; + background-color: #a4a4a4; + border-radius: 8px; + margin-right: 16px; +` +export const EmailText = styled.div` + text-decoration: underline; + font-size: 18px; + font-weight: bold; + padding-top: 25px; +` + +export const LinkSection = styled.div` + display: flex; + margin-left: 9vw; + padding-top: 50px; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + margin-left: 0px; + } + + li { + padding-bottom: 47px; + font-size: 18px; + font-weight: bold; + } + + a { + text-decoration: none; + color: #ffffff; + } + + ul { + list-style: none; + } +` + +export const LinkColumn = styled.div` + padding-right: 9vw; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-right: 0; + } +` + +export const EmailSection = styled.div` + margin-left: 32px; + + input { + width: 20vw; + height: 36px; + margin-top: 10px; + border: solid #626262 1px; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + input { + width: 80%; + height: 36px; + margin-top: 10px; + border: solid #626262 1px; + } + } + + input::placeholder { + padding-left: 14px; + } + + @media (min-width: ${dimensions.maxwidthTablet}px) { + padding-top: 50px; + position: absolute; + right: 62px; + } +` + +export const BottomLinks = styled.div` + a { + text-decoration: none; + color: black; + } + ul { + display: flex; + justify-content: center; + list-style: none; + padding-bottom: 30px; + } + + li { + font-size: 12px; + padding-right: 28px; + } + + @media (max-width: ${dimensions.maxwidthTablet}px) { + ul { + display: flex; + justify-content: center; + list-style: none; + padding-top: 80px; + padding-bottom: 12px; + } + } +` + +export const AddressSection = styled.div` + width: 177px; + padding-top: 16px; +` +export const ScoutSection = styled.div` + margin-top: 32px; + color: #ffffff; + + @media (max-width: ${dimensions.maxwidthTablet}px) { + padding-bottom: 48px; + } +` \ No newline at end of file diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js new file mode 100644 index 0000000..d5b31ec --- /dev/null +++ b/src/components/footer/footer.js @@ -0,0 +1,104 @@ +import React from "react" +import styled from "styled-components" +import dimensions from "../../style/dimensions" +import { StaticQuery, graphql } from "gatsby" + +import { + FooterContainer, + FooterMainContent, + SocialSection, + FooterHeader, + SocialIcons, + SocialPlaceholder, + LinkSection, + LinkColumn, + EmailSection, + AddressSection, + ScoutSection, +} from "./footer-styles" + +export default function footer({ data }) { + return ( + ( + + + + Powerhouse + + 123 Lorem Ipsum Dolor Tempor Incididunt YZ, 12345 123-456-7890 + + + + + + + + + + + + + + +
+ +
+ + {data.prismicFooter.data.social_media.map(social => { + return ( + + + + ) + })} + + + Made with love by Scout + + + + )} + /> + ) +} diff --git a/src/components/layout.js b/src/components/layout.js index 4d54b27..35d4c32 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -1,62 +1,20 @@ import React from "react" import styled from "styled-components" import "../style/typography.scss" - +import "../style/global.scss" import dimensions from "../style/dimensions" import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables" +import Footer from "../components/footer/footer" const LayoutContainer = styled.div` - body * { - box-sizing: border-box; - margin: 0; - } - - html, - body, - #root { - margin: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - min-height: 100%; - } - - body { - width: 100%; - margin: 0 auto; - font-size: 16px; - line-height: 1.5; - -webkit-font-smoothing: antialiased; - - @media (max-width: ${dimensions.maxwidthMobile}px) { - font-size: 14px; - } - - * { - box-sizing: border-box; - } - } - - /* - A workaround for forcing accessibility wrappers - to have a 100% height. - Reach Router issue here: https: //github.com/reach/router/issues/63 - */ - #___gatsby, - div[role="group"][tabindex] { - height: 100%; - min-height: 100% !important; - } - - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; - margin: 0 auto; ` const LayoutBody = styled.div` - @media (max-width: ${dimensions.maxwidthTablet}px) { - padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop}; + @media (min-width: ${dimensions.maxwidthTablet}px) { + padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s } - @media (max-width: ${dimensions.maxwidthMobile}px) { + @media (max-width: ${dimensions.maxwidthTablet}px) { padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile}; } ` @@ -65,8 +23,10 @@ const Layout = ({ children }) => { return ( {children} + +