miracle/layouts/default.vue

165 lines
2.7 KiB
Vue
Raw Normal View History

2019-09-27 19:49:30 +00:00
<template>
<div>
<div class="header">
<div class="gradient">
</div>
</div>
<div class="content-container">
<nuxt />
</div>
</div>
</template>
<style>
body {
2019-09-28 10:31:25 +00:00
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("./yuriko.jpg") no-repeat;
2019-09-27 19:49:30 +00:00
background-size: cover;
background-attachment: fixed;
scroll-behavior: smooth;
}
.content-container {
margin-top: 5vh;
2019-09-28 10:31:25 +00:00
margin-left: 2.5%;
2019-09-27 19:49:30 +00:00
margin-right: 60%;
word-wrap: break-word;
font-family: 'Exo 2', sans-serif;
}
.header {
display: none;
}
.gradient {
display: none;
}
2019-09-28 11:08:15 +00:00
@media only screen and (max-aspect-ratio: 8/5) {
2019-09-27 19:49:30 +00:00
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
2019-09-28 10:31:25 +00:00
background: #060600;
2019-09-27 19:49:30 +00:00
}
.content-container {
margin-right: 0%;
}
.header {
margin-left: 0px;
margin-right: 0px;
display: block;
height: 50vh;
background: url("./yuriko.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: right 20% top;
}
.gradient {
display: block;
position: absolute;
top: 25vh;
left: 0%;
width: 100%;
height: 25vh;
2019-09-28 10:31:25 +00:00
background: linear-gradient(to top,#060600 25%,transparent 100%);
2019-09-27 19:49:30 +00:00
}
}
.primary {
color: #c7b83c;
}
.japanese{
font-family: 'M PLUS 1p', sans-serif;
}
h1 {
2019-09-28 10:31:25 +00:00
color: #c7b83c;
font-size: 3.2vw;
2019-09-27 19:49:30 +00:00
font-weight: 500;
}
h2 {
2019-09-28 10:31:25 +00:00
color: #ffffff;
font-size: 3vw;
2019-09-27 19:49:30 +00:00
}
a {
text-decoration: none;
color: #c7b83c;
}
a:hover{
text-decoration: underline;
}
.lily {
2019-09-28 10:31:25 +00:00
font-size: 1.6vw;
2019-09-27 19:49:30 +00:00
margin-top: 0px;
margin-bottom: 0px;
font-weight: 300;
}
.yuriko {
margin-top: 0px;
2019-09-28 10:31:25 +00:00
font-size: 5vw;
2019-09-27 19:49:30 +00:00
margin-bottom: 5px;
}
.yuriko-sub {
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
2019-09-28 10:31:25 +00:00
font-size: 2.6vw;
2019-09-27 19:49:30 +00:00
}
.yuriko-smol {
display: block;
margin-bottom: 0px;
}
.name {
margin-top: 0px;
margin-bottom: 5px;
}
.sub {
2019-09-28 10:31:25 +00:00
font-size: 1.6vw;
2019-09-27 19:49:30 +00:00
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
}
.title {
margin-bottom: 10px;
}
p {
2019-09-28 10:31:25 +00:00
color: #ffffff;
font-size: 1.3vw;
2019-09-27 19:49:30 +00:00
}
.games-list > li {
2019-09-28 10:31:25 +00:00
font-size: 1.6vw;
2019-09-27 19:49:30 +00:00
}
.games-list > li > p {
margin-top: 0px;
margin-bottom: 5px;
}
.col {
display: flex;
flex-flow: column;
}
.row {
flex: 0 1 auto;
}
.expand {
flex: 1 1 auto;
}
.fill {
height: 87vh;
}
.nanao-enter-active,
.nanao-leave-active {
transition-property: opacity;
transition-timing-function: ease-in-out;
transition-duration: 100ms;
}
.nanao-enter,
.nanao-leave-to {
opacity: 0;
}
</style>