Addresses #27
This commit is contained in:
parent
26ac430d7e
commit
bb1520afc9
5 changed files with 10 additions and 2 deletions
|
@ -10,7 +10,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
|
|||
let ret: JSX.Element;
|
||||
if(isMobile) {
|
||||
ret = (
|
||||
<Page>
|
||||
<Page mobile={isMobile}>
|
||||
<Script id="matomo_analytics"
|
||||
defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||
data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
|
||||
|
|
|
@ -7,13 +7,18 @@ export const StyledBody = styled.body`
|
|||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
`
|
||||
|
||||
export const Page = styled.div`
|
||||
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;
|
||||
background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""};
|
||||
`
|
||||
|
||||
export const Main = styled.main`
|
||||
|
|
|
@ -205,6 +205,7 @@ export const NavIndicators = styled.nav`
|
|||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"};
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
|
@ -52,6 +52,7 @@
|
|||
"themeName": "Nordlys",
|
||||
"themeId": 4,
|
||||
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
|
||||
"backgroundOffset": "60%",
|
||||
"invertButtons": true,
|
||||
"colors": {
|
||||
"background": "#0008",
|
||||
|
|
1
styled.d.ts
vendored
1
styled.d.ts
vendored
|
@ -5,6 +5,7 @@ declare module 'styled-components' {
|
|||
themeName: string,
|
||||
themeId: number,
|
||||
backgroundImage?: string,
|
||||
backgroundOffset?: string,
|
||||
invertButtons?: boolean,
|
||||
colors: {
|
||||
background: string,
|
||||
|
|
Loading…
Reference in a new issue