Miracle v1.1
This commit is contained in:
parent
a6602da4ad
commit
96c448c33b
@ -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>
|
||||
|
||||
@ -1,24 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="site-header">
|
||||
<div class="site-header-inner">
|
||||
<header>
|
||||
<div class="header-left" v-if="needsBackButton">
|
||||
<nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
|
||||
<div class="header-title">
|
||||
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
|
||||
</div>
|
||||
<div class="header-middle">
|
||||
<p class="text-lg">{{ title }}</p>
|
||||
<div class="header-nav">
|
||||
<div id="menushow" class="">
|
||||
<span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span>
|
||||
</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 class="header-right">
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavItem from './NavItem';
|
||||
export default {
|
||||
computed: {
|
||||
needsBackButton() {
|
||||
return this.$nuxt.$route.path != "/";
|
||||
components: {
|
||||
NavItem
|
||||
},
|
||||
computed: {
|
||||
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 {
|
||||
@apply mx-2 h-6 w-6 cursor-pointer;
|
||||
@screen md {
|
||||
header {
|
||||
@apply flex flex-col
|
||||
}
|
||||
.header-left {
|
||||
@apply flex flex-row justify-start items-center h-full;
|
||||
}
|
||||
.header-middle {
|
||||
@apply flex-grow flex flex-row justify-start items-center h-full;
|
||||
header:hover {
|
||||
@apply bg-yuika-blue-700;
|
||||
}
|
||||
.header-right {
|
||||
@apply flex flex-row justify-start items-center h-full;
|
||||
.header-title {
|
||||
@apply flex-grow transition duration-300 ease-in-out;
|
||||
}
|
||||
.header-title a {
|
||||
@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>
|
||||
|
||||
@ -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 {
|
||||
@apply w-1/4 transition-bg;
|
||||
.nav-item {
|
||||
@apply text-white h-12 flex flex-row items-center transition duration-300 ease-in-out;
|
||||
}
|
||||
.footer-nav a {
|
||||
@apply w-full h-full flex flex-col justify-end items-center py-2;
|
||||
.nav-item:hover {
|
||||
@apply bg-yuika-blue-500
|
||||
}
|
||||
.footer-nav p {
|
||||
@apply text-xs;
|
||||
.nav-item a {
|
||||
@apply flex flex-row items-center h-full w-full;
|
||||
}
|
||||
.footer-nav.selected {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
.nav-item a i {
|
||||
@apply px-4;
|
||||
}
|
||||
.nav-item a p {
|
||||
@apply inline-block flex-grow;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<Header />
|
||||
<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 {
|
||||
height: 100vh;
|
||||
}
|
||||
.card {
|
||||
@apply text-white;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
|
||||
|
||||
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
@import 'tailwindcss/base';
|
||||
|
||||
@import 'tailwindcss/components';
|
||||
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
@screen md {
|
||||
.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 {
|
||||
@apply px-8 overflow-y-auto;
|
||||
height: calc(100% - 8rem);
|
||||
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;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-xl py-1">Damillora</h1>
|
||||
<p class="text-lg py-1">Web developer, reviewer and content creator</p>
|
||||
<p class="text-lg py-1">三峰結華 七尾百合子</p>
|
||||
<p class="text-lg py-1">EN OK, JP read only</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Damillora</h1>
|
||||
<p>Web developer, reviewer and content creator</p>
|
||||
<p>三峰結華 七尾百合子</p>
|
||||
<p>EN OK, JP read only</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
transitionProperty: {
|
||||
'none': 'none',
|
||||
'all': 'all',
|
||||
'color': 'color',
|
||||
'bg': 'background-color',
|
||||
'border': 'border-color',
|
||||
'colors': ['color', 'background-color', 'border-color'],
|
||||
'opacity': 'opacity',
|
||||
'transform': 'transform',
|
||||
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: {
|
||||
extend: {
|
||||
colors: {
|
||||
'yuika-blue': {
|
||||
@ -37,7 +38,4 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
variants: ['responsive', 'group-hover', 'hover', 'active' ],
|
||||
plugins: [
|
||||
require('tailwindcss-transitions')(),
|
||||
],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user