kizuren.dev/pages/maintenance.vue
2025-05-29 00:16:04 +02:00

54 lines
No EOL
997 B
Vue

<template>
<div class="flex flex-col items-center justify-center gap-30 pt-20">
<h1 class="font-bold heading-title mt-10">
This page is in maintenance!
</h1>
<div class="flex items-center gap-2 mt-16">
<UButton
label="Return Home"
variant="outline"
color="pixelgreen"
to="/"
size="xl"
class="green-button px-8 text-lg"
/>
</div>
</div>
</template>
<script setup>
useHead({
title: 'Maintenance'
})
</script>
<style scoped>
.heading-title {
font-family: 'Press Start 2P', monospace;
transition: all 0.2s steps(2);
text-align: center;
font-size: 1.2rem;
line-height: 1.5;
margin: 0 auto;
}
@media (min-width: 640px) {
.heading-title {
font-size: 1.8rem;
}
}
@media (min-width: 768px) {
.heading-title {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
.heading-title {
font-size: 3rem;
max-width: 100%;
}
}
</style>