66 lines
1.5 KiB
Svelte
66 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
export interface LinkEntry {
|
|
icon?: string;
|
|
text: string;
|
|
link: string;
|
|
}
|
|
|
|
let {
|
|
entries,
|
|
} : {
|
|
entries: LinkEntry[];
|
|
} = $props();
|
|
</script>
|
|
|
|
<ul class="styled-list">
|
|
{#each entries as entry}
|
|
<li>
|
|
<a href={entry.link}>
|
|
{#if entry.icon}
|
|
<img height="24px" src={entry.icon} alt="Icon">
|
|
{/if}
|
|
{@html entry.text}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<style>
|
|
li {
|
|
--notch-size-link: 10px;
|
|
clip-path: polygon(
|
|
0% var(--notch-size-link),
|
|
var(--notch-size-link) 0%,
|
|
calc(100% - var(--notch-size-link)) 0%,
|
|
100% var(--notch-size-link),
|
|
100% calc(100% - var(--notch-size-link)),
|
|
calc(100% - var(--notch-size-link)) 100%,
|
|
var(--notch-size-link) 100%,
|
|
0% calc(100% - var(--notch-size-link))
|
|
);
|
|
}
|
|
li:hover {
|
|
background-color: var(--color-background-highlight-hover);
|
|
}
|
|
a {
|
|
width: 100%;
|
|
transition: color 0.2s ease-in-out;
|
|
}
|
|
a:link, a:visited {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: var(--color-highlight);
|
|
}
|
|
|
|
img {
|
|
filter: var(--color-text-img);
|
|
margin-top: 4px;
|
|
margin-bottom: -4px;
|
|
width: fit-content !important;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
display: inline;
|
|
}
|
|
</style> |