127 lines
1.8 KiB
Vue
127 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="main">
|
|
<Header />
|
|
<div class="content">
|
|
<main>
|
|
<nuxt />
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import FloatingYuriko from '~/components/FloatingYuriko'
|
|
import Header from '~/components/Header'
|
|
export default {
|
|
components: {
|
|
// FloatingYuriko
|
|
Header,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import 'tailwindcss/base';
|
|
|
|
@import 'tailwindcss/components';
|
|
|
|
@import 'tailwindcss/utilities';
|
|
|
|
html {
|
|
@apply font-sans;
|
|
}
|
|
.content {
|
|
@apply w-full;
|
|
padding-top: 4rem;
|
|
}
|
|
@screen md {
|
|
.main {
|
|
@apply flex flex-row;
|
|
}
|
|
.content {
|
|
padding-top: 0;
|
|
margin-left: 4rem;
|
|
}
|
|
}
|
|
main {
|
|
@apply px-4 py-4;
|
|
}
|
|
@screen md {
|
|
main {
|
|
@apply px-8;
|
|
}
|
|
}
|
|
@screen lg {
|
|
main {
|
|
@apply px-16;
|
|
}
|
|
}
|
|
@screen xl {
|
|
main {
|
|
@apply px-32;
|
|
}
|
|
}
|
|
|
|
main p {
|
|
@apply my-4;
|
|
}
|
|
main h1 {
|
|
@apply my-4 text-4xl font-light;
|
|
}
|
|
main h2 {
|
|
@apply my-4 text-3xl font-light;
|
|
}
|
|
main h3 {
|
|
@apply my-4 text-2xl font-light;
|
|
}
|
|
main h4 {
|
|
@apply my-4 text-xl font-light;
|
|
}
|
|
main h5 {
|
|
@apply my-4 text-lg font-light;
|
|
}
|
|
main h6 {
|
|
@apply my-4 text-base font-light;
|
|
}
|
|
main a {
|
|
@apply text-yuika-blue-700;
|
|
}
|
|
main a:hover {
|
|
@apply underline;
|
|
}
|
|
main ul {
|
|
@apply list-disc;
|
|
}
|
|
main ul li p {
|
|
@apply my-0;
|
|
}
|
|
main ol {
|
|
@apply list-decimal;
|
|
}
|
|
main code {
|
|
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
|
|
}
|
|
main blockquote {
|
|
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
|
|
}
|
|
main pre {
|
|
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
|
|
}
|
|
|
|
blockquote {
|
|
@apply border-l-4 border-white pl-8 text-yuika-blue-500;
|
|
}
|
|
|
|
.gallery {
|
|
@apply flex flex-row flex-wrap items-center;
|
|
}
|
|
.gallery .gallery-image {
|
|
@apply w-full px-4 py-4;
|
|
}
|
|
|
|
</style>
|
|
|