Add Mei Toomi to backgrounds and accomodate multiple backgrounds

assets/css/tailwind.css

@@ -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;
-}
-.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 {
+    @apply flex flex-row flex-wrap items-center;
 }
+.gallery .gallery-image {
+    @apply w-full px-4 py-4;
+}

components/Header.vue

@@ -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 {

components/PageHeader.vue

@@ -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>

layouts/default.vue

@@ -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>
 

nuxt.config.js

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

pages/projects/index.vue

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

pages/projects/miracle.vue

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

pages/projects/yuika.vue

@@ -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>

store/index.js

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