feat: ajoute mascotte

This commit is contained in:
Kazhnuz 2024-05-24 20:06:18 +02:00
parent 37cfe77c49
commit fc92698252
4 changed files with 43 additions and 0 deletions

View file

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

View file

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

View file

@ -188,4 +188,37 @@ main input:hover, main input:focus-visible {
.emoji { .emoji {
padding-right: 0.45rem; padding-right: 0.45rem;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4); 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;
} }

BIN
public/img/mascotte.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB