95 lines
1.4 KiB
Vue
95 lines
1.4 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="content" v-dragscroll:nochildscroll>
|
|
<router-view class="page" />
|
|
</div>
|
|
<nav>
|
|
<router-link to="/">chart</router-link>
|
|
<router-link to="/discover">discover</router-link>
|
|
<a href="/docs">api</a>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Daisy;
|
|
src: url("@/assets/HeadUpDaisy.ttf");
|
|
}
|
|
|
|
* {
|
|
font-family: Daisy;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #030f0a;
|
|
color: #aaf0d1;
|
|
}
|
|
|
|
canvas {
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
@keyframes movebg {
|
|
from {
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
to {
|
|
background-position: 0px 1080px;
|
|
}
|
|
}
|
|
|
|
.app {
|
|
height: 100%;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
flex-direction: column;
|
|
}
|
|
.content {
|
|
height: 100%;
|
|
flex-basis: 1;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
background-image: url("../public/images/background.webp");
|
|
animation-name: movebg;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 30s;
|
|
}
|
|
|
|
nav {
|
|
flex-basis: 1;
|
|
flex-shrink: 1;
|
|
border-top-style: solid;
|
|
padding: 1em;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
font-size: large;
|
|
color: #aaf0d1;
|
|
}
|
|
|
|
nav a:focus,
|
|
nav a:hover {
|
|
color: #f0d1aa;
|
|
}
|
|
</style>
|