22 lines
1.1 KiB
Vue
22 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{ to?: string, sub?: string, compact?: boolean }>(), { to: '/', sub: 'JUNGLE STREET FOOD', compact: false })
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink :to="to" class="logo" aria-label="PANZAÏ — accueil">
|
|
<span class="badge-round"><Toucan :size="compact ? 30 : 38" :branch="false" /></span>
|
|
<span class="txt">
|
|
<span class="display name">PANZAÏ</span>
|
|
<span v-if="!compact" class="sub">{{ sub }}</span>
|
|
</span>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
|
|
.badge-round { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(160deg, #5A3A22, #3A2617); border: 2px solid var(--orange-1); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
|
|
.txt { display: flex; flex-direction: column; line-height: 1; }
|
|
.name { font-size: 21px; }
|
|
.sub { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; opacity: .7; color: var(--cream); margin-top: 3px; }
|
|
@media (max-width: 420px) { .sub { display: none; } }
|
|
</style>
|