feat: many changes

packages/base/Resources/Private/PageView/Partials/Navigation/Main.html

@@ -1,18 +1,18 @@
-<nav class="main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
+<nav class="py-1 main-nav group sticky top-0 z-50 bg-repeat" id="mainNav">
     <div class="container flex items-center h-full mx-auto px-4">
         <a href="/" class="nav-logo">
             <f:image src="EXT:base/Resources/Public/Images/logo.png" alt="Logo" class="block max-h-[50px] h-auto w-auto" />
         </a>
         <button class="nav-toggle group lg:hidden relative w-[30px] h-[30px] cursor-pointer ml-auto bg-none border-none" id="navToggle" aria-label="Toggle Menu">
-            <span class="nav-toggle-icon block relative w-full h-[2px] bg-primary transition-all duration-300 
-                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary before:left-0 before:-top-[8px] before:transition-all before:duration-300 
+            <span class="nav-toggle-icon block relative w-full h-[2px] bg-primary transition-all duration-300
+                         before:content-[''] before:block before:absolute before:w-full before:h-[2px] before:bg-primary before:left-0 before:-top-[8px] before:transition-all before:duration-300
                          after:content-[''] after:block after:absolute after:w-full after:h-[2px] after:bg-primary after:left-0 after:top-[8px] after:transition-all after:duration-300
-                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-x-[5px] group-[.active]:before:translate-y-[5px] 
+                         group-[.active]:bg-transparent group-[.active]:before:rotate-45 group-[.active]:before:translate-x-[5px] group-[.active]:before:translate-y-[5px]
                          group-[.active]:after:-rotate-45 group-[.active]:after:translate-x-[5px] group-[.active]:after:-translate-y-[5px]"></span>
         </button>
 
-        <ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary 
-                   lg:flex lg:relative lg:top-auto lg:left-auto lg:right-auto lg:flex-row lg:max-h-full lg:overflow-visible lg:bg-transparent 
+        <ul class="nav-links flex items-center list-none mx-auto font-hajime text-primary
+                   lg:flex lg:relative lg:top-auto lg:left-auto lg:right-auto lg:flex-row lg:max-h-full lg:overflow-visible lg:bg-transparent
                    absolute top-full left-0 right-0 flex-col max-h-0 overflow-hidden bg-white transition-max-height duration-400 ease-in-out group-[.open]:max-h-[500px]" id="navLinks">
             <f:for each="{mainnavigation}" as="mainnavigationItem">
                 <li class="nav-item lg:mx-4 lg:my-0 lg:p-0 lg:border-0 mx-0 my-0 p-4 border-t border-black/10 first:border-t-0 {f:if(condition: mainnavigationItem.active, then:' active')}{f:if(condition: mainnavigationItem.children, then:' has-submenu')}">

packages/base/Resources/Public/Scss/abstracts/_fonts.scss

@@ -1,64 +1,76 @@
 // Update font file names and ensure no spaces for better compatibility.
 @font-face {
-  font-family: 'Hajime Sans';
-  src: url('../Fonts/Hajime-Sans.woff2') format('woff2');
-  font-weight: 400;
+  font-family: 'Barlow';
+  src: url('../Fonts/Barlow-Medium.woff2') format('woff2');
+  font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
-  src: url('../Fonts/Inter.woff2') format('woff2');
-  font-weight: 100 900; // Adjust as needed for variable font range
+  font-family: 'Barlow';
+  src: url('../Fonts/Barlow-Bold.woff2') format('woff2');
+  font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: 'Barlow', sans-serif;
   font-weight: 500;
+  font-size: 14px;
+
+  @media (min-width: $breakpoint-md) {
+    font-size: 18px;
+  }
 }
 
-h1, h2 {
-  font-family: 'Hajime Sans', sans-serif;
-  color: var(--bs-primary);
-  font-weight: 400;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Barlow', sans-serif;
+  color: var(--color-primary);
+  font-weight: 700;
   line-height: 1;
 }
 
 h1 {
   font-size: 3rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 4.5rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 4.5rem; */
+  /* } */
 }
 
 h2 {
   font-size: 2rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 3rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 3rem; */
+  /* } */
 }
 
 h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: 1.75rem;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 1.5rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 1.5rem; */
+  /* } */
 }
 
 h4 {
   font-size: 1.125rem;
-  font-weight: 600;
 
-  @media (min-width: $breakpoint-md) {
-    font-size: 1.5rem;
-  }
+  /* @media (min-width: $breakpoint-md) { */
+  /*   font-size: 1.5rem; */
+  /* } */
+}
+
+h5 {
+  font-size: 0.875rem;
+}
+
+h6 {
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
 p {
@@ -71,11 +83,11 @@ a {
     font-weight: 700;
 
     &:hover {
-      color: var(--bs-primary-light)
+      color: var(--bs-primary)
     }
 }
 
 button, .btn {
-  font-family: 'Hajime Sans', sans-serif;
-  font-weight: 400;
+  font-family: 'Barlow', sans-serif;
+  font-weight: 700;
 }

packages/base/Resources/Public/Scss/base/_container.scss

@@ -1,6 +1,6 @@
 .container {
   margin: auto;
-  padding: 3rem 1rem;
+  /* padding: 3rem 1rem; */
 
   @include respond($breakpoint-sm) {
     max-width: 540px;

packages/base/Resources/Public/Scss/main.scss

@@ -9,11 +9,11 @@
 @import 'abstracts/icons';
 @import 'abstracts/fade-in';
 @import 'base/base';
-@import 'components/navigation';
-@import 'components/images';
-@import 'components/news';
-@import "components/news_detail";
-@import 'components/footer';
+/* @import 'components/navigation'; */
+/* @import 'components/images'; */
+/* @import 'components/news'; */
+/* @import "components/news_detail"; */
+/* @import 'components/footer'; */
 @import 'components/buttons';
 @import 'layouts/home-page';