69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div class="subsonics-logo">
|
|
<LogoDark class="img" v-if="globalStore.theme == 'light'" aria-hidden="true" focusable="false"/>
|
|
<LogoLight class="img" v-else aria-hidden="true" focusable="false"/>
|
|
<div v-if="dev" class="text-p">
|
|
<h1>Subsonics</h1>
|
|
<p>Développement</p>
|
|
</div>
|
|
<h1 v-if="!dev">Subsonics</h1>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
/**
|
|
* Logo + nom « Subsonics » (mention « Développement » en mode dev). Décoratif : le titre est le texte.
|
|
*/
|
|
import LogoDark from '@/assets/LogoDark.vue';
|
|
import LogoLight from '@/assets/LogoLight.vue';
|
|
import { useGlobalStore } from '@/stores/globalStore';
|
|
|
|
const dev = import.meta.env.DEV;
|
|
|
|
const globalStore = useGlobalStore();
|
|
</script>
|
|
<style scoped>
|
|
.img {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.subsonics-logo {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text-p {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.text-p h1 {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.text-p p {
|
|
margin: 0 !important;
|
|
font-family: 'Gunship', sans-serif;
|
|
position: absolute;
|
|
bottom: -10px;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
@media screen and (max-width: 768px),
|
|
screen and (max-height: 607px) {
|
|
.img {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
h1 {
|
|
font-size: 6vw;
|
|
}
|
|
}
|
|
|
|
</style> |