Add Mei Toomi to backgrounds and accomodate multiple backgrounds

This commit is contained in:
Damillora 2021-01-08 04:06:14 +07:00
parent 9eac829d0f
commit ac109b35cd
21 changed files with 98 additions and 138 deletions

View File

@ -8,53 +8,84 @@
@import 'tailwindcss/utilities'; @import 'tailwindcss/utilities';
html { html {
@apply font-sans; @apply font-sans;
} }
body { .main {
background-image: url('~assets/images/bg-sm.jpg'); @apply px-4 py-4;
background-size: cover;
background-position: center;
@apply min-h-screen;
}
@screen sm {
body {
background-image: url('~assets/images/bg-md.jpg');
}
} }
@screen md { @screen md {
body { .main {
background-image: url('~assets/images/bg-lg.jpg'); @apply px-8;
} }
} }
@screen lg { @screen lg {
body { .main {
background-image: url('~assets/images/bg-xl.jpg'); @apply px-16;
} }
} }
@screen xl { @screen xl {
body { .main {
background-image: url('~assets/images/bg-xxl.jpg'); @apply px-32;
} }
}
.page {
@apply w-full;
}
.main p {
@apply my-4;
}
.main h1 {
@apply my-4 text-4xl font-light;
}
.main h2 {
@apply my-4 text-3xl font-light;
}
.main h3 {
@apply my-4 text-2xl font-light;
}
.main h4 {
@apply my-4 text-xl font-light;
}
.main h5 {
@apply my-4 text-lg font-light;
}
.main h6 {
@apply my-4 text-base font-light;
}
.main a {
@apply text-yuika-blue-700;
}
.main a:hover {
@apply underline;
}
.main ul {
@apply list-disc;
}
.main ul li p {
@apply my-0;
}
.main ol {
@apply list-decimal;
}
.main code {
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
.main blockquote {
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
.main pre {
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
} }
.content h1 { blockquote {
@apply text-4xl; @apply border-l-4 border-white pl-8 text-yuika-blue-500;
}
.content h2 {
@apply text-3xl;
} }
.content ul { .gallery {
@apply list-disc; @apply flex flex-row flex-wrap items-center;
} }
.content ul li { .gallery .gallery-image {
@apply ml-4; @apply w-full px-4 py-4;
}
.content a {
@apply text-yuika-blue-200;
}
.content blockquote {
@apply border-l-4 border-white pl-8 text-gray-200;
} }

BIN
assets/images/mei/bg-lg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 KiB

BIN
assets/images/mei/bg-md.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

BIN
assets/images/mei/bg-sm.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
assets/images/mei/bg-xl.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 KiB

BIN
assets/images/mei/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 587 KiB

View File

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

View File

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 123 KiB

View File

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 266 KiB

View File

Before

Width:  |  Height:  |  Size: 511 KiB

After

Width:  |  Height:  |  Size: 511 KiB

View File

Before

Width:  |  Height:  |  Size: 688 KiB

After

Width:  |  Height:  |  Size: 688 KiB

View File

@ -96,7 +96,7 @@ export default {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: absolute; position: absolute;
background-image: url('~assets/images/bg-sm.jpg'); background-image: url('~assets/images/yuika/bg-sm.jpg');
background-size: cover; background-size: cover;
background-position: right 25% top 20%; background-position: right 25% top 20%;
@apply transition-all duration-300 ease-in-out; @apply transition-all duration-300 ease-in-out;
@ -115,22 +115,22 @@ export default {
} }
@screen sm { @screen sm {
.site-background { .site-background {
background-image: url('~assets/images/bg-md.jpg'); background-image: url('~assets/images/yuika/bg-md.jpg');
} }
} }
@screen md { @screen md {
.site-background { .site-background {
background-image: url('~assets/images/bg-lg.jpg'); background-image: url('~assets/images/yuika/bg-lg.jpg');
} }
} }
@screen lg { @screen lg {
.site-background { .site-background {
background-image: url('~assets/images/bg-xl.jpg'); background-image: url('~assets/images/yuika/bg-xl.jpg');
} }
} }
@screen xl { @screen xl {
.site-background { .site-background {
background-image: url('~assets/images/bg-xxl.jpg'); background-image: url('~assets/images/yuika/bg-xxl.jpg');
} }
} }
.site-header-inner { .site-header-inner {

View File

@ -1,5 +1,15 @@
<template> <template>
<div class="relative group page-header"> <div class="relative group page-header">
<style>
:root {
--bg: url('{{ require('@/assets/images/'+normalImageType+'/bg.jpg') }}');
--bg-sm: url('{{ require('@/assets/images/'+normalImageType+'/bg-sm.jpg') }}');
--bg-md: url('{{ require('@/assets/images/'+normalImageType+'/bg-md.jpg') }}');
--bg-lg: url('{{ require('@/assets/images/'+normalImageType+'/bg-lg.jpg') }}');
--bg-xl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xl.jpg') }}');
--bg-xxl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xxl.jpg') }}');
}
</style>
<div class="h-full w-full page-header-background"> <div class="h-full w-full page-header-background">
<div class="w-full h-full opacity-50 bg-black"> <div class="w-full h-full opacity-50 bg-black">
</div> </div>
@ -16,6 +26,12 @@
<script> <script>
export default { export default {
props: [ 'imageType' ],
computed: {
normalImageType() {
return this.imageType ?? 'yuika';
}
},
} }
</script> </script>
@ -38,28 +54,28 @@ export default {
} }
.page-header-background { .page-header-background {
background-image: url('~assets/images/bg-sm.jpg'); background-image: var(--bg-sm);
background-size: cover; background-size: cover;
background-position: right 25% top 20%; background-position: right 25% top 20%;
} }
@screen sm { @screen sm {
.page-header-background { .page-header-background {
background-image: url('~assets/images/bg-md.jpg'); background-image: var(--bg-md);
} }
} }
@screen md { @screen md {
.page-header-background { .page-header-background {
background-image: url('~assets/images/bg-lg.jpg'); background-image: var(--bg-lg);
} }
} }
@screen lg { @screen lg {
.page-header-background { .page-header-background {
background-image: url('~assets/images/bg-xl.jpg'); background-image: var(--bg-xl);
} }
} }
@screen xl { @screen xl {
.page-header-background { .page-header-background {
background-image: url('~assets/images/bg-xxl.jpg'); background-image: var(--bg-xxl);
} }
} }
</style> </style>

View File

@ -9,103 +9,15 @@
</template> </template>
<script> <script>
// import FloatingYuriko from '~/components/FloatingYuriko'
import Header from '~/components/Header' import Header from '~/components/Header'
export default { export default {
components: { components: {
// FloatingYuriko
Header, Header,
} }
} }
</script> </script>
<style> <style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
html {
@apply font-sans;
}
.main {
@apply px-4 py-4;
}
@screen md {
.main {
@apply px-8;
}
}
@screen lg {
.main {
@apply px-16;
}
}
@screen xl {
.main {
@apply px-32;
}
}
.page {
@apply w-full;
}
.main p {
@apply my-4;
}
.main h1 {
@apply my-4 text-4xl font-light;
}
.main h2 {
@apply my-4 text-3xl font-light;
}
.main h3 {
@apply my-4 text-2xl font-light;
}
.main h4 {
@apply my-4 text-xl font-light;
}
.main h5 {
@apply my-4 text-lg font-light;
}
.main h6 {
@apply my-4 text-base font-light;
}
.main a {
@apply text-yuika-blue-700;
}
.main a:hover {
@apply underline;
}
.main ul {
@apply list-disc;
}
.main ul li p {
@apply my-0;
}
.main ol {
@apply list-decimal;
}
.main code {
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
.main blockquote {
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
.main pre {
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
}
blockquote {
@apply border-l-4 border-white pl-8 text-yuika-blue-500;
}
.gallery {
@apply flex flex-row flex-wrap items-center;
}
.gallery .gallery-image {
@apply w-full px-4 py-4;
}
</style> </style>

View File

@ -34,6 +34,7 @@ module.exports = {
** Global CSS ** Global CSS
*/ */
css: [ css: [
'@/assets/css/tailwind.css',
], ],
env: { env: {
subheader: process.env.SUBHEADER || "" , subheader: process.env.SUBHEADER || "" ,

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="mei">
<h1>Project Portfolio</h1> <h1>Project Portfolio</h1>
</PageHeader> </PageHeader>
<main class="container mx-auto main"> <main class="container mx-auto main">

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="mei">
<h1>nanao.moe</h1> <h1>nanao.moe</h1>
<p> <p>
<a href="https://nanao.moe">live</a> <a href="https://nanao.moe">live</a>

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<PageHeader> <PageHeader imageType="mei">
<h1>nanao.moe Blog</h1> <h1>nanao.moe Blog</h1>
<p> <p>
<a href="https://blog.nanao.moe">live</a> <a href="https://blog.nanao.moe">live</a>

View File

@ -1,6 +1,6 @@
export const state = () => ({ export const state = () => ({
title: 'Damillora' title: 'Damillora',
}) })
export const mutations = { export const mutations = {