92 lines
2.4 KiB
Svelte
92 lines
2.4 KiB
Svelte
<script lang="ts">
|
||
let {
|
||
ringName,
|
||
ringLink,
|
||
prevLink,
|
||
nextLink,
|
||
randLink,
|
||
listLink,
|
||
prevSymbol,
|
||
nextSymbol,
|
||
highlightEmojiLeft,
|
||
highlightEmojiRight,
|
||
}: {
|
||
ringName: string;
|
||
ringLink: string;
|
||
prevLink: string;
|
||
nextLink: string;
|
||
randLink?: string;
|
||
listLink?: string;
|
||
prevSymbol: string;
|
||
nextSymbol: string;
|
||
|
||
// Emoji to be used as highlight next to the title
|
||
highlightEmojiLeft: string;
|
||
|
||
/**
|
||
* Emoji to be used as highlight to the right of the title. If
|
||
* not set, will default to highlightEmojiLeft.
|
||
*/
|
||
highlightEmojiRight?: string;
|
||
} = $props();
|
||
</script>
|
||
|
||
<div class="webring-container">
|
||
<div class="webring-row">
|
||
<span>〔</span>
|
||
<a href="{ringLink}">{highlightEmojiLeft} {ringName} {highlightEmojiRight ?? highlightEmojiLeft}</a>
|
||
<span>〕</span>
|
||
</div>
|
||
<div class="webring-row">
|
||
<span>〔</span>
|
||
<a href="{prevLink}">{prevSymbol} prev</a>
|
||
{#if randLink}
|
||
<a href="{randLink}">rand</a>
|
||
{/if}
|
||
{#if listLink}
|
||
<a href="{listLink}">list</a>
|
||
{/if}
|
||
<a href="{nextLink}">next {nextSymbol}</a>
|
||
<span>〕</span>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.webring-container {
|
||
display: flex;
|
||
width: fit-content;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 4px;
|
||
}
|
||
a {
|
||
margin: 0 4px;
|
||
text-decoration: none;
|
||
font-size: 1.0rem;
|
||
line-height: 1.4rem;
|
||
font-weight: 500;
|
||
/* border: var(--border-width); */
|
||
transition: color var(--duration-animation) var(--anim-curve),
|
||
font-weight var(--duration-animation) var(--anim-curve);
|
||
/* border-color var(--duration-animation) var(--anim-curve); */
|
||
}
|
||
a:link, a:visited, span {
|
||
color: var(--color-highlight);
|
||
}
|
||
a:hover {
|
||
color: var(--color-highlight-alt);
|
||
text-decoration: inherit;
|
||
}
|
||
.webring-row {
|
||
font-family: var(--font-mono);
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
}
|
||
span {
|
||
margin: 0;
|
||
font-weight: bold;
|
||
font-size: 1.0rem;
|
||
line-height: 1.4rem;
|
||
}
|
||
</style> |