Update to layouts

assets/css/tailwind.css

@@ -1,5 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
 
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
 @import 'tailwindcss/base';
 
 @import 'tailwindcss/components';

components/Footer.vue

@@ -1,26 +1,38 @@
 <template>
 <div>
   <footer>
-      <div class="footer-nav">
+      <FooterNav
-          <nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
+        link="/about"
-      </div>
+        icon="person"
-      <div class="footer-nav">
+        text="about"
-          <nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
+         />
-      </div>
+      <FooterNav
-      <div class="footer-nav">
+        link="/games"
-          <nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
+        icon="videogame_asset"
-      </div>
+        text="game profile"
-      <div class="footer-nav">
+         />
-          <a href="//blog.nanao.moe"><p class="header-link">blog</p></a>
+      <FooterNav
-      </div>
+        link="/sns"
-
+        icon="contacts"
+        text="social media"
+         />
+      <FooterNav
+        link="//blog.nanao.moe"
+        icon="rss_feed"
+        text="blog"
+        external="true"
+         />
   </footer>
 </div>
 </template>
 
 <script>
-export default {
+import FooterNav from "./FooterNav";
 
+export default {
+  components: {
+    FooterNav
+  },
 }
 </script>
 
@@ -28,7 +40,9 @@ export default {
 footer {
     @apply h-16 w-full flex flex-row justify-start items-center;
 }
-.footer-nav {
+@screen md {
-    @apply w-1/4 flex flex-row justify-center items-end;
+  .footer-nav p {
+      @apply text-base;
+  }
 }
 </style>

components/FooterNav.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="getCurrentClasses()">
+    <a :href="link" v-if="external">
+      <i class="material-icons md-24">{{ icon }}</i>
+      <p class="header-link">{{ text }}</p>
+    </a>
+    <nuxt-link :to="link" v-else>
+      <i class="material-icons md-24">{{ icon }}</i>
+      <p class="header-link">{{ text }}</p>
+    </nuxt-link>
+  </div>
+</template>
+<script>
+export default {
+  props: [ 'link', 'text','external', 'icon' ],
+  methods: {
+    getCurrentClasses() {
+      if(this.link == this.$nuxt.$route.path) {
+        return ['footer-nav','selected'];     
+      }
+      return ['footer-nav'];
+    }
+  },
+}
+</script>
+<style>
+.footer-nav {
+    @apply w-1/4 transition-bg;
+}
+.footer-nav a {
+    @apply w-full h-full flex flex-col justify-end items-center py-2;
+}
+.footer-nav p {
+    @apply text-xs;
+}
+.footer-nav.selected {
+    background-color: rgba(0,0,0,0.5);
+}
+</style>

pages/games.vue

@@ -8,59 +8,78 @@
                 <ul>
                     <li>
                         <p><a href="https://p.eagate.573.jp/game/sdvx/v/">SOUND VOLTEX VIVID WAVE</a></p>
+                        <p>Player Name: YUIKA283</p>
                         <p>ID: SV-6457-6694</p>
                     </li>
+                    <li>
+                        <p><a href="https://maimai.sega.com">maimai DX</a></p>
+                        <p>Player Name: YUIKA283</p>
+                        <p>ID: 6027059823123</p>
+                    </li>
                     <li>
                         <p><a href="https://millionlive.idolmaster.jp/theaterdays/">THE IDOLM@STER Million Live: Theater Days</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: CGTEDUQ4</p>
                     </li>
                     <li>
                         <p><a href="https://arcaea.lowiro.com">Arcaea</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 264202217</p>
                     </li>
                     <li>
                         <p><a href="http://t7s.jp">Tokyo 7th Sisters</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: M2mXkWk</p>
                     </li>
                     <li>
                         <p><a href="https://bang-dream.bushimo.jp/">BanG Dream! Girls Band Party (JP)</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 106205253</p>
                     </li>
                     <li>
                         <p><a href="https://lovelive-sif.bushimo.jp/">Love Live! School Idol Festival (JP)</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 755897396</p>
                     </li>
                     <li>
                         <p><a href="https://www.en.revuestarlight-relive.com/">Revue Starlight Re LIVE (EN)</a></p>
+                        <p>Player Name: [RS]Damillora</p>
                         <p>ID: 2490812618</p>
                     </li>
                     <li>
                         <p><a href="https://shadowverse.com/">Shadowverse</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 778908673</p>
                     </li>
                     <li>
                         <p><a href="https://nogikoi.jp/">Nogikoi</a></p>
+                        <p>Player Name: -</p>
                         <p>ID: 1673068678</p>
                     </li>
                     <li>
                         <p><a href="https://shinycolors.idolmaster.jp">THE IDOLM@STER: Shiny Colors</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: ePmtJyTwzn</p>
                     </li>
                     <li>
                         <p><a href="https://keyahina-unisonair.com/">UNI'S ON AIR</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: y2medy4d</p>
                     </li>
                     <li>
                         <p><a href="https://www.cue-liber.jp/">CUE!</a></p>
+                        <p>Player Name: Damillora</p>
                         <p>ID: 37132287893</p>
                     </li>
                     <li>
                         <p><a href="https://lovelive-as.bushimo.jp/">Love Live ! School idol festival ALL STARS</a></p>
+                        <p>Player Name: -</p>
                         <p>ID: (soon)</p>
                     </li>
                     <!--
                     <li>
                         <p><a href=""></a></p>
+                        <p>Player Name: </p>
                         <p>ID: </p>
                     </li>
                     -->

pages/sns.vue

@@ -7,12 +7,10 @@
                 <li>
                   <p>YouTube:</p>
                   <p><a href="/channel">Damillora</a></p>
-                  <p><a href="/ArchivesOfAYurikoP">Archives of a YurikoP</a></p>
                 </li>
                 <li>
                   <p>Twitter:</p>
                   <p><a href="/twitter">Damillora</a></p>
-                  <p><a href="/twittermitsumine">mitsumine_dmi</a></p>
                 </li>
               </ul>
             </p>