moris/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fallbackをbackground imageにした

Browse source
This commit is contained in:
moris 2025-04-03 15:42:51 +09:00
parent a74230ce8a
commit 9d72e1953f
1 changed files with 6 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/routes/(DefaultStyle)/[slug]/grid.svelte
View file

@ -14,7 +14,7 @@
{:else if emoji} {:else if emoji}
<img class='emoji' src="{emoji}" alt="thumbnail"/> <img class='emoji' src="{emoji}" alt="thumbnail"/>
{:else} {: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} {/if}
<div class="tag date">{date.toLocaleDateString('sv-SE')}</div> <div class="tag date">{date.toLocaleDateString('sv-SE')}</div>
@ -61,6 +61,11 @@
.emoji { .emoji {
height: 70%; 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{ .tag{
position: absolute; position: absolute;