import styled from 'styled-components' export const StyledBody = styled.body` padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; ` interface MobilePropType { mobile?: number; } export const Page = styled.div` width: 100%; background-color: ${({ theme }) => theme.colors.background}; background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""}; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""}; ` export const Main = styled.main` color: ${({ theme }) => theme.colors.primary }; min-height: 100vh; padding: 1rem 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; ` export const Footer = styled.footer` color: ${({ theme }) => theme.colors.primary }; display: flex; flex: 1; padding: 2rem 0; border-top: 1px solid ${({ theme }) => theme.colors.primary }; justify-content: center; align-items: center; a { display: flex; justify-content: center; align-items: center; flex-grow: 1; } ` export const MobileFooter = styled(Footer)` white-space: nowrap; flex: 0.5; width: 100%; `