100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<div class="index-container">
|
|
<header>
|
|
<img src="@/assets/img/snow.svg" alt="">
|
|
<h1>Paska Joululeffa 2025</h1>
|
|
</header>
|
|
<main>
|
|
<img src="@/assets/img/reindeerpoop.webp" alt="">
|
|
<div class="warning">
|
|
<div>
|
|
<Icon name="mdi:warning" size="1.5rem"/>
|
|
<h2>Varoitus!</h2>
|
|
<Icon name="mdi:warning" size="1.5rem" />
|
|
</div>
|
|
<p>Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
|
|
</div>
|
|
<NuxtLink class="btn btn-primary" to="/info">Sisään</NuxtLink>
|
|
</main>
|
|
<footer><sup>©</sup> {{ new Date().getFullYear() }} Kessinen</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
* {
|
|
font-family: DynaPuff, sans-serif;
|
|
}
|
|
|
|
.index-container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
display: grid;
|
|
grid-template-areas: "stack";
|
|
|
|
> * {
|
|
grid-area: stack;
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
h1 {
|
|
padding: 1rem;
|
|
color: hsl(0 74% 5%);
|
|
}
|
|
}
|
|
|
|
main {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
display: grid;
|
|
justify-content: center;
|
|
place-items: center;
|
|
|
|
img {
|
|
max-width: 80%;
|
|
}
|
|
|
|
.warning {
|
|
.iconify {
|
|
color: hsl(44, 100%, 65%);
|
|
}
|
|
}
|
|
|
|
> div {
|
|
font-size: 0.9rem;
|
|
line-height: 2;
|
|
padding: 1rem;
|
|
max-width: 80%;
|
|
margin: auto;
|
|
background-color: hsl(212 74% 50% / 20%);
|
|
color: hsl(212 74% 90%);
|
|
border-radius: 1rem;
|
|
> div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
|
|
font-size: 0.8rem;
|
|
}
|
|
</style>
|