77 lines
1.8 KiB
Svelte
77 lines
1.8 KiB
Svelte
|
<script lang="ts">
|
|||
|
|
let {
|
|||
|
|
ringLink,
|
|||
|
|
prevLink,
|
|||
|
|
nextLink,
|
|||
|
|
randLink,
|
|||
|
|
listLink,
|
|||
|
|
prevSymbol,
|
|||
|
|
nextSymbol,
|
|||
|
|
highlightEmoji,
|
|||
|
|
}: {
|
|||
|
|
ringLink: string;
|
|||
|
|
prevLink: string;
|
|||
|
|
nextLink: string;
|
|||
|
|
randLink?: string;
|
|||
|
|
listLink?: string;
|
|||
|
|
prevSymbol: string;
|
|||
|
|
nextSymbol: string;
|
|||
|
|
highlightEmoji: string;
|
|||
|
|
} = $props();
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<div class="webring-container">
|
|||
|
|
<div class="webring-row">
|
|||
|
|
<span>〔</span>
|
|||
|
|
<a href="{ringLink}">{highlightEmoji} GAMEDEV WEBRING {highlightEmoji}</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: 16px auto;
|
|||
|
|
}
|
|||
|
|
a {
|
|||
|
|
margin: 0 4px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 1.0rem;
|
|||
|
|
line-height: 1.4rem;
|
|||
|
|
transition: color 0.1s ease-out, font-weight 0.1s ease-out;
|
|||
|
|
}
|
|||
|
|
a:link, a:visited, span {
|
|||
|
|
color: var(--color-highlight);
|
|||
|
|
}
|
|||
|
|
a:hover {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--color-highlight-alt);
|
|||
|
|
}
|
|||
|
|
.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>
|