JavaScript-optional public web frontend for Bluesky
anartia.kelinci.net
sveltekit
atcute
bluesky
typescript
svelte
fix: only do links when standalone
+11
-6
+11
-6
src/lib/components/embeds/image-embed.svelte
+11
-6
src/lib/components/embeds/image-embed.svelte
···
91
91
{@const image = images[index]}
92
92
{@const alt = trimRichText(image.alt)}
93
93
94
-
<a href={image.fullsize.replace('@jpeg', '@png')} target="_blank" rel="noopener" class="link">
95
-
<img loading="lazy" src={image.thumb} {alt} class={`image` + (blur ? ` is-blurred` : ``)} />
96
-
</a>
94
+
{#if standalone}
95
+
<a href={image.fullsize.replace('@jpeg', '@png')} target="_blank" rel="noopener" class="image-wrapper">
96
+
<img loading="lazy" src={image.thumb} {alt} class={`image` + (blur ? ` is-blurred` : ``)} />
97
+
</a>
98
+
{:else}
99
+
<div class="image-wrapper">
100
+
<img loading="lazy" src={image.thumb} {alt} class={`image` + (blur ? ` is-blurred` : ``)} />
101
+
</div>
102
+
{/if}
97
103
98
104
{#if standalone && alt}
99
105
<ImageAlt {alt} />
···
167
173
168
174
.item,
169
175
.single-item {
170
-
&:has(.link:focus-visible) {
176
+
&:has(.image-wrapper:focus-visible) {
171
177
outline: 2px solid var(--accent);
172
178
outline-offset: -1px;
173
179
}
174
180
}
175
181
176
-
.link {
182
+
.image-wrapper {
177
183
position: absolute;
178
184
inset: 0;
179
185
outline: none;
180
186
}
181
-
182
187
.image {
183
188
background: var(--bg-slate);
184
189
width: 100%;