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';
html {
@apply font-sans;
}
body {
background-image: url('~assets/images/bg-sm.jpg');
background-size: cover;
background-position: center;
@apply min-h-screen;
}
@screen sm {
body {
background-image: url('~assets/images/bg-md.jpg');
}
.main {
@apply px-4 py-4;
}
@screen md {
body {
background-image: url('~assets/images/bg-lg.jpg');
}
.main {
@apply px-8;
}
}
@screen lg {
body {
background-image: url('~assets/images/bg-xl.jpg');
}
.main {
@apply px-16;
}
}
@screen xl {
body {
background-image: url('~assets/images/bg-xxl.jpg');
}
.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;
}
.content h1 {
@apply text-4xl;
}
.content h2 {
@apply text-3xl;
blockquote {
@apply border-l-4 border-white pl-8 text-yuika-blue-500;
}
.content ul {
@apply list-disc;
.gallery {
@apply flex flex-row flex-wrap items-center;
}
.content ul li {
@apply ml-4;
}
.content a {
@apply text-yuika-blue-200;
}
.content blockquote {
@apply border-l-4 border-white pl-8 text-gray-200;
.gallery .gallery-image {
@apply w-full px-4 py-4;
}

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

View File

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

View File

@ -9,103 +9,15 @@
</template>
<script>
// import FloatingYuriko from '~/components/FloatingYuriko'
import Header from '~/components/Header'
export default {
components: {
// FloatingYuriko
Header,
}
}
</script>
<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>

View File

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

View File

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

View File

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

View File

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

View File

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