Add more varied page header images
BIN
assets/images/bg/765-yuriko/bg-lg.jpg
Normal file
After Width: | Height: | Size: 269 KiB |
BIN
assets/images/bg/765-yuriko/bg-md.jpg
Normal file
After Width: | Height: | Size: 168 KiB |
BIN
assets/images/bg/765-yuriko/bg-sm.jpg
Normal file
After Width: | Height: | Size: 123 KiB |
BIN
assets/images/bg/765-yuriko/bg-xl.jpg
Normal file
After Width: | Height: | Size: 377 KiB |
BIN
assets/images/bg/765-yuriko/bg-xxl.jpg
Normal file
After Width: | Height: | Size: 383 KiB |
BIN
assets/images/bg/cue-mei2/bg-lg.jpg
Normal file
After Width: | Height: | Size: 116 KiB |
BIN
assets/images/bg/cue-mei2/bg-md.jpg
Normal file
After Width: | Height: | Size: 73 KiB |
BIN
assets/images/bg/cue-mei2/bg-sm.jpg
Normal file
After Width: | Height: | Size: 55 KiB |
BIN
assets/images/bg/cue-mei2/bg-xl.jpg
Normal file
After Width: | Height: | Size: 164 KiB |
BIN
assets/images/bg/cue-mei2/bg-xxl.jpg
Normal file
After Width: | Height: | Size: 174 KiB |
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<PageHeader>
|
||||
<PageHeader imageType="765-yuriko">
|
||||
<h1>Links</h1>
|
||||
</PageHeader>
|
||||
<main class="container mx-auto main">
|
||||
|