feat: button design, icons fix

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

@@ -1,20 +1,11 @@
-.ci, 
-a[href*="instagram.com"],
-a[href*="tiktok.com"],
-a[href*="linkedin.com"],
-a[href*="twitter.com"],
-a[href*="x.com"] {
+.ci {
   display: inline-block;
   vertical-align: middle;
   line-height: 1;
   position: relative;
 }
 
-.ci::before, 
-a[href*="instagram.com*"]::before,
-a[href*="tiktok.com"]::before,
-a[href*="linkedin.com"]::before,
-a[href*="x.com"]::before {
+.ci::before {
   display: inline-block;
   content: ' ';
   width: 1em;
@@ -48,22 +39,6 @@ a[href*="x.com"]::before {
 .ci-phone::before {
   mask-image: url(../Icons/phone.svg);
 }
-
-a[href*="instagram.com*"]::before {
-  mask-image: url(../Icons/instagram.svg);
-}
-a[href*="tiktok.com"]::before {
-  mask-image: url(../Icons/tiktok.svg);
-  width: 0.9em;
-  height: 0.9em;
-}
-a[href*="linkedin.com"]::before {
-  mask-image: url(../Icons/linkedin.svg);
-}
-a[href*="x.com"]::before {
-  mask-image: url(../Icons/x.svg);
-}
-
 .ci-angle-right::before {
   mask-image: url(../Icons/angle-right.svg);
 }

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

@@ -0,0 +1,9 @@
+.btn {
+  background-color: var(--bs-primary);
+  color: var(--bs-yellow);
+  font-family: 'Hajime Sans', sans-serif;
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  cursor: pointer;
+}

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

@@ -120,6 +120,7 @@ header {
   @media (max-width: $breakpoint-lg) {
     .nav-toggle {
       display: block;
+      margin-left: auto; // move toggle to the right on mobile
     }
 
     .nav-links {
@@ -130,6 +131,7 @@ header {
       flex-direction: column;
       max-height: 0;
       overflow: hidden;
+      background: #fff; // Add white background for mobile dropdown
       @include transition(max-height, 0.4s);
 
       .nav-item {

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

@@ -25,7 +25,6 @@
         grid-column: 5 / span 2;
         grid-row: 2;
       }
-
     }
   }
 
@@ -82,7 +81,6 @@
     height: auto;
   }
 
-
   a {
     position: relative;
     display: flex;
@@ -133,10 +131,9 @@
   }
 }
 
-/* Show mobile button only below desktop breakpoint */
+/* Show mobile button only below desktop breakpoint, add space above */
 .mobile-btn {
-  display: block;
-  margin-top: 1rem;
+  margin-top: 2rem; /* Added space between the news list and the show all button */
   @media (min-width: $breakpoint-lg) {
     display: none;
   }

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

@@ -7,3 +7,4 @@
 @import 'components/contentElements';
 @import 'components/news';
 @import 'components/footer';
+@import 'components/buttons';