FEATURE Adding a mention div component

css/admin-style.css

@@ -10,3 +10,7 @@
   .block-editor-block-inspector .block-editor-url-input {
   min-width: unset !important;
 }
+
+.editor-header__settings a:after {
+  display: none !important;
+}

resources/css/admin-style.css

@@ -11,3 +11,6 @@
     min-width: unset !important;
   }
 }
+.editor-header__settings a:after {
+  @apply !hidden;
+}

resources/css/base/links.css

@@ -9,3 +9,9 @@ a[target='_blank'] {
     background-position: center;
   }
 }
+
+.no-external-icon {
+  &:after {
+    @apply !hidden;
+  }
+}

resources/css/blocks/content-box.css

@@ -27,6 +27,13 @@
     --content-box-text-color: #fff;
   }
 
+  p,
+  li {
+    @apply font-light;
+  }
+  li {
+    @apply pb-2;
+  }
   p {
     @apply pb-8;
   }
@@ -40,9 +47,32 @@
     @apply max-w-screen-lg mx-auto px-8;
   }
   h3 {
-    @apply title-small font-bold;
+    /* @apply title-small font-bold; */
   }
 
+  h1.wp-block-heading {
+    @apply !text-6xl mb-12;
+  }
+
+  h3.wp-block-heading {
+    @apply !text-4xl uppercase fjalla font-light tracking-wide;
+  }
+  h4.wp-block-heading {
+    @apply !text-2xl uppercase nunito font-medium tracking-widest pb-1;
+  }
+  ul + h3,
+  p + h3 {
+    @apply mt-12;
+  }
+
+  h3 + p {
+    @apply !mt-3;
+  }
+
+  ul {
+    list-style: disc;
+    padding-left: 1.5rem;
+  }
   .carhop-heading:not(:first-child) {
     @apply pt-32;
   }

resources/css/editor-style.css

@@ -1,5 +1,5 @@
-@import "tailwindcss/components";
+@import 'tailwindcss/components';
-@import "tailwindcss/utilities";
+@import 'tailwindcss/utilities';
 
 body {
   @apply font-sans;
@@ -9,11 +9,11 @@ body {
   @apply max-w-screen-xl;
 }
 
-.wp-block[data-align="wide"] {
+.wp-block[data-align='wide'] {
   @apply max-w-screen-xl;
 }
 
-.wp-block[data-align="full"] {
+.wp-block[data-align='full'] {
   @apply max-w-full;
 }
 .wp-block.alignfull {

resources/css/layout/footer.css

@@ -85,6 +85,37 @@ footer {
       }
     }
   }
+
+  .mentions {
+    li,
+    p,
+    a {
+      @apply text-xl font-light;
+    }
+    a {
+      @apply underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 6px;
+      &:hover {
+        filter: brightness(1.3);
+      }
+    }
+    ul {
+      @apply w-full flex gap-x-4 justify-between pt-12;
+      li {
+        @apply text-primary;
+      }
+      li.deligraph_credit {
+        @apply flex gap-x-1 items-center;
+        img {
+          transition: all 0.5s;
+          @apply w-5 h-5 filter-primary;
+          animation: fade-in-out 3.5s linear infinite;
+          /* scale: 1.2; */
+        }
+      }
+    }
+  }
 }
 
 @keyframes parallax {
@@ -95,3 +126,19 @@ footer {
     transform: translateY(200px);
   }
 }
+
+@keyframes fade-in-out {
+  10% {
+    opacity: 0;
+    scale: 0.8;
+  }
+  40%,
+  60% {
+    opacity: 1;
+    scale: 1;
+  }
+  100% {
+    opacity: 0;
+    scale: 0.8;
+  }
+}

template-parts/footer.php

@@ -86,3 +86,21 @@
 
 	</li>
 </ul>
+
+<div class="mentions">
+	<ul>
+		<li>
+			<a href="<?php echo get_the_permalink(606); ?>" target="_self"><?php echo __('Plan du site', "carhop") ?></a>
+		</li>
+		<li>
+			<a href="<?php echo get_the_permalink(606); ?>" target="_self"><?php echo __('Politique de confidentialité', "carhop") ?></a>
+		</li>
+		<li>
+			<p>Acessibilité : conforme</a>
+		</li>
+		<li class="deligraph_credit">
+			Concoté avec <img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-soutenir.svg" alt="amour" /> par <a href="https://www.deligraph.be" target="_blank" class="no-external-icon">Deligraph</a>
+		</li>
+
+	</ul>
+</div>