96 lines
1.5 KiB
Vue
96 lines
1.5 KiB
Vue
<template>
|
|
<div class="page">
|
|
|
|
<header>
|
|
<h1>
|
|
<NuxtLink to="/">Bibliothecary</NuxtLink>
|
|
</h1>
|
|
|
|
<nav>
|
|
<NuxtLink to="/patrons">Patrons</NuxtLink>
|
|
<NuxtLink to="/medias">Catalog</NuxtLink>
|
|
<NuxtLink to="/account">Account</NuxtLink>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<NuxtPage />
|
|
</main>
|
|
|
|
<footer>© 2023</footer>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<!------------------------------------------------------------------ STYLE ---->
|
|
|
|
<style lang="postcss">
|
|
:root {
|
|
--gradient: linear-gradient(to bottom right, #f472b6, #f0abfc, #22d3ee);
|
|
}
|
|
|
|
.page {
|
|
@apply min-h-screen w-screen p-5 flex flex-col gap-y-5;
|
|
@apply bg-gradient-to-br from-pink-400 via-fuchsia-300 to-cyan-400;
|
|
}
|
|
|
|
header,
|
|
section {
|
|
@apply bg-white bg-opacity-30;
|
|
@apply rounded-lg;
|
|
}
|
|
|
|
header {
|
|
@apply h-12 flex justify-between items-center px-3;
|
|
}
|
|
|
|
main {
|
|
@apply grow flex justify-center gap-x-5;
|
|
}
|
|
|
|
section {
|
|
@apply py-4 px-5;
|
|
}
|
|
|
|
footer {
|
|
@apply h-6;
|
|
@apply text-center italic opacity-50;
|
|
}
|
|
|
|
header h1,
|
|
nav a {
|
|
@apply opacity-70;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-2xl uppercase italic font-bold;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-xl font-bold;
|
|
}
|
|
|
|
header h1 {
|
|
@apply tracking-wide;
|
|
@apply transition-[letter-spacing] hover:tracking-widest;
|
|
}
|
|
|
|
nav a {
|
|
@apply mx-2;
|
|
@apply transition-all hover:opacity-100 hover:border-b-pink-400 hover:border-b-2;
|
|
}
|
|
|
|
main a {
|
|
@apply transition-all border-b border-b-pink-400;
|
|
@apply hover:border-b-cyan-400;
|
|
}
|
|
|
|
p {
|
|
@apply mb-2 last:mb-0;
|
|
}
|
|
|
|
hr {
|
|
@apply border-pink-400/40;
|
|
@apply mt-2 mb-3;
|
|
}
|
|
</style>
|