coloring

frontend/src/lib/assets/css/base.less

@@ -108,7 +108,7 @@ select {
     top: 0px;
     bottom: 0px;
     width: 0px;
-    background: #000000;
+    background: #343a40;
     transition: width 0.5s ease-in;
 }
 .fill:hover:after,
@@ -143,7 +143,7 @@ swiper-slide {
             z-index: 10000;
             left: 0px;
             bottom: -10px;
-            background: #000000;
+            background: @signal-color;
             height: 5px;
             width: 0;
             animation: underlineEffect 15s linear forwards;

frontend/src/lib/assets/css/main.less

@@ -1,7 +1,8 @@
 @bg-color: #fff;
-@bg-color-secondary: #000;
-@font-color: #000;
+@bg-color-secondary: #343a40;
+@font-color: #343a40;
 @font-color-secondary: #fff;
+@signal-color: #5b6e98;
 
 @desktop_large:~ "only screen and (min-width: 1200px)";
 @desktop:~ "only screen and (min-width: 1024px)";

frontend/src/lib/components/Footer.svelte

@@ -22,32 +22,36 @@
         nextpage = pages[nextIndex]
     }
     let blackBg = false
-    setInterval(() => {
-        if (location.pathname == "/") {
-            blackBg = true
-        } else {
-            blackBg = false
-        }
+    if (typeof window !== "undefined") {
+        setInterval(() => {
+            if (location.pathname == "/") {
+                blackBg = true
+            } else {
+                blackBg = false
+            }
 
-        getNextPage($navigation.pages)
+            getNextPage($navigation.pages)
 
-        if (location.pathname.split("/").filter((s) => s).length >= 2) {
-            showNext = false
-        } else {
-            showNext = true
-        }
-    }, 1000)
+            if (location.pathname.split("/").filter((s) => s).length >= 2) {
+                showNext = false
+            } else {
+                showNext = true
+            }
+        }, 1000)
+    }
     let showNext = true
     $: {
-        if ($rerender) {
-            if (location.pathname != "/") {
-                getNextPage($navigation.pages)
+        if (typeof window !== "undefined") {
+            if ($rerender) {
+                if (location.pathname != "/") {
+                    getNextPage($navigation.pages)
+                }
+            }
+            if (location.pathname.split("/").filter((s) => s).length >= 2) {
+                showNext = false
+            } else {
+                showNext = true
             }
-        }
-        if (location.pathname.split("/").filter((s) => s).length >= 2) {
-            showNext = false
-        } else {
-            showNext = true
         }
     }
 </script>

frontend/src/lib/components/Pagebuilder/Homepage.svelte

@@ -27,25 +27,29 @@
             Object.assign(swiper, params)
             swiper.initialize()
 
-            // Add the 'active' class to the h1 of the first slide
-            const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
-            if (firstSlideH1) {
-                firstSlideH1.classList.add("active")
+            if (typeof window !== "undefined") {
+                // Add the 'active' class to the h1 of the first slide
+                const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
+                if (firstSlideH1) {
+                    firstSlideH1.classList.add("active")
+                }
             }
         }
     })
 
     function handleSlideChange() {
-        document.querySelectorAll(".titles h1").forEach((h1) => {
-            h1.classList.remove("active")
-        })
+        if (typeof window !== "undefined") {
+            document.querySelectorAll(".titles h1").forEach((h1) => {
+                h1.classList.remove("active")
+            })
 
-        setTimeout(() => {
-            const activeSlideUnderline = document.querySelector(".swiper-slide-active .titles h1")
-            if (activeSlideUnderline) {
-                activeSlideUnderline.classList.add("active")
-            }
-        }, 600)
+            setTimeout(() => {
+                const activeSlideUnderline = document.querySelector(".swiper-slide-active .titles h1")
+                if (activeSlideUnderline) {
+                    activeSlideUnderline.classList.add("active")
+                }
+            }, 600)
+        }
     }
     let teaser = teasers[0]
 </script>
