Miracle 2.0

This commit is contained in:
Damillora 2020-11-11 02:16:35 +07:00
parent 98be32e3d2
commit 63fbad81b6
4 changed files with 89 additions and 62 deletions

View File

@ -1,41 +1,49 @@
<template> <template>
<div> <div v-click-outside="menuHide">
<div class="site-header"> <div :class="menu_shown ? ['site-header','enabled'] : ['site-header']">
<div :class="menu_shown ? ['site-background','enabled'] : ['site-background']"></div>
<div class="site-header-inner"> <div class="site-header-inner">
<header> <header>
<div class="header-title"> <div class="header-top">
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link> <a @click="menu_shown = !menu_shown" id="menushow">
</div> <span class="h-12 w-12 px-3 py-3 text-white material-icons" alt="menu">menu</span>
<div class="header-nav"> </a>
<div id="menushow" class=""> <div class="header-title" @click="menu_shown = !menu_shown" >
<span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span> <nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
</div> </div>
<div class="nav-menu"> </div>
<div class="header-menu">
<div :class="menu_shown ? ['nav-menu','enabled'] : ['nav-menu']">
<NavItem <NavItem
link="/about" link="/about"
icon="person" icon="person"
text="About" text="About"
@click="menu_shown = !menu_shown"
/> />
<NavItem <NavItem
link="/projects" link="/projects"
icon="work" icon="work"
text="Projects" text="Projects"
@click="menu_shown = !menu_shown"
/> />
<NavItem <NavItem
link="/games" link="/games"
icon="videogame_asset" icon="videogame_asset"
text="Game Profile" text="Game Profile"
@click="menu_shown = !menu_shown"
/> />
<NavItem <NavItem
link="/links" link="/links"
icon="contacts" icon="contacts"
text="Links" text="Links"
@click="menu_shown = !menu_shown"
/> />
<NavItem <NavItem
link="//blog.nanao.moe" link="//blog.nanao.moe"
icon="rss_feed" icon="rss_feed"
text="Blog" text="Blog"
external="true" external="true"
@click="menu_shown = !menu_shown"
/> />
</div> </div>
</div> </div>
@ -51,108 +59,122 @@ export default {
components: { components: {
NavItem NavItem
}, },
computed: { data() {
title() { return {
return this.$store.state.title; menu_shown: false,
} };
}, },
methods: {
goBack(event) {
if(event) event.preventDefault();
this.$router.back();
}
}
} }
</script> </script>
<style> <style>
.site-header { .site-header {
min-height: 300px; height: 4rem;
height: 70vh; width: 100vw;
overflow: hidden;
@apply fixed transition-all duration-300 ease-in-out;
}
.site-background {
z-index: -1;
width: 100vw;
height: 100vh;
position: absolute;
background-image: url('~assets/images/bg-sm.jpg'); background-image: url('~assets/images/bg-sm.jpg');
background-size: cover; background-size: cover;
background-position: right 20% center; background-position: right 25% top 20%;
@apply transition-all duration-300 ease-in-out;
}
.site-background {
top: -23vh;
}
.site-background.enabled {
top: 0;
}
@screen md {
.site-background {
top: 0;
right: -25vw;
}
.site-background.enabled {
top: 0;
right: 0;
}
}
.site-header.enabled {
height: 100vh;
width: 100vw;
} }
@screen md { @screen md {
.site-header { .site-header {
@apply fixed; @apply fixed;
height: 100vh; height: 100vh;
width: 25vw; width: 3.5rem;
}
.site-header.enabled {
width: 100vw;
} }
} }
@screen sm { @screen sm {
.site-header { .site-background {
background-image: url('~assets/images/bg-md.jpg'); background-image: url('~assets/images/bg-md.jpg');
} }
} }
@screen md { @screen md {
.site-header { .site-background {
background-image: url('~assets/images/bg-lg.jpg'); background-image: url('~assets/images/bg-lg.jpg');
} }
} }
@screen lg { @screen lg {
.site-header { .site-background {
background-image: url('~assets/images/bg-xl.jpg'); background-image: url('~assets/images/bg-xl.jpg');
} }
} }
@screen xl { @screen xl {
.site-header { .site-background {
background-image: url('~assets/images/bg-xxl.jpg'); background-image: url('~assets/images/bg-xxl.jpg');
} }
} }
.site-header-inner { .site-header-inner {
z-index: 1;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
@apply w-full h-full; @apply w-full h-full;
} }
header { header {
@apply flex flex-row transition duration-300 ease-in-out; @apply flex flex-col transition duration-300 ease-in-out;
} }
@screen md { .header-top {
header { @apply flex flex-row;
@apply flex flex-col
}
}
header:hover {
@apply bg-yuika-blue-700;
} }
.header-title { .header-title {
@apply flex-grow transition duration-300 ease-in-out; @apply flex-grow transition duration-300 ease-in-out;
} }
.header-title a { .header-title a {
@apply flex flex-row items-center py-5 pl-4 w-full h-full; @apply flex flex-row items-center py-4 pl-4 w-full h-full;
} }
.header-title:hover { .header-title:hover {
@apply bg-yuika-blue-500; @apply bg-yuika-blue-500;
} }
.header-nav { #menushow {
@apply relative; @apply block cursor-pointer relative px-1 py-2 transition duration-300 ease-in-out;
} }
.header-nav #menushow { #menushow:hover {
@apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
}
.header-nav #menushow:hover {
@apply bg-yuika-blue-500; @apply bg-yuika-blue-500;
} }
.header-nav .nav-menu { .header-menu .nav-menu {
@apply hidden absolute right-0 bg-yuika-blue-700; max-height: 0px;
width: 100vw; @apply block transition-all duration-300 ease-in-out overflow-hidden;
} }
.header-nav:hover .nav-menu { .header-menu .nav-menu.enabled {
@apply block; max-height: 100vh;
} }
@screen md { @screen md {
header { .header-menu .nav-menu {
@apply flex flex-col max-height: 100vh;
margin-left: 3.5rem;
max-width: 0px;
} }
header:hover { .header-menu .nav-menu.enabled {
background-color: transparent; max-width: 100vw;
}
.header-nav #menushow {
@apply py-0;
}
.header-nav .nav-menu {
@apply block relative w-full;
background-color: transparent;
} }
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="getCurrentClasses()"> <div :class="getCurrentClasses()" @click="$emit('click')">
<a :href="link" v-if="external"> <a :href="link" v-if="external">
<i class="material-icons md-24">{{ icon }}</i> <i class="material-icons md-24">{{ icon }}</i>
<p class="header-link">{{ text }}</p> <p class="header-link">{{ text }}</p>

View File

@ -38,12 +38,17 @@ export default {
html { html {
@apply font-sans; @apply font-sans;
} }
.content {
@apply w-full;
padding-top: 4rem;
}
@screen md { @screen md {
.main { .main {
@apply flex flex-row; @apply flex flex-row;
} }
.content { .content {
margin-left: 25vw; padding-top: 0;
margin-left: 3.5rem;
} }
} }
main { main {

View File

@ -1,6 +1,6 @@
{ {
"name": "newhomepage", "name": "@damillora/miracle",
"version": "1.1.0", "version": "2.0.0",
"description": "nanao.moe homepage, but in Vue", "description": "nanao.moe homepage, but in Vue",
"author": "Damillora", "author": "Damillora",
"private": true, "private": true,