add pretty animations to nav

This commit is contained in:
eggy 2022-07-22 16:08:55 -04:00
parent 35d37d1a2a
commit cc9f204174
6 changed files with 69 additions and 22 deletions

View File

@ -1,3 +1,15 @@
<script setup lang="ts"></script>
<template>
<div></div>
<div class="container">
<slot />
</div>
</template>
<style scoped>
.container {
width: 10rem;
height: 5rem;
border: 0.5rem solid pink;
}
</style>

View File

@ -9,7 +9,10 @@ import ColourPicker from "./ColourPicker.vue";
<li><a href="/blog">Blog</a></li>
<li><a href="/stories">Stories</a></li>
</ul>
<ColourPicker />
<div class="flex items-center">
<ColourPicker />
<div class="hamburger">HAMBURGER</div>
</div>
</nav>
</template>
@ -22,7 +25,6 @@ nav {
}
ul {
width: 100%;
display: flex;
align-items: center;
gap: 3rem;
@ -35,4 +37,37 @@ li.home-text {
font-size: x-large;
font-weight: bold;
}
.hamburger {
height: 1px;
width: 1px;
opacity: 0;
}
* {
transition: all 0.2s ease;
}
@media screen and (max-width: 510px) {
.hamburger {
display: flex;
padding-left: 1rem;
height: unset;
width: unset;
opacity: 1;
}
li:not(.home-text) {
height: 1px;
width: 1px;
opacity: 0;
/* accessibility? screw accessibility
* i want my pretty animations
*/
}
ul {
gap: 0rem;
}
}
</style>

View File

@ -1,12 +0,0 @@
<template>
<div class="flex flex-col items-center w-full h-full">
<slot />
</div>
</template>
<style scoped>
.dark-mode body {
background-color: #091a28;
color: #ebf4f1;
}
</style>

View File

@ -36,8 +36,10 @@ html.dark::before {
transform: translateX(0);
}
.dark-mode body {
background-color: #091a28;
color: #ebf4f1;
main {
width: 80%;
max-width: 60rem;
height: 100%;
padding-top: 2rem;
}
</style>

View File

@ -11,9 +11,8 @@
</template>
<style>
article,
main {
width: 90%;
article {
width: 80%;
height: 100%;
padding-top: 2rem;
}

View File

@ -1,3 +1,14 @@
<script setup lang="ts"></script>
<template>HELLO</template>
<template>
<main>
<h1>Hello!</h1>
<HomeStatBox> Box 1 </HomeStatBox>
</main>
</template>
<style scoped>
main {
display: flex;
}
</style>