makin look nice
This commit is contained in:
@@ -1,15 +1,6 @@
|
||||
<template>
|
||||
<nav class="no-print flex-row">
|
||||
<RouterLink to="/"><p>HOME</p></RouterLink>
|
||||
<nav class="flex-row">
|
||||
<RouterLink class="bdr-2" to="/"><h1>HOME</h1></RouterLink>
|
||||
<!-- <RouterLink to="/cv"><h1>CV</h1></RouterLink> -->
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
nav {
|
||||
height: 10vh;
|
||||
}
|
||||
h1 {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
38
nginx/vue/src/components/backgrounds/Halftone.vue
Normal file
38
nginx/vue/src/components/backgrounds/Halftone.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="halftone" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.halftone {
|
||||
--dot_size: 1px;
|
||||
--bg_size: 5px;
|
||||
--bg_pos: calc(var(--bg_size) / 2);
|
||||
--blur: 0%;
|
||||
--dot_color: #044;
|
||||
--bg_color: #114;
|
||||
|
||||
background-color: var(--bg_color);
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
var(--dot_color) var(--dot_size),
|
||||
transparent var(--blur)
|
||||
);
|
||||
background-size: var(--bg_size) var(--bg_size);
|
||||
background-position: 0 0;
|
||||
|
||||
mask-image: linear-gradient(
|
||||
30deg,
|
||||
rgba(1, 1, 1, 1) 0%,
|
||||
rgba(1, 1, 1, 0.85) 100%
|
||||
);
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<img src="/img/epic.jpeg" />
|
||||
<div class="flex-row">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Color</td>
|
||||
<td>Aqua</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pet</td>
|
||||
<td>Cat</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Color</td>
|
||||
<td>Blue</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -57,6 +57,9 @@ onMounted(() => {
|
||||
<button v-if="!leftCap" @click="prevPost">Prev</button>
|
||||
<button v-if="!rightCap" @click="nextPost">Next</button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2>Can't fetch from the db yo</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,34 +1,11 @@
|
||||
<template>
|
||||
<div class="fill flex-row">
|
||||
<img src="/img/epic.jpeg" class="img" />
|
||||
<div class="fill flex-col">
|
||||
<div class="div">
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<p>Hello</p>
|
||||
<h1>Welcome</h1>
|
||||
<p>This is my website, currently under construction.</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
<p>THANKS FOR VISITING ^_^</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.div {
|
||||
flex: 7;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<RouterLink to="/cv">
|
||||
<div class="flex-col">
|
||||
<RouterLink class="bdr-2" to="/cv">
|
||||
<h1>CV</h1>
|
||||
</RouterLink>
|
||||
<RouterLink to="/admin">
|
||||
<RouterLink class="bdr-2" to="/admin">
|
||||
<h1>ADMIN</h1>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 2px;
|
||||
}
|
||||
p {
|
||||
background: var(--bg_primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user