Finished Desktop layout in this version

Also removed Matomo trackingfrom this branch

components/layout.tsx

@@ -15,24 +15,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
           defer src='https://static.cloudflareinsights.com/beacon.min.js'
           data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
         </Script>
-        <Script id="matomo_analytics">
-          {`
-                var _paq = window._paq = window._paq || [];
-                /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-                _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-                _paq.push(["setCookieDomain", "www.neshweb.net"]);
-                _paq.push(["disableCookies"]);
-                _paq.push(['trackPageView']);
-                _paq.push(['enableLinkTracking']);
-                (function() {
-                  var u="//tracking.neshweb.net/";
-                  _paq.push(['setTrackerUrl', u+'matomo.php']);
-                  _paq.push(['setSiteId', '2']);
-                  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-                  g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-                })();
-              `}
-        </Script>
   
         <PageNavbar mobile={isMobile}/>
         <Main>

components/styles/cards/desktop.tsx

@@ -9,7 +9,11 @@ interface OnlinePropType {
   status: string;
 }
 
-const Card = styled.div`
+interface BorderHelperType {
+  border_left: boolean;
+}
+
+const Card = styled.div<OnlinePropType>`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -24,7 +28,23 @@ const Card = styled.div`
   border-radius: 10px;
 
   color: ${({ theme }) => theme.colors.primary};
-  border-color: ${({ theme }) => theme.colors.primary};
+  border-color: ${props => {
+    let ret;
+    switch (props.status) {
+      case "Online":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online;
+        break;
+      case "Loading":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading;
+        break;
+      case "Offline":
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
+        break;
+      default:
+        ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
+    }
+    return ret;
+  }};
   background-color: ${({ theme }) => theme.colors.background};
 
 
@@ -60,16 +80,16 @@ const CardTitleIcon = styled.div`
 
 
 const CardStatus = styled.p<OnlinePropType>`
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: -0.8rem;
+  left: 80%;
+
   font-size: 0.9rem;
-  padding: 0.1rem;
-  margin: 0.5rem;
-  margin-right: 1.5rem;
+  padding: 0 0.2rem;
+  margin: 0;
   
-  border-radius: 5px;
-  border: 0;
-  border-bottom: 0.125rem solid;
-
-  background: transparent;
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -87,6 +107,36 @@ const CardStatus = styled.p<OnlinePropType>`
     }
     return ret;
   }};
+
+    border-radius: 0.5rem;
+    border: 0.125rem solid;
+
+    ${({ theme }) => {
+    let ret;
+
+    if (theme.backgroundImage) {
+      ret = css`
+        background-image: ${() => {
+          return css`
+            linear-gradient(${theme.colors.background}, ${theme.colors.background}),
+            url(${theme.backgroundImage})
+          `
+        }};
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: cover; 
+        background-position: ${theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
+        background-position-y: 0;
+      `;
+    }
+    else {
+      ret = css`
+        background-color: ${({ theme }) => theme.colors.background};
+      `;
+    }
+
+    return ret;
+  }};
 `
 
 const CardTitle = styled.div`
@@ -98,10 +148,38 @@ const CardTitle = styled.div`
   padding-left: 1rem;
 `
 
+const CardTitleLink = styled(Link)`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem;
+  padding-left: 1rem;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+`
+
 // content visible when reduced
-const CardHeader = ({ content, href }: { content: Service, href: string }) => {
+const CardHeader = ({ content }: { content: Service }) => {
   return (
     <CardHeaderWrap>
+      {
+        content.href ?
+          <CardTitleLink href={content.href}>
+            {
+              content.icon ? (
+                <CardTitleIcon>
+                  <Image alt="icon" src={content.icon} fill />
+                </CardTitleIcon>
+              ) : (<></>)
+            }
+            <CardTitleText>{content.name}</CardTitleText>
+            <OpenInNewTab>
+              <OpenInNewTabIcon width="1rem" height="1rem" />
+            </OpenInNewTab>
+          </CardTitleLink> :
           <CardTitle>
             {
               content.icon ? (
@@ -112,6 +190,7 @@ const CardHeader = ({ content, href }: { content: Service, href: string }) => {
             }
             <CardTitleText>{content.name}</CardTitleText>
           </CardTitle>
+      }
       <CardStatus status={content.status}>{content.status}</CardStatus>
     </CardHeaderWrap>
   )
@@ -144,6 +223,7 @@ const CardDescriptionExtended = styled.p`
 `
 
 const CardDescriptionWarning = styled(CardDescriptionExtended)`
+  text-align: center;
   color: ${({ theme }) => theme.colors.offline};
   font-weight: bold;
 `
@@ -194,7 +274,7 @@ const CardLink = styled(Link)`
   transition-duration: 0.2s;
 
   &:hover {
-    background-color: ${({theme}) => theme.colors.background};
+    background-color: ${({ theme }) => theme.colors.background};
     color: ${({ theme }) => theme.colors.secondary};
   }
 
@@ -220,6 +300,18 @@ const OpenInNewTab = styled.div`
     color: ${({ theme }) => theme.colors.secondary};
   }
 
+  ${CardTitleLink} {
+    
+  }
+
+  ${CardTitleLink}:hover & {
+    margin-left: 0.3rem;
+    max-width: 1rem;
+    transition-delay: 0s, 0s;
+    visibility: visible;
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
   transition-property: max-width, margin-left, visibility;
   transition-duration: 0.5s, 0s, 0S;
   transition-delay: 0s, 0.2s, 0.2s;
@@ -254,8 +346,8 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
 
 export const ServiceCardDesktop = ({ content }: { content: Service }) => {
   return (
-    <Card>
-      <CardHeader content={content} href={content.href ? content.href : ""} />
+    <Card status={content.status}>
+      <CardHeader content={content} />
       <CardDescription content={content} />
       <CardFooter content={content} href={content.href ? content.href : ""} />
     </Card>

components/styles/generic.tsx

@@ -19,6 +19,7 @@ export const Page = styled.div<MobilePropType>`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%" : ""};
+  background-position-y: 0;
 `
 
 export const Main = styled.main`

components/styles/navbar/mobile.tsx

@@ -169,6 +169,7 @@ export const NavIndicators = styled.nav`
   background-attachment: fixed;
   background-size: cover;
   background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset :  "60%"};
+  background-position-y: 0;
   width: 100%;
   display: flex;
   flex: 1;