@@ -135,6 +139,7 @@
                     line-height: 1;
                     font-weight: 500;
                     position: relative;
+                    color: @signal-color;
                 }
 
                 h2 {

frontend/src/lib/components/Pagebuilder/Pagebuilder.svelte

@@ -26,9 +26,11 @@
     export let i: number
     export let page: Page
     export let personPage: boolean
-    window.addEventListener("popstate", function (event) {
-        $rerender = $rerender + 1
-    })
+    if (typeof window !== "undefined") {
+        window.addEventListener("popstate", function (event) {
+            $rerender = $rerender + 1
+        })
+    }
 </script>
 
 {#if Object.keys(row).length}
@@ -140,6 +142,7 @@
     h1 {
         font-weight: 500;
         font-size: 2rem;
+        color: @signal-color;
     }
     .top-header {
         img {

frontend/src/lib/components/Pagebuilder/Rows.svelte

@@ -24,21 +24,23 @@
     }
 
     onMount(() => {
-        if ($scrollToRowNr !== -1) {
-            if (!$scrollToRowNr) {
-                $scrollToRowNr = -1
-                return
-            }
-            let element = document.getElementById("row-" + $scrollToRowNr)
-            if (!element) {
-                $scrollToRowNr = -1
-                return
-            }
+        if (typeof window !== "undefined") {
+            if ($scrollToRowNr !== -1) {
+                if (!$scrollToRowNr) {
+                    $scrollToRowNr = -1
+                    return
+                }
+                let element = document.getElementById("row-" + $scrollToRowNr)
+                if (!element) {
+                    $scrollToRowNr = -1
+                    return
+                }
 
-            element?.scrollIntoView({
-                behavior: "smooth",
-            })
-            $scrollToRowNr = -1
+                element?.scrollIntoView({
+                    behavior: "smooth",
+                })
+                $scrollToRowNr = -1
+            }
         }
     })
 

frontend/src/lib/components/widgets/Worldcard/card.svelte

@@ -164,8 +164,8 @@
                                 height: 1.8vw;
                                 max-height: 25px;
                                 border-radius: 15px;
-                                border: 2px solid #4f4f4f;
-                                color: #4f4f4f;
+                                border: 2px solid @signal-color;
+                                color: @signal-color;
                                 background-color: @bg-color-secondary;
                                 display: flex;
                                 justify-content: center;

frontend/src/lib/components/widgets/boxlist.svelte

@@ -28,7 +28,7 @@
         gap: 20px;
         .box {
             padding: 5px 10px;
-            background-color: @bg-color-secondary;
+            background-color: @signal-color;
             color: @font-color-secondary;
             font-weight: bold;
         }

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -6,7 +6,9 @@
     export let opened = ""
     let jobOffers = pages.map((p) => p.jobOffer)
     onMount(() => {
-        opened = location.search.split("=").at(-1)
+        if (typeof window !== "undefined") {
+            opened = location.search.split("=").at(-1)
+        }
     })
 </script>
 
@@ -51,9 +53,9 @@
     @import "../../assets/css/main.less";
     button {
         margin-top: 20px;
-        background-color: @bg-color-secondary;
+        background-color: @signal-color;
         color: @font-color-secondary;
-        border: 2px solid @bg-color-secondary;
+        border: 2px solid @signal-color;
         padding: 2px 15px;
         font-weight: bold;
     }

frontend/src/lib/components/widgets/iconCycleBox.svelte

@@ -5,10 +5,12 @@
     export let pageId: string
     console.log("YEY")
     let active = -1
-    setInterval(() => {
-        active += 1
-        if (active == iconCycleSquare.boxes.length) active = 0
-    }, 1250)
+    if (typeof window !== "undefined") {
+        setInterval(() => {
+            active += 1
+            if (active == iconCycleSquare.boxes.length) active = 0
+        }, 1250)
+    }
 </script>
 
 <div class="iconCycleSquares">
@@ -17,8 +19,7 @@
             <div class="content">
                 <div class="icon">
                     <svg
-                        stroke="{i == active ? 'black' : 'white'}"
-                        fill="{i == active ? 'black' : 'white'}"
+                        stroke="{i == active ? '#5b6e98' : 'white'}"
                         data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg>
                 </div>
                 <div class="text">
@@ -43,8 +44,8 @@
             font-size: 1rem;
         }
         .box {
-            border: 4px solid @bg-color-secondary;
-            background-color: @bg-color-secondary;
+            border: 4px solid @signal-color;
+            background-color: @signal-color;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -52,7 +53,7 @@
             padding: 10px;
             &.active {
                 background-color: @bg-color;
-                color: @font-color;
+                color: #5b6e98;
             }
             aspect-ratio: 1/1;
             width: calc((100% / 2) - 10px);

frontend/src/lib/components/widgets/iconCycleCircle.svelte

@@ -26,11 +26,12 @@
         circles = circles
     })
     let focused = -1
-    setInterval(() => {
-        focused += 1
-        if (focused == count) focused = 0
-        const svgObject = document.getElementById("mySvgObject" + focused)
-    }, 1000)
+    if (typeof window !== "undefined") {
+        setInterval(() => {
+            focused += 1
+            if (focused == count) focused = 0
+        }, 1000)
+    }
 </script>
 
 <div class="container">
@@ -52,8 +53,8 @@
                     <div class="icon">
                         <svg
                             id="mySvgObject{i}"
-                            stroke="{i == focused ? 'white' : 'black'}"
-                            fill="{i == focused ? 'white' : 'black'}"
+                            stroke="{i == focused ? 'white' : '#5b6e98'}"
+                            fill="{i == focused ? 'white' : '#5b6e98'}"
                             data-src="{apiBaseURL}medialib/{iconCycleCircle?.boxes[i]?.icon}/{$mediaLibrary[
                                 iconCycleCircle?.boxes[i]?.icon
                             ]?.file?.src}"></svg>
