Add more varied page header images

components/PageHeader.vue

@@ -2,7 +2,7 @@
     <div class="relative group page-header">
         <component is="style">
             :root {
-                --bg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg.jpg') }}');
+                --bg-ps: {{ positioning }};
                 --bg-sm: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-sm.jpg') }}');
                 --bg-md: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-md.jpg') }}');
                 --bg-lg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-lg.jpg') }}');
@@ -30,6 +30,20 @@ export default {
   computed: {
     normalImageType() {
       return this.imageType ?? '283-yuika';
+    },
+    positioning() {
+        switch(this.normalImageType) {
+            case '283-yuika':
+                return 'right 25% top 20%';
+            case 'cue-mei':
+                return 'center top';
+            case 'cue-mei2':
+                return 'center top';
+            case '765-yuriko':
+                return 'right 15% top 10%';
+            default:
+                return 'center';
+        }
     }
   },
 
@@ -56,7 +70,7 @@ export default {
 .page-header-background {
   background-image: var(--bg-sm);
   background-size: cover;
-  background-position: right 25% top 20%;
+  background-position: var(--bg-ps);
 }
 @screen sm {
     .page-header-background {

pages/games/arcaea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Arcaea</h1>
       <p><a href="https://arcaea.lowiro.com">Game Website</a></p>
     </PageHeader>

pages/games/arknights.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Arknights</h1>
       <p><a href="https://www.arknights.global">Game Website</a></p>
     </PageHeader>

pages/games/azurlane.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Azur Lane (EN)</h1>
       <p><a href="">Game Website</a></p>
     </PageHeader>

pages/games/bandori.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/cue.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: CUE!</h1>
       <p><a href="https://www.cue-liber.jp/">Game Website</a></p>
     </PageHeader>

pages/games/fgo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
       <p><a href="https://www.fate-go.jp">Game Website</a></p>
     </PageHeader>

pages/games/genshin.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Genshin Impact</h1>
       <p><a href="https://genshin.mihoyo.com">Game Website</a></p>
     </PageHeader>

pages/games/honkai.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Honkai Impact 3rd</h1>
       <p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
     </PageHeader>

pages/games/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile</h1>
     </PageHeader>
     <main class="container mx-auto main">

pages/games/llsif.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/llsifas.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>
     </PageHeader>

pages/games/maimai.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: maimai DX</h1>
       <p><a href="https://maimai.sega.com/">Game Website</a></p>
     </PageHeader>

pages/games/mirishita.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/nogikoi.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Nogikoi</h1>
       <p><a href="https://nogikoi.jp">Game Website</a></p>
     </PageHeader>

pages/games/puroseka.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-  <PageHeader>
+  <PageHeader imageType="cue-mei2">
     <h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
     <p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
   </PageHeader>

pages/games/sdvx.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/shadowverse.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Shadowverse</h1>
       <p><a href="https://shadowverse.com/">Game Website</a></p>
     </PageHeader>

pages/games/shinymas.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
       <p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
     </PageHeader>

pages/games/starira.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <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>

pages/games/t7s.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
       <p><a href="https://t7s.jp">Game Website</a></p>
     </PageHeader>

pages/games/template.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: </h1>
       <p><a href="">Game Website</a></p>
     </PageHeader>

pages/games/unison.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="cue-mei2">
       <h1 class="title">Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
       <p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
     </PageHeader>

pages/links.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <PageHeader>
+    <PageHeader imageType="765-yuriko">
       <h1>Links</h1>
     </PageHeader>
     <main class="container mx-auto main">