main-site/components/styles/generic.tsx

57 lines
1.4 KiB
TypeScript
Raw Permalink Normal View History

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;
`
2022-12-15 20:23:11 +00:00
2022-12-19 20:51:51 +00:00
interface MobilePropType {
mobile?: number;
}
export const Page = styled.div<MobilePropType>`
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;
2022-12-19 20:51:51 +00:00
background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""};
`
2022-12-15 20:23:11 +00:00
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;
2022-12-17 00:20:58 +00:00
a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
`
2022-12-18 22:21:38 +00:00
export const MobileFooter = styled(Footer)`
2022-12-19 20:03:08 +00:00
white-space: nowrap;
flex: 0.5;
width: 100%;
2022-12-18 22:21:38 +00:00
`