@@ -111,7 +112,7 @@
             width: 180px;
             height: 180px;
             margin: auto;
-            background: rgb(0, 0, 0);
+            background: @signal-color;
             border-radius: 50%;
             & > .content {
                 font-weight: bold;
@@ -130,8 +131,8 @@
                 width: 180px;
                 overflow: hidden;
                 height: 180px;
-                background: rgba(255, 255, 255, 0);
-                border: 4px solid @bg-color-secondary;
+                background: @signal-color;
+                border: 4px solid @signal-color;
                 z-index: 100;
                 transform-origin: center;
                 border-radius: 50%;
@@ -182,7 +183,7 @@
                     &::before {
                         content: "";
                         position: absolute;
-                        background: rgb(0, 0, 0);
+                        background: @signal-color;
                         border-radius: 50%;
                         top: -50%;
                         left: 0;
@@ -194,13 +195,13 @@
                 &.focused {
                     background: @bg-color-secondary !important;
                     .number {
-                        color: @font-color !important;
+                        color: @signal-color !important;
                     }
                     .content {
                         color: @font-color-secondary !important;
                     }
                     .half {
-                        background: @bg-color-secondary !important;
+                        background: @signal-color !important;
                         &::before {
                             background: @bg-color !important;
                         }

frontend/src/lib/components/widgets/moreBtn.svelte

@@ -10,7 +10,7 @@
 <style lang="less">
     @import "../../assets/css/main.less";
     .more {
-        background-color: @bg-color-secondary;
+        background-color: @signal-color;
         color: @font-color-secondary;
         border: none;
         height: 36px;
@@ -20,5 +20,9 @@
     }
     .bright {
         border: 2px solid @bg-color;
+        background-color: @bg-color-secondary;
+        &:hover {
+            background-color: @signal-color;
+        }
     }
 </style>

frontend/src/lib/components/widgets/nestedCard.svelte

@@ -54,7 +54,7 @@
                 height: 100px;
                 width: 365px;
                 z-index: 9;
-                background-color: @bg-color-secondary;
+                background-color: @signal-color;
             }
             .description {
                 position: relative;

frontend/src/lib/components/widgets/pageLinkBlocks.svelte

@@ -28,8 +28,8 @@
                 </div>
                 <svg
                     data-src="/media/arrow-r.svg"
-                    stroke="{i == focused ? '#fff' : 'black'}"
-                    fill="{i == focused ? '#fff' : 'black'}"
+                    stroke="{i == focused ? '#fff' : '#343a40'}"
+                    fill="{i == focused ? '#fff' : '#343a40'}"
                     style="z-index: 9999; position: relative;"></svg>
             </button>
         {:else}
@@ -89,9 +89,9 @@
         }
 
         .page-ref {
-            background-color: @bg-color-secondary;
+            background-color: @signal-color;
             color: @font-color-secondary;
-            border: 2px solid @bg-color-secondary;
+            border: 2px solid @signal-color;
         }
     }
 </style>

frontend/src/lib/components/widgets/persons.svelte

@@ -81,7 +81,7 @@
             }
             .text {
                 width: 100%;
-                background-color: @bg-color-secondary;
+                background-color: @signal-color;
                 color: @font-color-secondary;
                 border: 2px solid @bg-color-secondary;
                 padding: 2px 15px;

frontend/src/lib/components/widgets/scrollDown.svelte

@@ -10,30 +10,40 @@
     }
 
     const jumpDown = () => {
-        // Jump down by 100vh
-        window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
+        if (typeof window !== "undefined") {
+            // Jump down by 100vh
+            window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
+        }
     }
 
     onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
+        if (typeof window !== "undefined") {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        }
     })
 
     onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
