Miracle 2.0
This commit is contained in:
parent
98be32e3d2
commit
63fbad81b6
@ -1,41 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="site-header">
|
||||
<div v-click-outside="menuHide">
|
||||
<div :class="menu_shown ? ['site-header','enabled'] : ['site-header']">
|
||||
<div :class="menu_shown ? ['site-background','enabled'] : ['site-background']"></div>
|
||||
<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 class="header-top">
|
||||
<a @click="menu_shown = !menu_shown" id="menushow">
|
||||
<span class="h-12 w-12 px-3 py-3 text-white material-icons" alt="menu">menu</span>
|
||||
</a>
|
||||
<div class="header-title" @click="menu_shown = !menu_shown" >
|
||||
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
|
||||
</div>
|
||||
<div class="nav-menu">
|
||||
</div>
|
||||
<div class="header-menu">
|
||||
<div :class="menu_shown ? ['nav-menu','enabled'] : ['nav-menu']">
|
||||
<NavItem
|
||||
link="/about"
|
||||
icon="person"
|
||||
text="About"
|
||||
@click="menu_shown = !menu_shown"
|
||||
/>
|
||||
<NavItem
|
||||
link="/projects"
|
||||
icon="work"
|
||||
text="Projects"
|
||||
@click="menu_shown = !menu_shown"
|
||||
/>
|
||||
<NavItem
|
||||
link="/games"
|
||||
icon="videogame_asset"
|
||||
text="Game Profile"
|
||||
@click="menu_shown = !menu_shown"
|
||||
/>
|
||||
<NavItem
|
||||
link="/links"
|
||||
icon="contacts"
|
||||
text="Links"
|
||||
@click="menu_shown = !menu_shown"
|
||||
/>
|
||||
<NavItem
|
||||
link="//blog.nanao.moe"
|
||||
icon="rss_feed"
|
||||
text="Blog"
|
||||
external="true"
|
||||
@click="menu_shown = !menu_shown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,108 +59,122 @@ export default {
|
||||
components: {
|
||||
NavItem
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$store.state.title;
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
menu_shown: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goBack(event) {
|
||||
if(event) event.preventDefault();
|
||||
this.$router.back();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.site-header {
|
||||
min-height: 300px;
|
||||
height: 70vh;
|
||||
height: 4rem;
|
||||
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-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 {
|
||||
.site-header {
|
||||
@apply fixed;
|
||||
height: 100vh;
|
||||
width: 25vw;
|
||||
width: 3.5rem;
|
||||
}
|
||||
.site-header.enabled {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
@screen sm {
|
||||
.site-header {
|
||||
.site-background {
|
||||
background-image: url('~assets/images/bg-md.jpg');
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
.site-header {
|
||||
.site-background {
|
||||
background-image: url('~assets/images/bg-lg.jpg');
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
.site-header {
|
||||
.site-background {
|
||||
background-image: url('~assets/images/bg-xl.jpg');
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
.site-header {
|
||||
.site-background {
|
||||
background-image: url('~assets/images/bg-xxl.jpg');
|
||||
}
|
||||
}
|
||||
.site-header-inner {
|
||||
z-index: 1;
|
||||
background: rgba(0,0,0,0.5);
|
||||
@apply w-full h-full;
|
||||
}
|
||||
header {
|
||||
@apply flex flex-row transition duration-300 ease-in-out;
|
||||
@apply flex flex-col transition duration-300 ease-in-out;
|
||||
}
|
||||
@screen md {
|
||||
header {
|
||||
@apply flex flex-col
|
||||
}
|
||||
}
|
||||
header:hover {
|
||||
@apply bg-yuika-blue-700;
|
||||
.header-top {
|
||||
@apply flex flex-row;
|
||||
}
|
||||
.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;
|
||||
@apply flex flex-row items-center py-4 pl-4 w-full h-full;
|
||||
}
|
||||
.header-title:hover {
|
||||
@apply bg-yuika-blue-500;
|
||||
}
|
||||
.header-nav {
|
||||
@apply relative;
|
||||
#menushow {
|
||||
@apply block cursor-pointer relative px-1 py-2 transition duration-300 ease-in-out;
|
||||
}
|
||||
.header-nav #menushow {
|
||||
@apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
|
||||
}
|
||||
.header-nav #menushow:hover {
|
||||
#menushow:hover {
|
||||
@apply bg-yuika-blue-500;
|
||||
}
|
||||
.header-nav .nav-menu {
|
||||
@apply hidden absolute right-0 bg-yuika-blue-700;
|
||||
width: 100vw;
|
||||
.header-menu .nav-menu {
|
||||
max-height: 0px;
|
||||
@apply block transition-all duration-300 ease-in-out overflow-hidden;
|
||||
}
|
||||
.header-nav:hover .nav-menu {
|
||||
@apply block;
|
||||
.header-menu .nav-menu.enabled {
|
||||
max-height: 100vh;
|
||||
}
|
||||
@screen md {
|
||||
header {
|
||||
@apply flex flex-col
|
||||
.header-menu .nav-menu {
|
||||
max-height: 100vh;
|
||||
margin-left: 3.5rem;
|
||||
max-width: 0px;
|
||||
}
|
||||
header:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
.header-nav #menushow {
|
||||
@apply py-0;
|
||||
}
|
||||
.header-nav .nav-menu {
|
||||
@apply block relative w-full;
|
||||
background-color: transparent;
|
||||
.header-menu .nav-menu.enabled {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="getCurrentClasses()">
|
||||
<div :class="getCurrentClasses()" @click="$emit('click')">
|
||||
<a :href="link" v-if="external">
|
||||
<i class="material-icons md-24">{{ icon }}</i>
|
||||
<p class="header-link">{{ text }}</p>
|
||||
|
||||
@ -38,12 +38,17 @@ export default {
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
.content {
|
||||
@apply w-full;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
@screen md {
|
||||
.main {
|
||||
@apply flex flex-row;
|
||||
}
|
||||
.content {
|
||||
margin-left: 25vw;
|
||||
padding-top: 0;
|
||||
margin-left: 3.5rem;
|
||||
}
|
||||
}
|
||||
main {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "newhomepage",
|
||||
"version": "1.1.0",
|
||||
"name": "@damillora/miracle",
|
||||
"version": "2.0.0",
|
||||
"description": "nanao.moe homepage, but in Vue",
|
||||
"author": "Damillora",
|
||||
"private": true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user