Damillora
/
miracle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Miracle v1.1

This commit is contained in:
Damillora 2020-06-24 04:37:09 +07:00
parent a6602da4ad
commit 96c448c33b
9 changed files with 2447 additions and 1706 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/Footer.vue
View File

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

146
components/Header.vue
View File

@ -1,24 +1,52 @@
<template>
<div>
<header>
<div class="header-left" v-if="needsBackButton">
<nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
</div>
<div class="header-middle">
<p class="text-lg">{{ title }}</p>
</div>
<div class="header-right">
</div>
</header>
<div class="site-header">
<div class="site-header-inner">
<header>
<div class="header-title">
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
</div>
<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>
</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 {
@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:hover {
@apply bg-yuika-blue-700;
}
.header-middle {
@apply flex-grow flex flex-row justify-start items-center h-full;
.header-title {
@apply flex-grow transition duration-300 ease-in-out;
}
.header-right {
@apply flex flex-row justify-start items-center h-full;
.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>

23
components/FooterNav.vue → components/NavItem.vue
View File

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

109
layouts/default.vue
View File

@ -1,11 +1,11 @@
<template>
<div>
<div class="main">
<div class="card">
<Header />
<div class="content">
<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%;
}
.main {
@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>

9
nuxt.config.js
View File

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

5
package.json
View File

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

12
pages/index.vue
View File

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

24
tailwind.config.js
View File

@ -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')(),
],
}

3806
yarn.lock
View File

File diff suppressed because it is too large Load Diff