sound gimmick

layouts/default.vue

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

nuxt.config.js

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

package.json

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

pages/index.vue

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

yarn.lock

@@ -3484,6 +3484,11 @@ hoopy@^0.1.4:
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
   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:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"