11 lines
864 B
Vue
11 lines
864 B
Vue
<template>
|
|
<NuxtLink to="/" class="mark" aria-label="Dungeons & Ground home">
|
|
<span class="mark-icon" aria-hidden="true">D<span>&</span>G</span>
|
|
<span class="mark-copy"><strong>DUNGEONS</strong><small>& GROUND</small></span>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mark{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.mark-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--acid);font:600 14px/1 var(--display);letter-spacing:-1px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.mark-icon span{color:var(--acid);font-size:9px}.mark-copy{display:flex;flex-direction:column;font-family:var(--display);letter-spacing:.08em}.mark-copy strong{font-size:12px}.mark-copy small{font-size:8px;color:var(--muted);letter-spacing:.32em}
|
|
</style>
|