lq64
d73b4f396b
Added animations for mainmenu Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #22 Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import UserStatusArea from '../components/User.vue'
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="hHh lpR fFf" class="font-roboto">
|
|
<q-header elevated class="bg-dark text-white">
|
|
<q-toolbar>
|
|
<q-toolbar-title class="q-ml-md">
|
|
</q-toolbar-title>
|
|
|
|
<UserStatusArea />
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-page-container>
|
|
<q-page class="flex justify-start items-center column q-pa-md">
|
|
|
|
|
|
<header class="text-center q-mb-xl q-mt-md">
|
|
<transition
|
|
appear
|
|
enter-active-class="animate__fadeInDown"
|
|
leave-active-class="animate__fadeOutUp"
|
|
>
|
|
<div
|
|
class="animate__animated"
|
|
:style="{ animationDuration: '1.6s' }"
|
|
>
|
|
<h1 class="game-title text-white q-my-none">
|
|
KnockOutWhist
|
|
</h1>
|
|
</div>
|
|
</transition>
|
|
</header>
|
|
|
|
<router-view></router-view>
|
|
</q-page>
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.game-title {
|
|
font-family: serif;
|
|
|
|
|
|
font-size: 5rem;
|
|
font-weight: 900;
|
|
letter-spacing: 3px;
|
|
color: #FFD700;
|
|
|
|
text-shadow:
|
|
2px 2px 0px #000000,
|
|
4px 4px 0px #8B4513,
|
|
6px 6px 12px rgba(0, 0, 0, 0.9);
|
|
}
|
|
@media (max-width: 600px) {
|
|
.game-title {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
</style>
|