Miracle v1.1

components/Footer.vue

@@ -1,22 +1,22 @@
 <template>
 <div>
   <footer>
-      <FooterNav
+      <NavItem
         link="/about"
         icon="person"
         text="about"
          />
-      <FooterNav
+      <NavItem
         link="/games"
         icon="videogame_asset"
         text="game profile"
          />
-      <FooterNav
+      <NavItem
         link="/sns"
         icon="contacts"
         text="social media"
          />
-      <FooterNav
+      <NavItem
         link="//blog.nanao.moe"
         icon="rss_feed"
         text="blog"
@@ -27,22 +27,13 @@
 </template>
 
 <script>
-import FooterNav from "./FooterNav";
+import NavItem from "./NavItem";
 
 export default {
   components: {
-    FooterNav
   },
 }
 </script>
 
 <style>
-footer {
-    @apply h-16 w-full flex flex-row justify-start items-center;
-}
-@screen md {
-  .footer-nav p {
-      @apply text-base;
-  }
-}
 </style>

components/Header.vue

@@ -1,24 +1,52 @@
 <template>
 <div>
-  <header>
+  <div class="site-header">
-      <div class="header-left" v-if="needsBackButton">
+    <div class="site-header-inner">
-          <nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
+      <header>
-      </div>
+        <div class="header-title">
-      <div class="header-middle">
+           <nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
-        <p class="text-lg">{{ title }}</p>
+        </div>
-      </div>
+        <div class="header-nav">
-      <div class="header-right">
+          <div id="menushow" class="">
-      </div>
+            <span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span>
-  </header>
+          </div>
+          <div class="nav-menu">
+      <NavItem
+        link="/about"
+        icon="person"
+        text="about"
+         />
+      <NavItem
+        link="/games"
+        icon="videogame_asset"
+        text="game profile"
+         />
+      <NavItem
+        link="/sns"
+        icon="contacts"
+        text="social media"
+         />
+      <NavItem
+        link="//blog.nanao.moe"
+        icon="rss_feed"
+        text="blog"
+        external="true"
+         />
+          </div>
+        </div>
+      </header>
+    </div>
+  </div>
 </div>
 </template>
 
 <script>
