miracle/layouts/default.vue

119 lines
1.7 KiB
Vue
Raw Normal View History

2019-09-27 19:49:30 +00:00
<template>
<div>
<div class="main">
2020-06-23 21:37:09 +00:00
<Header />
<div class="content">
<main>
<nuxt />
2020-06-23 21:37:09 +00:00
</main>
<Footer />
</div>
2019-09-27 19:49:30 +00:00
</div>
</div>
</template>
2019-09-28 18:17:52 +00:00
<script>
2019-10-04 19:48:41 +00:00
// import FloatingYuriko from '~/components/FloatingYuriko'
import Header from '~/components/Header'
2019-09-28 18:17:52 +00:00
export default {
2019-10-04 19:48:41 +00:00
components: {
// FloatingYuriko
Header,
2019-09-28 18:17:52 +00:00
}
}
</script>
<style>
2020-06-23 21:37:09 +00:00
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
html {
@apply font-sans;
}
@screen md {
.main {
@apply flex flex-row;
}
.content {
margin-left: 25vw;
}
}
2020-06-23 21:37:09 +00:00
main {
@apply px-4 py-4;
}
@screen md {
2020-06-23 21:37:09 +00:00
main {
@apply px-8;
}
}
@screen lg {
main {
@apply px-16;
}
}
@screen xl {
main {
@apply px-32;
}
}
2020-06-23 21:37:09 +00:00
main p {
@apply my-4;
}
main h1 {
@apply my-4 text-4xl font-light;
}
main h2 {
@apply my-4 text-3xl font-light;
}
2020-06-23 21:37:09 +00:00
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;
}
</style>