Damillora/miracle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Match layout to Yuika 2.6

Browse Source
This commit is contained in:
Damillora 2020-12-26 16:50:33 +07:00
parent be1319374f
commit 51f2277fd4
31 changed files with 572 additions and 405 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/Header.vue
View File

@ -1,19 +1,19 @@
<template>
<div v-click-outside="menuHide">
<div :class="menu_shown ? ['site-header','enabled'] : ['site-header']">
<div :class="menu_shown ? ['site-background','enabled'] : ['site-background']"></div>
<div>
<div :class="{ 'site-header': true, 'enabled': menu_shown }">
<div :class="{ 'site-background': true, 'enabled': menu_shown }"></div>
<div class="site-header-inner">
<header>
<div class="header-top">
<a @click="menu_shown = !menu_shown" id="menushow">
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
</a>
<div class="header-title" @click="menu_shown = !menu_shown" >
<div class="header-title" @click="menu_shown = menu_shown ? !menu_shown : menu_shown" >
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
</div>
</div>
<div class="header-menu">
<div :class="menu_shown ? ['nav-menu','enabled'] : ['nav-menu']">
<div :class="{ 'nav-menu': true, 'enabled': menu_shown }">
<NavItem
link="/about"
icon="person"
@ -69,6 +69,7 @@ export default {
<style>
.site-header {
z-index: 100;
height: 4rem;
width: 100vw;
overflow: hidden;
@ -85,35 +86,17 @@ export default {
@apply transition-all duration-300 ease-in-out;
}
.site-background {
opacity: 0%;
top: -23vh;
}
.site-background.enabled {
opacity: 100%;
top: 0;
}
@screen md {
.site-background {
top: 0;
right: -25vw;
}
.site-background.enabled {
top: 0;
right: 0;
}
}
.site-header.enabled {
height: 100vh;
width: 100vw;
}
@screen md {
.site-header {
@apply fixed;
height: 100vh;
width: 4rem;
}
.site-header.enabled {
width: 100vw;
}
}
@screen sm {
.site-background {
background-image: url('~assets/images/bg-md.jpg');
@ -136,8 +119,10 @@ export default {
}
.site-header-inner {
z-index: 1;
@apply w-full h-full transition duration-300 ease-in-out;
}
.site-header.enabled .site-header-inner {
background: rgba(0,0,0,0.5);
@apply w-full h-full;
}
header {
@apply flex flex-col transition duration-300 ease-in-out;

65
components/PageHeader.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div class="relative group page-header">
<div class="h-full w-full page-header-background">
<div class="w-full h-full opacity-50 bg-black">
</div>
</div>
<div class="absolute bottom-0 py-2 left-0 right-0">
<div class="container mx-auto main">
<div>
<slot></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.page-header {
width: 100%;
min-height: 200px;
height: 70vh;
@apply text-white font-light;
}
.page-header a {
@apply text-white;
}
@screen md {
.page-header {
min-height: 300px;
height: 70vh;
}
}
.page-header-background {
background-image: url('~assets/images/bg-sm.jpg');
background-size: cover;
background-position: right 25% top 20%;
}
@screen sm {
.page-header-background {
background-image: url('~assets/images/bg-md.jpg');
}
}
@screen md {
.page-header-background {
background-image: url('~assets/images/bg-lg.jpg');
}
}
@screen lg {
.page-header-background {
background-image: url('~assets/images/bg-xl.jpg');
}
}
@screen xl {
.page-header-background {
background-image: url('~assets/images/bg-xxl.jpg');
}
}
</style>

61
layouts/default.vue
View File

@ -1,15 +1,11 @@
<template>
<div>
<div class="main">
<div>
<Header />
<div class="content">
<main>
<nuxt />
</main>
<Footer />
</div>
</div>
</div>
</template>
<script>
@ -33,81 +29,70 @@ export default {
html {
@apply font-sans;
}
.content {
@apply w-full;
padding-top: 4rem;
}
@screen md {
.main {
@apply flex flex-row;
}
.content {
padding-top: 0;
margin-left: 4rem;
}
}
main {
.main {
@apply px-4 py-4;
}
@screen md {
main {
.main {
@apply px-8;
}
}
@screen lg {
main {
.main {
@apply px-16;
}
}
@screen xl {
main {
.main {
@apply px-32;
}
}
main p {
.page {
@apply w-full;
}
.main p {
@apply my-4;
}
main h1 {
.main h1 {
@apply my-4 text-4xl font-light;
}
main h2 {
.main h2 {
@apply my-4 text-3xl font-light;
}
main h3 {
.main h3 {
@apply my-4 text-2xl font-light;
}
main h4 {
.main h4 {
@apply my-4 text-xl font-light;
}
main h5 {
.main h5 {
@apply my-4 text-lg font-light;
}
main h6 {
.main h6 {
@apply my-4 text-base font-light;
}
main a {
.main a {
@apply text-yuika-blue-700;
}
main a:hover {
.main a:hover {
@apply underline;
}
main ul {
.main ul {
@apply list-disc;
}
main ul li p {
.main ul li p {
@apply my-0;
}
main ol {
.main ol {
@apply list-decimal;
}
main code {
.main code {
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
main blockquote {
.main blockquote {
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
main pre {
.main pre {
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
}

9
pages/about.vue
View File

@ -1,16 +1,21 @@
<template>
<div class="page">
<h1 class="title">About Damillora</h1>
<PageHeader>
<h1>About Damillora</h1>
</PageHeader>
<main class="container mx-auto main">
<p>Hello! My name is Damillora.</p>
<p>I enjoy playing rhythm games, and talking about idol and rhythm games in general!</p>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'About Damillora',

7
pages/games/arcaea.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Arcaea</h1>
<p><a href="https://arcaea.lowiro.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Arcaea",

7
pages/games/arknights.vue
View File

@ -1,21 +1,26 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Arknights</h1>
<p><a href="https://www.arknights.global">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
The strength of this game is in its complexities, getting you invested into the game.
If you like tower defenses and also like to think about tactics and strategies, this game is for you.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/arknights/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Arknights",

7
pages/games/azurlane.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Azur Lane (EN)</h1>
<p><a href="">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Azur Lane",

7
pages/games/bandori.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: BanG Dream! Girls Band Party (JP)",

7
pages/games/cue.vue
View File

@ -1,7 +1,10 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: CUE!</h1>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<h3>One Year of CUE!</h3>
<blockquote>
@ -16,14 +19,16 @@
I recommend to try it sometimes, and get to the point where you can change casts in the anime. You will appreciate it.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: CUE!",

7
pages/games/fgo.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
<p><a href="https://www.fate-go.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Fate/Grand Order (JP)",

7
pages/games/genshin.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Genshin Impact</h1>
<p><a href="https://genshin.mihoyo.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Genshin Impact",

7
pages/games/honkai.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Honkai Impact 3rd</h1>
<p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Honkai Impact 3rd",

6
pages/games/index.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I play arcade and mobile games mostly, not all are recorded / streamed.</p>
<p>My most frequently played genre is rhythm games, but sometimes I try other genres too</p>
<h2>Game IDs</h2>
@ -133,15 +136,18 @@
/>
-->
</div>
</main>
</div>
</template>
<script>
import GameListItem from "@/components/GameListItem";
import PageHeader from "@/components/PageHeader";
export default {
components: {
GameListItem,
PageHeader,
},
head: {
title: "Game Profile",

7
pages/games/llsif.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Love Live! School Idol Festival (JP)",

13
pages/games/llsifas.vue
View File

@ -1,21 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1>
<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
<!--
<h2>My Review</h2>
<blockquote>
</blockquote>
<p><a href="">Read more</a></p>
-->
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Love Live! School idol festival ALL STARS",

7
pages/games/maimai.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: maimai DX</h1>
<p><a href="https://maimai.sega.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: maimai DX",

7
pages/games/mirishita.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1>
<p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: The IDOLM@STER Million Live: Theater Days",

7
pages/games/nogikoi.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Nogikoi</h1>
<p><a href="https://nogikoi.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Nogikoi",

7
pages/games/puroseka.vue
View File

@ -1,20 +1,25 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
Overall, I've gotten what I wanted to see in a mobile rhythm game. Virtual Lives are also very interesting with many possibilities that can happen. The other aspects are cherry on top, and they're also not bad too. Project SEKAI is great.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Project SEKAI COLORFUL STAGE!",

7
pages/games/sdvx.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
<p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: SOUND VOLTEX VIVID WAVE",

5
pages/games/shadowverse.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Shadowverse</h1>
<p><a href="https://shadowverse.com/">Game Website</a></p>
</PageHeader>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Shadowverse",

7
pages/games/shinymas.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: THE IDOLM@STER: Shiny Colors",

7
pages/games/starira.vue
View File

@ -1,15 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1>
<p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Revue Starlight Re LIVE (EN)",

8
pages/games/t7s.vue
View File

@ -1,14 +1,20 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
<p><a href="https://t7s.jp">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: Tokyo 7th Sisters",

7
pages/games/template.vue
View File

@ -1,19 +1,24 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: </h1>
<p><a href="">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
</blockquote>
<p><a href="">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: ",

7
pages/games/unison.vue
View File

@ -1,20 +1,25 @@
<template>
<div class="page">
<PageHeader>
<h1 class="title">Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
<p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
</PageHeader>
<main class="container mx-auto main">
<h2>My Review</h2>
<blockquote>
Suffice to say, I enjoy this game more than Nogizaka46's rhythm game, which requires memorization of songs a bit too much.
</blockquote>
<p><a href="https://blog.nanao.moe/game-reviews/keyakizaka46-hinatazaka46-unis-on-air/">Read more</a></p>
</main>
</div>
</template>
<script>
import PageHeader from "@/components/PageHeader";
export default {
components: {
PageHeader,
},
head: {
title: "Game Profile: 欅坂46・日向坂46 UNI'S ON AIR",

9
pages/index.vue
View File

@ -1,17 +1,22 @@
<template>
<div>
<div class="page">
<PageHeader>
<h1>Damillora</h1>
<p>A curious technologist, a web programmer, and a future EN Vtuber</p>
<p>EN/ID OK, JP read only</p>
</PageHeader>
<main class="container mx-auto main">
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'Damillora',

14
pages/links.vue
View File

@ -1,6 +1,9 @@
<template>
<div class="page">
<h1 class="title">Links</h1>
<PageHeader>
<h1>Links</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I maintain a number of profiles on various sites, be sure to follow me there!</p>
<p>
<ul>
@ -24,21 +27,18 @@
<p>GitHub:</p>
<p><a href="/github">Damillora</a></p>
</li>
<li>
<p>Keybase:</p>
<p><a href="/keybase">damillora</a></p>
</li>
</ul>
</p>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'Social Media',

8
pages/projects/index.vue
View File

@ -1,20 +1,26 @@
<template>
<div class="page">
<h1 class="title">Project Portfolio</h1>
<PageHeader>
<h1>Project Portfolio</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I build applications in my spare time, but currently only some are published / live right now</p>
<div class="card-list">
<ProjectItem name="nanao.moe" codename="miracle" description="The home page for my online identity." />
<ProjectItem name="nanao.moe Blog" codename="yuika" description="The blog for my hobbies" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
export default {
components: {
ProjectItem,
PageHeader,
},
head: {
title: "Project Portfolio",

8
pages/projects/miracle.vue
View File

@ -1,11 +1,14 @@
<template>
<div class="page">
<PageHeader>
<h1>nanao.moe</h1>
<p>
<a href="https://nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/miracle">source code</a>
</p>
</PageHeader>
<main class="container mx-auto main">
<h2>Description</h2>
<p>
A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page.
@ -25,16 +28,19 @@
<GalleryImage :src="require('~/assets/projects/miracle/1.png')" />
<GalleryImage :src="require('~/assets/projects/miracle/2.png')" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
import GalleryImage from '@/components/GalleryImage';
export default {
components: {
ProjectItem,
PageHeader,
GalleryImage
},
head: {

6
pages/projects/yuika.vue
View File

@ -1,11 +1,14 @@
<template>
<div class="page">
<PageHeader>
<h1>nanao.moe Blog</h1>
<p>
<a href="https://blog.nanao.moe">live</a>
&bull;
<a href="https://github.com/Damillora/Yuika">source code</a>
</p>
</PageHeader>
<main class="container mx-auto main">
<h2>Description</h2>
<p>
The nanao.moe blog is my hobby-related blog, writing about games and idols.
@ -29,15 +32,18 @@
<GalleryImage :src="require('~/assets/projects/yuika/6.png')" />
</div>
</main>
</div>
</template>
<script>
import ProjectItem from "@/components/ProjectItem";
import PageHeader from "@/components/PageHeader";
import GalleryImage from '@/components/GalleryImage';
export default {
components: {
ProjectItem,
PageHeader,
GalleryImage
},
head: {