Add contact page with metadata and inline spoiler shortcodes

content/contact/index.md

@@ -1 +1,23 @@
-En construction aussi
+---
+title: 'Contact'
+date: '2025-05-13T21:26:00+02:00'
+draft: false
+ShowToc: false
+cover:
+  hidden: false # hide everywhere but not in structured data
+  hiddenInList: false # hide on list pages and home
+  hiddenInSingle: true # hide on single page
+  image: "images/<image.jpg>"
+  alt: "<alt text>"
+  caption: "<text>"
+  relative: true # To use relative path for cover image, used in hugo Page-bundles
+ShowBreadCrumbs: false
+ShowPostNavLinks: true
+ShowReadingTime: false
+---
+
+E-mail : {{< inline-spoiler >}}achille [arobase] achilletoupin.com{{< /inline-spoiler >}}
+
+Signal : {{< inline-spoiler >}}merl1-19{{< /inline-spoiler >}}
+
+Mon 06 : {{< inline-spoiler >}} Nan mais tu rêves {{< /inline-spoiler >}}

layouts/shortcodes/inline-spoiler.html

@@ -0,0 +1,32 @@
+<!-- https://oostens.me/posts/hugo-inline-spoiler-shortcode/ -->
+
+<style>
+    .inline-spoiler {
+    position: relative;
+    display: inline-block;
+    cursor: help;
+    }
+
+    .inline-spoiler::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 1px;
+    color: white;
+    background: black;
+    opacity: 1;
+    transition: opacity 0.7s ease, transform 0.3s ease;
+    }
+
+    .inline-spoiler:hover::before {
+    opacity: 0;
+    transform: translateY(-50%)rotateX(80deg);
+    transition: opacity 1.0s ease, transform 0.5s ease;
+    transition-delay: 0.3s; <!-- To not accidentally reveal the spoiler when hovering over the page --> 
+    }
+</style>
+
+<span class="inline-spoiler">{{- .Inner | safeHTML -}}</span>