+import NavItem from './NavItem';
 export default {
+  components: {
+    NavItem
+  },
   computed: {
-    needsBackButton() {
-      return this.$nuxt.$route.path != "/";
-    },
     title() {
       return this.$store.state.title;
     }
@@ -33,19 +61,93 @@ export default {
 </script>
 
 <style>
+.site-header {
+  min-height: 300px;
+  height: 70vh;     
+  background-image: url('~assets/images/bg-sm.jpg');
+  background-size: cover;
+  background-position: center;
+}
+@screen md {
+  .site-header {
+    @apply fixed;
+    height: 100vh;
+    width: 25vw;
+  }
+}
+@screen sm {
+    .site-header {
+        background-image: url('~assets/images/bg-md.jpg');
+    }
+}
+@screen md {
+    .site-header {
+        background-image: url('~assets/images/bg-lg.jpg');
+    }
+}
+@screen lg {
+    .site-header {
+        background-image: url('~assets/images/bg-xl.jpg');
+    }
+}
+@screen xl {
+    .site-header {
+        background-image: url('~assets/images/bg-xxl.jpg');
+    }
+}
+.site-header-inner {
+    background: rgba(0,0,0,0.5);
+    @apply w-full h-full;
+}
 header {
-    @apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
+    @apply flex flex-row transition duration-300 ease-in-out;
 }
-.header-link {
+@screen md {
-    @apply mx-2 h-6 w-6 cursor-pointer;
+  header {
+    @apply flex flex-col
+  }
 }
-.header-left {
+header:hover {
-    @apply flex flex-row justify-start items-center h-full;
+    @apply bg-yuika-blue-700;
 }
-.header-middle {
+.header-title {
-    @apply flex-grow flex flex-row justify-start items-center h-full;
+    @apply flex-grow transition duration-300 ease-in-out;
 }
-.header-right {
+.header-title a {
-   @apply flex flex-row justify-start items-center h-full;
+    @apply flex flex-row items-center py-5 pl-4 w-full h-full; 
 }
+.header-title:hover {
+    @apply bg-yuika-blue-500;
+}
+.header-nav {
+    @apply relative;
+}
+.header-nav #menushow {
+  @apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
+}
+.header-nav #menushow:hover  {
+  @apply bg-yuika-blue-500;
+}
+.header-nav .nav-menu {
+  @apply hidden absolute right-0;
+  width: 100vw;
+}
+.header-nav:hover .nav-menu {
+  @apply block;
+}
+@screen md {
+  header {
+    @apply flex flex-col
+  }
+  header:hover {
+    background-color: transparent;
+  }
+  .header-nav #menushow {
+    @apply py-0;
+  }
+  .header-nav .nav-menu {
+    @apply block relative w-full;
+  }
+}
+
 </style>

components/NavItem.vue

@@ -16,24 +16,27 @@ export default {
   methods: {
     getCurrentClasses() {
       if(this.$nuxt.$route.path.startsWith(this.link)) {
-        return ['footer-nav','selected'];     
+        return ['nav-item','selected'];     
       }
-      return ['footer-nav'];
+      return ['nav-item'];
     }
   },
 }
 </script>
 <style>
-.footer-nav {
+.nav-item {
-    @apply w-1/4 transition-bg;
+  @apply text-white h-12 flex flex-row items-center transition duration-300 ease-in-out;
 }
-.footer-nav a {
+.nav-item:hover {
-    @apply w-full h-full flex flex-col justify-end items-center py-2;
+  @apply bg-yuika-blue-500
 }
-.footer-nav p {
+.nav-item a {
-    @apply text-xs;
+  @apply flex flex-row items-center h-full w-full;
 }
-.footer-nav.selected {
+.nav-item a i {
-    background-color: rgba(0,0,0,0.5);
+  @apply px-4;
+}
+.nav-item a p {
+  @apply inline-block flex-grow;
 }
 </style>

layouts/default.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="main">
-      <div class="card">
+      <Header />
-        <Header />
+      <div class="content">
-        <div class="content">
+        <main>
           <nuxt />
-        </div>
+        </main>
         <Footer />
       </div>
     </div>
@@ -14,36 +14,105 @@
 
 <script>
 // import FloatingYuriko from '~/components/FloatingYuriko'
-import Footer from '~/components/Footer'
 import Header from '~/components/Header'
 export default {
   components: {
 //    FloatingYuriko
-    Footer,
     Header,
   }
 }
 </script>
 
 <style>
-.main {
+@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
-    height: 100vh;
+
-}
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-.card {
+
-    @apply text-white;
+@import 'tailwindcss/base';
-    background-color: rgba(0,0,0,0.3);
+
-    width: 100%;
+@import 'tailwindcss/components';
-    height: 100%;
+
+@import 'tailwindcss/utilities';
+
+html {
+    @apply font-sans;
 }
 @screen md {
-    .main {
+  .main {
-        padding: 5% 5%;
+    @apply flex flex-row; 
-    }
+  }
+  .content {
+    margin-left: 25vw;
+  }
+}
+main {
+    @apply px-4 py-4;
+}
+@screen md {
+  main {
+    @apply px-8;
+  }
+}
+@screen lg {
+  main {
+    @apply px-16;
+  }
+}
+@screen xl {
+  main {
+    @apply px-32;
+  }
 }
 
-.content {
+main p {
-    @apply px-8 overflow-y-auto;
+  @apply my-4;
-    height: calc(100% - 8rem);
 }
+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;
+}
+
 </style>
 

nuxt.config.js

@@ -1,5 +1,3 @@
-require('dotenv').config({ path: process.env.THEME ? ".env."+process.env.THEME : ".env"})
-
 module.exports = {
   mode: 'universal',
   server: {
@@ -48,7 +46,6 @@ module.exports = {
   ** Nuxt.js dev-modules
   */
   buildModules: [
-    '@nuxtjs/tailwindcss',
   ],
   /*
   ** Nuxt.js modules
@@ -63,6 +60,12 @@ module.exports = {
     /*
     ** You can extend webpack config here
     */
+    postcss: {
+      plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+      ],
+    },
     extend (config, ctx) {
       config.module.rules.push({
         test: /\.(ogg|mp3|wav|mpe?g)$/i,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "newhomepage",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "nanao.moe homepage, but in Vue",
   "author": "Damillora",
   "private": true,
@@ -12,14 +12,13 @@
   },
   "dependencies": {
     "@nuxtjs/dotenv": "^1.4.1",
-    "@nuxtjs/tailwindcss": "^1.2.0",
     "cross-env": "^5.2.0",
     "express": "^4.16.4",
     "howler": "^2.1.2",
     "node-sass": "^4.12.0",
     "nuxt": "^2.0.0",
     "sass-loader": "^8.0.0",
-    "tailwindcss-transitions": "^2.1.0",
+    "tailwindcss": "^1.4.6",
     "tall": "^3.0.0"
   },
   "devDependencies": {

pages/index.vue

@@ -1,14 +1,10 @@
 
 <template>
   <div>
-            <div class="flex flex-col">
+    <h1>Damillora</h1>
-                <div class="flex flex-col">
+    <p>Web developer, reviewer and content creator</p>
-                    <h1 class="text-xl py-1">Damillora</h1>
+    <p>三峰結華 七尾百合子</p>
-                    <p class="text-lg py-1">Web developer, reviewer and content creator</p>
+    <p>EN OK, JP read only</p>
-                    <p class="text-lg py-1">三峰結華 七尾百合子</p>
-                    <p class="text-lg py-1">EN OK, JP read only</p>
-                </div>
-            </div>
   </div>
 </template>
 

tailwind.config.js

@@ -1,15 +1,16 @@
 module.exports = {
+  purge: {
+    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
+    enabled: process.env.NODE_ENV === 'production',
+    content: [
+      'components/**/*.vue',
+      'layouts/**/*.vue',
+      'pages/**/*.vue',
+      'plugins/**/*.js',
+      'nuxt.config.js'
+    ]
+  },
   theme: {
-    transitionProperty: {
-      'none': 'none',
-      'all': 'all',
-      'color': 'color',
-      'bg': 'background-color',
-      'border': 'border-color',
-      'colors': ['color', 'background-color', 'border-color'],
-      'opacity': 'opacity',
-      'transform': 'transform',
-    },
     extend: {
       colors: {
         'yuika-blue': {
@@ -37,7 +38,4 @@ module.exports = {
     }
   },
   variants: ['responsive', 'group-hover', 'hover', 'active' ],
-  plugins: [
-    require('tailwindcss-transitions')(),
-  ],
 }