Addresses #27

components/layout.tsx

@@ -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"}'>

components/styles/generic.tsx

@@ -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`

components/styles/navbar/mobile.tsx

@@ -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;

public/data/themes.json

@@ -52,6 +52,7 @@
       "themeName": "Nordlys",
       "themeId": 4,
       "backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
+      "backgroundOffset": "60%",
       "invertButtons": true,
       "colors": {
         "background": "#0008",

styled.d.ts

@@ -5,6 +5,7 @@ declare module 'styled-components' {
     themeName: string,
     themeId: number,
     backgroundImage?: string,
+    backgroundOffset?: string,
     invertButtons?: boolean,
     colors: {
       background: string,