173 lines
4.3 KiB
Svelte
173 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
export interface LinkEntry {
|
|
title: string;
|
|
subtitle: string;
|
|
img: string;
|
|
imgAlt: string;
|
|
link: string;
|
|
description: string;
|
|
}
|
|
|
|
let {
|
|
entries,
|
|
}: {
|
|
entries: LinkEntry[];
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="hs-post-list">
|
|
{#each entries as entry}
|
|
{@render linkEntry({entry})}
|
|
{/each}
|
|
</div>
|
|
|
|
{#snippet linkEntry({entry}: {entry: LinkEntry})}
|
|
<a class="hs-list-container blurred-background-hover" href="{entry.link}">
|
|
<div class="hs-list-img-container">
|
|
<img class="hs-list-img" src="{entry.img}" alt="{entry.imgAlt}">
|
|
</div>
|
|
<div class="hs-list-text-container">
|
|
<p class="hs-list-subtitle">{@html entry.subtitle}</p>
|
|
<p class="hs-list-title">{entry.title}</p>
|
|
<p class="hs-list-description">{entry.description}</p>
|
|
</div>
|
|
</a>
|
|
{/snippet}
|
|
|
|
<style>
|
|
:root {
|
|
--color-laura: #C76668CC;
|
|
--color-laura-darker: #A55051CC;
|
|
}
|
|
|
|
.hs-post-list {
|
|
max-width: 1600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.hs-list-container {
|
|
box-sizing: content-box;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-decoration: none;
|
|
align-items: center;
|
|
margin: 0;
|
|
justify-content: center;
|
|
border: var(--border-style) transparent var(--border-dash-size);
|
|
border-radius: var(--border-radius);
|
|
transition: border-color var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.hs-list-img-container {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
transition: border-radius var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.hs-list-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: scale var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.hs-list-text-container {
|
|
display: grid;
|
|
grid-auto-columns: 1fr;
|
|
grid-template-rows: 1fr 1fr 0fr;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
padding: 0 16px;
|
|
transition: background-color var(--duration-animation) var(--anim-curve),
|
|
backdrop-filter var(--duration-blur) var(--anim-curve),
|
|
grid-template-rows var(--duration-blur) var(--anim-curve);
|
|
}
|
|
|
|
.hs-list-title, .hs-list-subtitle, .hs-list-description {
|
|
margin: 0;
|
|
transition: color var(--duration-animation) var(--anim-curve),
|
|
opacity var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.hs-list-title {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hs-list-subtitle, .hs-list-description {
|
|
font-size: 1.0rem;
|
|
line-height: 1.2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hs-list-description {
|
|
font-weight: 500;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hs-list-container:hover {
|
|
border-color: var(--color-highlight-alt);
|
|
background-color: var(--color-background-highlight-alt);
|
|
}
|
|
|
|
@media screen and (min-width: 800px) {
|
|
.hs-list-title {
|
|
font-size: 1.4rem;
|
|
line-height: 2.0rem;
|
|
}
|
|
|
|
.hs-list-container:hover .hs-list-img {
|
|
scale: 1.2;
|
|
}
|
|
|
|
.hs-list-container:hover .hs-list-img-container {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-bottom-left-radius: var(--border-radius);
|
|
}
|
|
|
|
.hs-list-container:hover .hs-list-text-container {
|
|
grid-template-rows: 0fr 1fr 1fr;
|
|
}
|
|
|
|
.hs-list-container:hover .hs-list-subtitle {
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.hs-list-container:hover .hs-list-description {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.hs-list-title {
|
|
font-size: 1.0rem;
|
|
line-height: 1.1rem;
|
|
}
|
|
|
|
.hs-list-description {
|
|
display: none;
|
|
}
|
|
|
|
.hs-list-subtitle {
|
|
font-size: 0.8rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.hs-list-container {
|
|
height: 72px;
|
|
}
|
|
|
|
.hs-list-text-container {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.hs-list-img-container {
|
|
width: 110px;
|
|
min-width: 110px;
|
|
}
|
|
}
|
|
</style> |