Update to layouts
This commit is contained in:
parent
e3477124cf
commit
50e66ba905
@ -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';
|
||||
|
||||
@ -1,26 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<footer>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<a href="//blog.nanao.moe"><p class="header-link">blog</p></a>
|
||||
</div>
|
||||
|
||||
<FooterNav
|
||||
link="/about"
|
||||
icon="person"
|
||||
text="about"
|
||||
/>
|
||||
<FooterNav
|
||||
link="/games"
|
||||
icon="videogame_asset"
|
||||
text="game profile"
|
||||
/>
|
||||
<FooterNav
|
||||
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 {
|
||||
@apply w-1/4 flex flex-row justify-center items-end;
|
||||
@screen md {
|
||||
.footer-nav p {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
39
components/FooterNav.vue
Normal file
39
components/FooterNav.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
-->
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user