70 lines
1.1 KiB
Vue
70 lines
1.1 KiB
Vue
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import { useBurgerStore } from '@/stores/burger'
|
|
const burger = useBurgerStore();
|
|
onMounted(() => {
|
|
burger.check()
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content">
|
|
<p class="p-404">
|
|
404...
|
|
</p>
|
|
<p class="emoji">🤔<span class="small">(Hmmm...)</span></p>
|
|
<p>The page you are looking for does not seem to exist!</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../style/colors.scss';
|
|
|
|
|
|
.content{
|
|
|
|
& > p{
|
|
text-indent:0;
|
|
color : $main-normal;
|
|
opacity: 1;
|
|
font-size : 2em;
|
|
padding:1rem 1.25rem;
|
|
text-align: center;
|
|
animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
&.p-404{
|
|
padding:1rem 1.25rem;
|
|
font-size : 7rem;
|
|
|
|
}
|
|
&.emoji{
|
|
margin-top : 5rem;
|
|
padding:1rem 1.25rem;
|
|
font-size : 15rem;
|
|
line-height: 5rem;
|
|
}
|
|
}
|
|
}
|
|
.small{
|
|
font-size : 3rem;
|
|
|
|
}
|
|
|
|
@keyframes text{
|
|
0%{
|
|
opacity : 0;
|
|
}
|
|
33%{
|
|
opacity : 0;
|
|
}
|
|
100%{
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
@media (width < 600px){
|
|
.content{
|
|
width: 95%;
|
|
}
|
|
}
|
|
</style> |