fixes

frontend/src/lib/components/Menu/Menu.svelte

@@ -174,6 +174,7 @@
                             .page {
                                 font-size: 1.6rem;
                                 color: @font-color-secondary;
+                                font-family: "Libre Caslon Text", serif;
                             }
                         }
                         @media @tablet {

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

@@ -120,7 +120,7 @@
 
             .titles {
                 padding: 0 5%;
-                font-weight: normal;
+                font-weight: 500;
                 h1 {
                     font-size: 2rem;
                     padding: 20px 0px;
@@ -132,6 +132,7 @@
                 h2 {
                     font-size: 1.2rem !important;
                     line-height: 1;
+                    font-family: "Libre Franklin", sans-serif;
                 }
             }
             .description {
@@ -146,10 +147,10 @@
                     min-width: 0px;
                 }
             }
-            
+
             @media @tablet {
                 .titles {
-                    font-weight: normal;
+                    font-weight: 500;
                     h1 {
                         font-size: 3.4rem;
                         padding: 20px 20px;
@@ -175,7 +176,7 @@
 
             @media @desktop {
                 .titles {
-                    font-weight: normal;
+                    font-weight: 500;
                     h1 {
                         font-size: 5rem;
                         padding: 20px 0px;

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

@@ -38,7 +38,7 @@
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
-        <h3 class:red="{row.topTitleRed}">{row.topTitle}</h3>
+        <h3 style="text-transform: uppercase; font-size: 14px;" class:red="{row.topTitleRed}">{row.topTitle}</h3>
     {/if}
     {#if nestedPath}
         <h3
@@ -116,7 +116,7 @@
         color: #fa00ff !important;
     }
     h3 {
-        font-weight: normal;
+        font-weight: 500;
     }
     @media @tablet {
         h3 {
@@ -134,9 +134,11 @@
         }
         h2 {
             font-size: 2.3rem;
+            font-weight: 500;
         }
         h1 {
             font-size: 4rem;
+            font-weight: 500;
         }
     }
 
@@ -145,6 +147,7 @@
         display: flex;
         align-items: flex-start;
         flex-wrap: wrap;
+        gap: 20px;
         &.dominant {
             @media (max-width: 1024px) {
                 flex-direction: row-reverse;
@@ -169,7 +172,7 @@
             @media @desktop {
                 min-width: 30% !important;
             }
-            padding: 10px;
+
             flex: 1;
             min-width: 0;
         }

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

@@ -81,7 +81,7 @@
                 display: flex;
                 flex-direction: column;
                 .inner-container {
-                    max-width: 170px;
+                    max-width: 200px;
                     &:hover {
                         max-width: fit-content;
                     }
@@ -93,8 +93,10 @@
                     .title {
                         font-size: min(0.9vw, 14px);
                         padding: 2px 5px;
+                        text-transform: uppercase;
                         @media @tablet {
                             padding: 5px 10px;
+                            font-size: min(1vw, 18px);
                         }
                         font-weight: bold;
                         color: @font-color-secondary;

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

@@ -94,7 +94,7 @@
                     border: none;
                     height: 36px;
                     padding: 2px 15px;
-                    font-size: 14px;
+                    font-size: 20px;
                     font-weight: bold;
                     cursor: pointer;
                 }

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

@@ -27,7 +27,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            width: 157px;
+            width: 150px;
             gap: 20px;
             max-width: 45%;
             flex-grow: 1;
@@ -40,7 +40,7 @@
                 gap: 10px;
             }
             @media @desktop {
-                width: 240px;
+                width: 230px;
                 gap: 40px;
             }
             img {
@@ -55,9 +55,11 @@
                     text-align: center;
                     font-size: 2.2rem;
                     font-family: "Libre Caslon Text", serif;
+                    font-style: normal;
                 }
                 p {
                     text-align: center;
+
                     font-weight: bold;
                 }
             }

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

@@ -15,8 +15,10 @@
         <div class="box" id="box{i}" class:active="{i == active}">
             <div class="content">
                 <div class="icon">
-                    <svg stroke="{i == active ? 'black' : 'white'}" data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"
-                    ></svg>
+                    <svg
+                        stroke="{i == active ? 'black' : 'white'}"
+                        fill="{i == active ? 'black' : 'white'}"
+                        data-src="{apiBaseURL}page/{pageId}/{box.icon?.src}"></svg>
                 </div>
                 <div class="text">
                     {box.text}
@@ -31,8 +33,11 @@
     .iconCycleSquares {
         display: flex;
         flex-wrap: wrap;
+        justify-content: center;
         gap: 10px;
         font-size: 0.8rem;
+        transition: all 600ms;
+
         @media @tablet {
             gap: 20px;
             font-size: 1rem;
@@ -44,6 +49,7 @@
             align-items: center;
             justify-content: center;
             color: @font-color-secondary;
+
             &.active {
                 background-color: @bg-color;
                 color: @font-color;
@@ -54,16 +60,19 @@
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+
                 .text {
                     width: 100%;
                     display: flex;
                     justify-content: center;
                     text-align: center;
+                    font-family: "Libre Caslon Text", serif;
                 }
             }
             @media @tablet {
-                width: 260px;
-                height: 260px;
+                width: 270px;
+                height: 270px;
+                gap: 30px;
             }
         }
     }

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

@@ -13,12 +13,12 @@
 
     onMount(() => {
         for (let i = 0; i < count; i++) {
-            let angle = angleStep * i * (Math.PI / 180) // Convert to radians
+            let angle = (angleStep * i - 90) * (Math.PI / 180) // Convert to radians
 
             circles.push({
                 x: radius * Math.cos(angle),
                 y: radius * Math.sin(angle),
-                rotation: angleStep * i - 90, // subtract 90 to point towards the circle
+                rotation: angleStep * i + 180, // subtract 90 to point towards the circle
             })
         }
         circles = circles
@@ -51,9 +51,10 @@
                         <svg
                             id="mySvgObject{i}"
                             stroke="{i == focused ? 'white' : 'black'}"
+                            fill="{i == focused ? 'white' : 'black'}"
                             data-src="{apiBaseURL}page/{pageId}/{col.iconCycleCircle?.boxes[i]?.icon?.src}"></svg>
                     </div>
-                    <div class="text">
+                    <div class="text" style="text-align: center;">
                         {col.iconCycleCircle?.boxes[i]?.text}
                     </div>
                 </div>

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

@@ -15,7 +15,7 @@
         border: none;
         height: 36px;
         padding: 2px 15px;
-        font-size: 14px;
+        font-size: 20px;
         font-weight: bold;
     }
     .bright {

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

@@ -2,10 +2,11 @@
     import { navigate } from "svelte-routing/src/history"
     import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
     export let col: Column
+    let focused = -1
 </script>
 
 <div class="link-container">
-    {#each col.pageLinkBlocks as link}
+    {#each col.pageLinkBlocks as link, i}
         {#if isNaN(link.extendableRowNr)}
             <button
                 class="page-ref"
@@ -19,6 +20,12 @@
             </button>
         {:else}
             <button
+                on:mouseenter="{() => {
+                    focused = i
+                }}"
+                on:mouseleave="{() => {
+                    focused = -1
+                }}"
                 class="row-ref fill"
                 on:click="{() => {
                     $rerender = $rerender + 1
@@ -30,7 +37,11 @@
                 <div>
                     {link.name}
                 </div>
-                <img src="/media/arrow-r.svg" alt="arrow" />
+                <svg
+                    data-src="/media/arrow-r.svg"
+                    stroke="{i == focused ? '#fff' : 'black'}"
+                    fill="{i == focused ? '#fff' : 'black'}"
+                    style="z-index: 9999; position: relative;"></svg>
             </button>
         {/if}
     {/each}