fallbackをbackground imageにした

This commit is contained in:
moris 2025-04-03 15:42:51 +09:00
parent a74230ce8a
commit 9d72e1953f

View file

@ -14,7 +14,7 @@
{:else if emoji}
<img class='emoji' src="{emoji}" alt="thumbnail"/>
{:else}
<img src='data:image/svg+xml,{encodeURIComponent('<svg fill="#aaa" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><path d="m41 57q-0.8 0-1.4-0.6t-0.6-1.4v-14q0-0.8 0.6-1.4t1.4-0.6h14q0.8 0 1.4 0.6t0.6 1.4v14q0 0.8-0.6 1.4t-1.4 0.6zm0-2h14v-14h-14zm1-2h12l-3.8-5-3 4-2.25-3zm-1 2v-14z"/></svg>')}' alt="fallback"/>
<div class='fallback'></div>
{/if}
<div class="tag date">{date.toLocaleDateString('sv-SE')}</div>
@ -61,6 +61,11 @@
.emoji {
height: 70%;
}
.fallback {
width: 100%;
height: 100%;
background: no-repeat center url('data:image/svg+xml,<svg fill="silver" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="m57 73q-0.8 0-1.4-0.6t-0.6-1.4v-14q0-0.8 0.6-1.4t1.4-0.6h14q0.8 0 1.4 0.6t0.6 1.4v14q0 0.8-0.6 1.4t-1.4 0.6zm0-2h14v-14h-14zm1-2h12l-3.8-5-3 4-2.25-3zm-1 2v-14z"/></svg>');
}
.tag{
position: absolute;