80 lines
1.5 KiB
Svelte
80 lines
1.5 KiB
Svelte
<script>
|
|
import IntersectionObserver from './IntersectionObserver.svelte';
|
|
export let url;
|
|
export let image;
|
|
export let title;
|
|
export let description;
|
|
</script>
|
|
|
|
<div class="referral py-0 px-3" title="{description}">
|
|
<a href="{url.replace('index.html', '')}">
|
|
<IntersectionObserver let:intersecting top="{600}" once="{true}">
|
|
{#if intersecting}
|
|
<div
|
|
data-chromatic="ignore"
|
|
class="image"
|
|
style="{`background-image: url(${image});`}"
|
|
></div>
|
|
{:else}
|
|
<div class="image"></div>
|
|
{/if}
|
|
</IntersectionObserver>
|
|
<p class="body-caption" data-chromatic="ignore">{title}</p>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- svelte-ignore css-unused-selector -->
|
|
<style lang="scss">
|
|
@import '../../../scss/mixins';
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
padding-bottom: 50%;
|
|
background-size: cover;
|
|
background-position: 50%;
|
|
}
|
|
|
|
.referral {
|
|
div.image {
|
|
@include fmb-1;
|
|
border: 1px solid var(--nav-rules, #efefef);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
p {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
p {
|
|
color: var(--nav-primary, #666);
|
|
text-transform: none;
|
|
margin: 0;
|
|
}
|
|
|
|
width: 25%;
|
|
// padding: 0 10px;
|
|
|
|
@media (max-width: 768px) {
|
|
width: 33.33333%;
|
|
|
|
&:nth-child(4) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
width: 50%;
|
|
|
|
&:nth-child(3) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|