047ca43c4a
Added Main Menu with different design. Added buttons for create game, join game, settings
51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<q-layout view="hHh lpR fFf" class="font-roboto">
|
|
<q-page-container>
|
|
<q-page class="flex justify-start items-center column">
|
|
|
|
<header class="text-center q-mb-xl">
|
|
<h1 class="game-title text-white q-my-none">
|
|
KnockOutWhist
|
|
</h1>
|
|
<p
|
|
class="text-h5 text-grey-4 q-mt-md"
|
|
style="max-width: 900px; margin-left: auto; margin-right: auto;"
|
|
>
|
|
Welcome to KnockOutWhist! In this game you have to "knock-out" your opponents until you are the last player standing.
|
|
Do you have what it takes to be crowned the champion?
|
|
</p>
|
|
</header>
|
|
|
|
<MainMenuBoxes />
|
|
|
|
</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>
|