feat: many design changes

packages/base/Resources/Public/Scss/components/_footer.scss

@@ -63,19 +63,3 @@
     font-size: 0.9rem;
   }
 }
-
-/* Social links styling based on href */
-a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
-  display: inline-block;
-  text-decoration: none;
-  color: #4b4b4b;
-  transition: color 0.3s ease;
-}
-
-a[href*="instagram.com"]:hover,
-a[href*="tiktok.com"]:hover,
-a[href*="linkedin.com"]:hover,
-a[href*="twitter.com"]:hover,
-a[href*="x.com"]:hover {
-  color: #6B8E23;
-}

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -2,11 +2,15 @@
 // so that when it becomes sticky, the content doesn't jump.
 $nav-height: 60px; // Adjust as needed
 
+// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
+// Ensure this path is correct for your TYPO3 installation.
+// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
+
 header {
   width: 100%;
   height: $nav-height;
   line-height: $nav-height;
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
+  background: url('../Images/background.jpg') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
@@ -17,7 +21,6 @@ header {
   .container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin: 0 auto;
     height: 100%;
     padding: 0 1rem;
@@ -86,22 +89,30 @@ header {
     display: flex;
     list-style: none;
     align-items: center;
+    margin: auto;
 
-    .nav-item {
-      margin: 0 1rem;
+    font-family: 'Hajime Sans', sans-serif;
+    font-size: 1.75rem;
 
-      .nav-link {
-        text-decoration: none;
-        color: $primary-color;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-size: 1rem;
-        @include transition(color);
+    a {
+        font-weight: 400;
+    }
+  }
 
-        &:hover {
-          color: $brand-color;
-        }
+  .nav-item {
+    margin: 0 1rem;
+
+    .nav-link {
+      text-decoration: none;
+      color: $primary-color;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-size: 1rem;
+      @include transition(color);
+
+      &:hover {
+        color: $brand-color;
       }
     }
   }
@@ -117,7 +128,6 @@ header {
       left: 0;
       right: 0;
       flex-direction: column;
-      background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
       max-height: 0;
       overflow: hidden;
       @include transition(max-height, 0.4s);

packages/base/Resources/Public/Scss/components/_news.scss

@@ -9,13 +9,13 @@
       max-width: 100%;
   }
 
-  @media (max-width: $breakpoint-md) {
-    .news-list-item {
-      grid-column: span 2;
-    }
-  }
+  // @media (min-width: $breakpoint-md) {
+  //   .news-list-item {
+  //     grid-column: span 2;
+  //   }
+  // }
 
-  @media (min-width: $breakpoint-xl) {
+  @media (min-width: $breakpoint-lg) {
     .news-list-item {
       grid-column: span 2;