Overhaul design to become more card like
This commit is contained in:
parent
c9edc041ab
commit
e3477124cf
@ -9,82 +9,47 @@
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
.main {
|
||||
body {
|
||||
background-image: url('~assets/images/bg-sm.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
@apply min-h-screen;
|
||||
}
|
||||
@screen sm {
|
||||
.main {
|
||||
body {
|
||||
background-image: url('~assets/images/bg-md.jpg');
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
.main {
|
||||
body {
|
||||
background-image: url('~assets/images/bg-lg.jpg');
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
.main {
|
||||
body {
|
||||
background-image: url('~assets/images/bg-xl.jpg');
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
.main {
|
||||
body {
|
||||
background-image: url('~assets/images/bg-xxl.jpg');
|
||||
}
|
||||
}
|
||||
.card {
|
||||
@apply text-white py-4 px-4;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply relative overflow-y-auto;
|
||||
height: calc(100vh - 7rem);
|
||||
}
|
||||
|
||||
.page {
|
||||
@apply text-white py-4 px-4 w-full right-0;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
min-height: calc(100vh - 7rem);
|
||||
}
|
||||
@screen sm {
|
||||
.page {
|
||||
@apply w-3/4;
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
.page {
|
||||
@apply w-3/5;
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
.page {
|
||||
@apply w-1/2;
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
.page {
|
||||
@apply w-2/5;
|
||||
}
|
||||
}
|
||||
|
||||
.page h1 {
|
||||
.content h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
.page h2 {
|
||||
.content h2 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
.page ul {
|
||||
.content ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
.page ul li {
|
||||
.content ul li {
|
||||
@apply ml-4;
|
||||
}
|
||||
.page a {
|
||||
.content a {
|
||||
@apply text-yuika-blue-200;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<footer>
|
||||
<div class="footer-left">
|
||||
<h1>(C) 2019 Damillora</h1>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
|
||||
</div>
|
||||
<div class="footer-nav">
|
||||
<a href="//blog.nanao.moe"><p class="header-link">blog</p></a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<div class="h-12"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -17,13 +26,9 @@ export default {
|
||||
|
||||
<style>
|
||||
footer {
|
||||
@apply h-12 bottom-0 w-full z-10 flex flex-row justify-start items-center px-4 fixed;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
@apply h-16 w-full flex flex-row justify-start items-center;
|
||||
}
|
||||
footer h1 {
|
||||
@apply text-white;
|
||||
}
|
||||
.footer-left {
|
||||
|
||||
.footer-nav {
|
||||
@apply w-1/4 flex flex-row justify-center items-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,13 +7,12 @@
|
||||
<div class="header-middle">
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
|
||||
<!-- <nuxt-link to="/about"><p class="header-link">about</p></nuxt-link>
|
||||
<nuxt-link to="/games"><p class="header-link">game profile</p></nuxt-link>
|
||||
<nuxt-link to="/sns"><p class="header-link">social media</p></nuxt-link>
|
||||
<a href="//blog.nanao.moe"><p class="header-link">blog</p></a>
|
||||
<a href="//blog.nanao.moe"><p class="header-link">blog</p></a> -->
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-16"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -25,8 +24,7 @@ export default {
|
||||
|
||||
<style>
|
||||
header {
|
||||
@apply h-16 fixed top-0 w-full z-10 flex flex-row justify-start items-center px-4;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
@apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
|
||||
}
|
||||
.header-link {
|
||||
@apply text-white text-lg mx-2;
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<Header/>
|
||||
<div class="content">
|
||||
<nuxt />
|
||||
<div>
|
||||
<div class="main">
|
||||
<div class="card">
|
||||
<Header />
|
||||
<div class="content">
|
||||
<nuxt />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -22,5 +26,24 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
height: 100vh;
|
||||
}
|
||||
.card {
|
||||
@apply text-white;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@screen md {
|
||||
.main {
|
||||
padding: 5% 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply px-8 overflow-y-auto;
|
||||
height: calc(100% - 8rem);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
|
||||
<template>
|
||||
<div class="card absolute right-0 bottom-0 w-full sm:w-2/3 md:w-1/2 lg:w-2/5 xl:w-1/3">
|
||||
<div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-4xl py-1">Damillora</h1>
|
||||
<h2 class="text-xl py-1">an idol fan with a strange music to it</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user