+        if (typeof window !== "undefined") {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        }
     })
     let force = true
-    setInterval(() => {
-        if (location.pathname != "/") {
-            force = false
-        } else force = true
-    }, 1000)
-    $: {
-        if ($rerender) {
+    if (typeof window !== "undefined") {
+        setInterval(() => {
             if (location.pathname != "/") {
                 force = false
             } else force = true
+        }, 1000)
+    }
+    $: {
+        if (typeof window !== "undefined") {
+            if ($rerender) {
+                if (location.pathname != "/") {
+                    force = false
+                } else force = true
+            }
         }
     }
 </script>

frontend/src/lib/components/widgets/scrollTop.svelte

@@ -9,18 +9,24 @@
     }
 
     const scrollToTop = () => {
-        // Scroll smoothly to the top
-        window.scrollTo({ top: 0, behavior: "smooth" })
+        if (typeof window !== "undefined") {
+            // Scroll smoothly to the top
+            window.scrollTo({ top: 0, behavior: "smooth" })
+        }
     }
 
     onMount(() => {
-        // Attach scroll event listener when component is mounted
-        window.addEventListener("scroll", checkScroll)
+        if (typeof window !== "undefined") {
+            // Attach scroll event listener when component is mounted
+            window.addEventListener("scroll", checkScroll)
+        }
     })
 
     onDestroy(() => {
-        // Remove scroll event listener when component is destroyed
-        window.removeEventListener("scroll", checkScroll)
+        if (typeof window !== "undefined") {
+            // Remove scroll event listener when component is destroyed
+            window.removeEventListener("scroll", checkScroll)
+        }
     })
 </script>
 

frontend/src/lib/components/widgets/topDown.svelte

@@ -31,7 +31,7 @@
                 min-width: 60px;
                 min-height: 100px;
                 padding: 10px;
-                background-color: @bg-color-secondary;
+                background-color: @signal-color;
                 color: @font-color-secondary;
                 font-family: "LibreCaslonText";
                 font-size: 1.7rem;

frontend/src/lib/functions/loadNavigation.ts

@@ -2,5 +2,6 @@ import { api } from "../../api"
 
 export async function loadNavigation(): Promise<Navigation[]> {
     let nav = await api<Navigation[]>("navigation", {})
+    console.log("NAV:", nav)
     return nav.data
 }