feat: ajoute mascotte

_data/config.json

@@ -1,5 +1,9 @@
 {
   "accentColor":"#c2255c",
+  "mascotte":{
+    "message":"Mascotte créée par Withelias !",
+    "alt":"Un petit kobold marron dans une tasse avec marquée Kobold Café"
+  },
   "featuredSites":[
     {"nom":"Kobold Cafe", "url":"https://kobold.cafe/", "emoji":"☕"},
     {"nom":"Code Source", "url":"https://git.kobold.cafe/kazhnuz/embarcadere", "emoji":"ℹ️"}

_includes/layouts/parent.njk

@@ -46,5 +46,11 @@
 			{%- endfor -%}
     </div>
   </main>
+	<div class="mascotte">
+		<div>
+			{% image "../public/img/mascotte.png", config.mascotte.alt %}
+			<div class="mascotte-message">{{ config.mascotte.message }}</div>
+		<div>
+	</div>
 </body>
 </html>

public/css/index.css

@@ -188,4 +188,37 @@ main input:hover, main input:focus-visible {
 .emoji {
   padding-right: 0.45rem;
   text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
+}
+
+.mascotte {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+}
+
+.mascotte > div {
+  position: relative;
+}
+
+.mascotte img {
+  width: 160px;
+  height: auto;
+  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.6));
+  margin: 20px;
+}
+
+.mascotte:hover .mascotte-message {
+  opacity: 1;
+}
+
+.mascotte-message {
+  background-color:rgba(0,0,0,0.7);
+  backdrop-filter: blur(6px);
+  color:white;
+  position:absolute;
+  bottom: 32px;
+  padding: 3px;
+  border-radius: 6px;
+  opacity:0;
+  transition: opacity 0.1s;
 }