miracle/layouts/default.vue

338 lines
6.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>
2019-09-28 18:17:52 +00:00
<div class="smol-yurik hvr-float">
<img src="/yuriko-smol.png" @click="yurikosound"></img>
</div>
2019-09-27 19:49:30 +00:00
</div>
</template>
2019-09-28 18:17:52 +00:00
<script>
import {Howl, Howler} from 'howler';
export default {
methods: {
yurikosound() {
var sound = new Howl({
src: require("../static/yuriko.ogg"),
volume: 0.3
});
sound.play();
}
}
}
</script>
2019-09-27 19:49:30 +00:00
<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;
2019-09-28 16:12:03 +00:00
font-size: 2vw;
font-weight: 300;
2019-09-28 12:14:26 +00:00
}
2019-09-28 18:17:52 +00:00
.smol-yurik {
position: fixed;
right: 0;
bottom: 0;
margin-bottom: 0px;
cursor: pointer;
}
.smol-yurik > img {
height: 20vh;
}
.hvr-float {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
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;
2019-09-28 16:12:03 +00:00
font-size: 4.6vw;
font-weight: 300;
2019-09-28 12:14:26 +00:00
}
2019-09-28 18:17:52 +00:00
.smol-yurik {
display: none;
}
2019-09-28 12:14:26 +00:00
}
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 {
2019-09-28 18:17:52 +00:00
.smol-yurik {
margin-bottom: 0px;
}
2019-09-28 15:04:48 +00:00
color: #c7b83c;
font-size: 6.7vw;
font-weight: 500;
}
h2 {
color: #ffffff;
2019-09-28 16:12:03 +00:00
font-size: 3.5vw;
font-weight: 300;
2019-09-28 15:04:48 +00:00
}
}
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;
2019-09-28 18:17:52 +00:00
.smol-yurik {
margin-bottom: 0px;
}
2019-09-27 19:49:30 +00:00
}
a:hover{
text-decoration: underline;
}
.name {
margin-top: 0px;
margin-bottom: 5px;
}
.title {
margin-bottom: 10px;
}
2019-09-28 16:12:03 +00:00
ul > li {
2019-09-28 10:31:25 +00:00
font-size: 1.6vw;
2019-09-27 19:49:30 +00:00
}
2019-09-28 16:12:03 +00:00
ul > li > p {
2019-09-27 19:49:30 +00:00
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>