From bb1520afc9b1b9c112e7f9e387f891c717b2b4aa Mon Sep 17 00:00:00 2001
From: Neshura <neshura@proton.me>
Date: Mon, 19 Dec 2022 21:51:51 +0100
Subject: [PATCH] Addresses #27

---
 components/layout.tsx               | 2 +-
 components/styles/generic.tsx       | 7 ++++++-
 components/styles/navbar/mobile.tsx | 1 +
 public/data/themes.json             | 1 +
 styled.d.ts                         | 1 +
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/layout.tsx b/components/layout.tsx
index cb416d6..6a2f966 100644
--- a/components/layout.tsx
+++ b/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"}'>
diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx
index dbc3c45..e8354de 100644
--- a/components/styles/generic.tsx
+++ b/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`
diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx
index 73059b0..9c903e5 100644
--- a/components/styles/navbar/mobile.tsx
+++ b/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;
diff --git a/public/data/themes.json b/public/data/themes.json
index 18b4933..eeba534 100644
--- a/public/data/themes.json
+++ b/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",
diff --git a/styled.d.ts b/styled.d.ts
index 1dc2225..d774093 100644
--- a/styled.d.ts
+++ b/styled.d.ts
@@ -5,6 +5,7 @@ declare module 'styled-components' {
     themeName: string,
     themeId: number,
     backgroundImage?: string,
+    backgroundOffset?: string,
     invertButtons?: boolean,
     colors: {
       background: string,