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 4px;
|
||
}
|
||
a {
|
||
margin: 0 4px;
|
||
text-decoration: none;
|
||
font-size: 1.0rem;
|
||
line-height: 1.4rem;
|
||
transition: color var(--duration-animation) ease-out, font-weight var(--duration-animation) 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> |