sound gimmick

This commit is contained in:
Damillora 2019-09-29 01:17:52 +07:00
parent e04be7874a
commit 3b86d8afe4
6 changed files with 71 additions and 6 deletions

View File

@ -8,9 +8,28 @@
<div class="content-container"> <div class="content-container">
<nuxt /> <nuxt />
</div> </div>
<div class="smol-yurik hvr-float">
<img src="/yuriko-smol.png" @click="yurikosound"></img>
</div>
</div> </div>
</template> </template>
<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>
<style> <style>
body { body {
background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat; background: linear-gradient(to right, #060600 45% ,transparent 65%), url("/yuriko-360.jpg") no-repeat;
@ -84,6 +103,34 @@ h2 {
font-size: 2vw; font-size: 2vw;
font-weight: 300; font-weight: 300;
} }
.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);
}
@media only screen and (max-aspect-ratio: 8/5) { @media only screen and (max-aspect-ratio: 8/5) {
body { body {
margin-left: 0px; margin-left: 0px;
@ -146,6 +193,9 @@ h2 {
font-size: 4.6vw; font-size: 4.6vw;
font-weight: 300; font-weight: 300;
} }
.smol-yurik {
display: none;
}
} }
@media only screen and (min-aspect-ratio: 5/5) and (max-aspect-ratio: 8/5) { @media only screen and (min-aspect-ratio: 5/5) and (max-aspect-ratio: 8/5) {
.lily { .lily {
@ -171,6 +221,10 @@ h2 {
font-size: 3.3vw; font-size: 3.3vw;
} }
h1 { h1 {
.smol-yurik {
margin-bottom: 0px;
}
color: #c7b83c; color: #c7b83c;
font-size: 6.7vw; font-size: 6.7vw;
font-weight: 500; font-weight: 500;
@ -232,15 +286,14 @@ h2 {
a { a {
text-decoration: none; text-decoration: none;
color: #c7b83c; color: #c7b83c;
.smol-yurik {
margin-bottom: 0px;
}
} }
a:hover{ a:hover{
text-decoration: underline; text-decoration: underline;
} }
.yuriko-smol {
display: block;
margin-bottom: 0px;
}
.name { .name {
margin-top: 0px; margin-top: 0px;
margin-bottom: 5px; margin-bottom: 5px;

View File

@ -53,6 +53,13 @@ module.exports = {
** You can extend webpack config here ** You can extend webpack config here
*/ */
extend (config, ctx) { extend (config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
})
} }
}, },
serverMiddleware: [ serverMiddleware: [

View File

@ -14,6 +14,7 @@
"@nuxtjs/dotenv": "^1.4.1", "@nuxtjs/dotenv": "^1.4.1",
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"express": "^4.16.4", "express": "^4.16.4",
"howler": "^2.1.2",
"nuxt": "^2.0.0", "nuxt": "^2.0.0",
"tall": "^2.2.0" "tall": "^2.2.0"
}, },

View File

@ -10,7 +10,6 @@
</div> </div>
<div class="row"> <div class="row">
<img class="yuriko-smol" src="/yuriko-smol.png"></img>
<h1 class="primary name">Damillora</h1> <h1 class="primary name">Damillora</h1>
<h2 class="sub">an idol fan with a strange music to it</h2> <h2 class="sub">an idol fan with a strange music to it</h2>
<p> <p>

BIN
static/yuriko.ogg Normal file

Binary file not shown.

View File

@ -3484,6 +3484,11 @@ hoopy@^0.1.4:
resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ== integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
howler@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/howler/-/howler-2.1.2.tgz#8433a09d8fe84132a3e726e05cb2bd352ef8bd49"
integrity sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg==
hsl-regex@^1.0.0: hsl-regex@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e" resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"