100 lines
No EOL
2.6 KiB
Vue
100 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<UPage>
|
|
<!-- TODO: Nuxt image module maybe? Some form of lazyloading / smooth loading -->
|
|
<UPageHero class="bg-[url('/images/bg.jpg')] bg-cover bg-center min-h-screen -mt-16 flex items-center">
|
|
<template #title>
|
|
<p class="u-page-hero-title text-white glowy">
|
|
Hello World.
|
|
</p>
|
|
</template>
|
|
<template #description>
|
|
<p class="u-page-hero-description text-white/95 text-shadow-md text-shadow-black/50">
|
|
Welcome to my corner of the internet!<br/>
|
|
Have a look around ;)
|
|
</p>
|
|
</template>
|
|
<template #links>
|
|
<div class="u-page-hero-links">
|
|
<UButton
|
|
size="xl"
|
|
trailing-icon="i-line-md-arrow-right"
|
|
color="primary"
|
|
class="actionbtn text-white/80 bg-gray-900/20 hover:bg-gray-900/15 active:bg-gray-900/30"
|
|
style="font-family: monospace;"
|
|
variant="soft"
|
|
>
|
|
Let's Go!
|
|
</UButton>
|
|
</div>
|
|
</template>
|
|
</UPageHero>
|
|
</UPage>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
@keyframes glowyanim {
|
|
0% {
|
|
text-shadow:
|
|
0 0 1em hsla(320, 100%, 50%, 0.2),
|
|
0 0 0.125em hsla(320, 100%, 60%, 0.3),
|
|
-1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
|
|
1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
|
|
}
|
|
|
|
30% {
|
|
text-shadow:
|
|
0 0 1em hsla(320, 100%, 50%, 0.5),
|
|
0 0 0.125em hsla(320, 100%, 60%, 0.5),
|
|
-0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
|
|
0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
|
|
}
|
|
|
|
40% {
|
|
text-shadow:
|
|
0 0 1em hsla(320, 100%, 50%, 0.5),
|
|
0 0 0.125em hsla(320, 100%, 90%, 0.5),
|
|
-0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
|
|
0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
|
|
}
|
|
|
|
70% {
|
|
text-shadow:
|
|
0 0 1em hsla(320, 100%, 50%, 0.5),
|
|
0 0 0.125em hsla(320, 100%, 60%, 0.5),
|
|
0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
|
|
-0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
|
|
}
|
|
|
|
100% {
|
|
text-shadow:
|
|
0 0 1em hsla(320, 100%, 50%, 0.2),
|
|
0 0 0.125em hsla(320, 100%, 60%, 0.3),
|
|
1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
|
|
-1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: monospace;
|
|
}
|
|
|
|
p.glowy {
|
|
margin: auto;
|
|
font-size: 3.5rem;
|
|
font-weight: 500;
|
|
animation: glowyanim 5s 750ms linear infinite;
|
|
text-align: center;
|
|
hanging-punctuation: first;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.actionbtn {
|
|
box-shadow: 3px 3px 3px rgba(0,0,0,0.5) !important;
|
|
}
|
|
.actionbtn:default {
|
|
box-shadow: 3px 3px 3px rgba(0,0,0,0.5) !important;
|
|
}
|
|
.actionbtn:active {
|
|
box-shadow: 2px 2px 2px rgba(0,0,0,0.5) !important;
|
|
}
|
|
</style> |