miracle/layouts/default.vue

288 lines
5.6 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 12:14:26 +00:00
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat;
2019-09-27 19:49:30 +00:00
background-size: cover;
background-attachment: fixed;
scroll-behavior: smooth;
}
2019-09-28 12:14:26 +00:00
@media only screen and (max-height: 479px) {
body {
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
}
}
@media only screen and (max-height: 899px) {
body {
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-720.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
}
}
@media only screen and (min-height: 900px) {
body {
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-1080.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
}
}
2019-09-27 19:49:30 +00:00
.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 12:14:26 +00:00
.lily {
font-size: 1.6vw;
margin-top: 0px;
margin-bottom: 0px;
font-weight: 300;
}
.yuriko {
margin-top: 0px;
font-size: 5vw;
margin-bottom: 5px;
}
.yuriko-sub {
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
font-size: 2.6vw;
}
p {
color: #ffffff;
font-size: 1.3vw;
}
h1 {
color: #c7b83c;
font-size: 3.2vw;
font-weight: 500;
}
h2 {
color: #ffffff;
font-size: 3vw;
}
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 {
2019-09-28 12:14:26 +00:00
margin-left: 3%;
margin-right: 3%;
2019-09-27 19:49:30 +00:00
}
.header {
margin-left: 0px;
margin-right: 0px;
display: block;
height: 50vh;
2019-09-28 12:14:26 +00:00
background: url("/yuriko.jpg") no-repeat;
2019-09-27 19:49:30 +00:00
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
}
2019-09-28 12:14:26 +00:00
.lily {
font-size: 7.5vw;
margin-top: 0px;
margin-bottom: 0px;
font-weight: 300;
}
.yuriko {
margin-top: 0px;
font-size: 15vw;
margin-bottom: 5px;
}
2019-09-27 19:49:30 +00:00
2019-09-28 12:14:26 +00:00
.yuriko-sub {
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
font-size: 8vw;
}
p {
color: #ffffff;
font-size: 5vw;
}
h1 {
color: #c7b83c;
font-size: 10vw;
font-weight: 500;
}
h2 {
color: #ffffff;
font-size: 8vw;
}
}
2019-09-28 15:04:48 +00:00
@media only screen and (min-aspect-ratio: 5/5) and (max-aspect-ratio: 8/5) {
.lily {
font-size: 5vw;
margin-top: 0px;
margin-bottom: 0px;
font-weight: 300;
}
.yuriko {
margin-top: 0px;
font-size: 10vw;
margin-bottom: 5px;
}
.yuriko-sub {
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
font-size: 5.6vw;
}
p {
color: #ffffff;
font-size: 3.3vw;
}
h1 {
color: #c7b83c;
font-size: 6.7vw;
font-weight: 500;
}
h2 {
color: #ffffff;
font-size: 5.6vw;
}
}
2019-09-28 12:14:26 +00:00
@media only screen and (max-aspect-ratio: 8/5) and (max-width: 479px) {
.header {
margin-left: 0px;
margin-right: 0px;
display: block;
height: 50vh;
background: url("/yuriko-360.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: right 20% top;
}
}
@media only screen and (max-aspect-ratio: 8/5) and (max-width: 899px) {
.header {
margin-left: 0px;
margin-right: 0px;
display: block;
height: 50vh;
background: url("/yuriko-720.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: right 20% top;
}
}
@media only screen and (max-aspect-ratio: 8/5) and (min-width: 899px) {
.header {
margin-left: 0px;
margin-right: 0px;
display: block;
height: 50vh;
background: url("/yuriko-720.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: right 20% top;
}
}
2019-09-27 19:49:30 +00:00
.primary {
color: #c7b83c;
}
.japanese{
font-family: 'M PLUS 1p', sans-serif;
}
a {
text-decoration: none;
color: #c7b83c;
}
a:hover{
text-decoration: underline;
}
.yuriko-smol {
display: block;
margin-bottom: 0px;
}
.name {
margin-top: 0px;
margin-bottom: 5px;
}
.sub {
margin-top: 0px;
font-weight: 300;
margin-bottom: 0px;
}
.title {
margin-bottom: 10px;
}
.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>