FEATURE Handle self page scrolling

resources/css/app.css

@@ -14,7 +14,8 @@
 
 /* ########### FORMS ############ */
 @import './forms/forms.css';
-@import './forms/form_contributions.css';
+@import './forms/form-contributions.css';
+@import './forms/form-contact.css';
 
 /* ########### COMPONENTS ############ */
 @import './components/buttons.css';

resources/css/base/links.css

@@ -1,4 +1,7 @@
 a[target='_blank'] {
+  @apply external-link;
+}
+.external-link {
   &:after {
     @apply content-[''] w-7 h-7 ml-2 inline-block;
     background-image: url('../resources/img/carhop-fleche-lien-externe-full--green.svg');
@@ -9,6 +12,24 @@ a[target='_blank'] {
     background-position: center;
   }
 }
+.underlined-link {
+  transition: all 0.3s ease-out;
+  @apply underline underline-offset-8;
+  text-decoration-thickness: 1px;
+  &--white {
+    @apply decoration-white;
+    &:hover {
+      @apply decoration-carhop-green-300;
+    }
+  }
+  &--green {
+    @apply decoration-carhop-green-700;
+    &:hover {
+      @apply decoration-carhop-green-400;
+    }
+  }
+}
+
 .internal-link-with-icon {
   @apply flex items-center;
   transition: transform 0.3s ease-out;

resources/css/blocks/chapter-section.css

@@ -107,6 +107,14 @@
     }
   }
 
+  &--bg-dark {
+    .wp-block-carhop-blocks-cta {
+      &:after {
+        filter: brightness(41);
+      }
+    }
+  }
+
   > *:not(.chapter-section__background) {
     z-index: 2;
   }

resources/css/blocks/content-box.css

@@ -53,6 +53,13 @@
   h3 + p {
     @apply !mt-3;
   }
+  p > a {
+    transition: all 0.3s ease-out;
+    @apply underline underline-offset-8;
+    text-decoration-thickness: 1px;
+
+    @apply underlined-link underlined-link--white;
+  }
 
   ul {
     list-style: disc;

resources/css/forms/form-contributions.css

@@ -2,6 +2,9 @@
   /* margin-top: -30px !important; */
   margin-bottom: 20px !important;
 
+  a {
+    @apply underlined-link underlined-link--white;
+  }
   .gfield_description {
     @apply !text-xl !font-light;
     @apply max-w-3xl pb-4;

resources/css/layout/gutenberg.css

@@ -45,10 +45,6 @@ article > *:not(.entry-content),
 }
 
 .site-content {
-  a {
-    /* @apply underline underline-offset-4;
-    text-decoration-thickness: 1px; */
-  }
   p,
   li {
     strong {

resources/js/app.ts

@@ -1,8 +1,10 @@
 import menuInit from './header';
 import initFooterShapes from './footer';
 import handleScrollTop from './utilities/scroll-top';
+import handleInsidePageScrolling from './page-scrolling';
 window.addEventListener('load', function () {
   // menuInit();
   initFooterShapes();
   handleScrollTop();
+  handleInsidePageScrolling();
 });

resources/js/page-scrolling.ts

@@ -0,0 +1,11 @@
+export default function HandleInsidePageScrolling() {
+  const insideLinks = document.querySelectorAll('a[href^="#"]');
+
+  insideLinks.forEach((link) => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const target = document.querySelector(link.getAttribute('href'));
+      target?.scrollIntoView({ behavior: 'smooth' });
+    });
+  });
+}