layout fixes

This commit is contained in:
Believethehype
2024-01-22 17:12:31 +01:00
parent 694e042194
commit d35598453f
9 changed files with 142 additions and 173 deletions

View File

@@ -1,29 +1,20 @@
<script setup>
import Nip07 from "@/components/Nip07.vue";
import Donate from "@/components/Donate.vue"
import {isVisible} from "bootstrap/js/src/util/index.js";
</script>
<template>
<div className="navbar bg-base-100">
<div className="flex-none">
<!-- <button className="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
test</button>-->
</div>
<div className="flex-1">
<router-link class="menu" to="/">Noogle</router-link>
<router-link class="menu" to="/about">About</router-link>
<router-link class="menu" to="/nip89">DVMs</router-link>
<router-link class="menu" to="/nip89">DVMs</router-link>
<div className="flex-none">
</div>
</div>
<Nip07/>
@@ -37,19 +28,19 @@ import Nip07 from "@/components/Nip07.vue";
</header>
<main>
<main >
<router-view />
<slot />
<slot/>
</main>
<aside>
<slot name="aside" />
<!-- <AppFooter /> -->
</aside>
</div>
<footer>
<Donate style="margin-top: 4px"/>
</footer>
</div>
</template>
<style scoped lang="scss">
@@ -58,24 +49,40 @@ import Nip07 from "@/components/Nip07.vue";
grid-template-areas:
"header"
"main"
"aside";
"aside"
"footer";
header {
grid-area: header;
margin-top: 30px;
}
main {
grid-area: main;
margin-top: 10px;
margin-bottom: 100px;
padding: 20px;
}
footer{
position: fixed;
bottom:0;
background: rgba(0, 0, 0, 0.5);;
grid-area: footer;
width: 100vw;
height: 32px;
z-index: 10;
text-align: center;
}
aside {
grid-area: aside;
margin-top: 10px;
padding: 20px;
}
.router-link-exact-active{
color: rgba(255, 255, 255, 0.87);
}
@@ -92,7 +99,8 @@ import Nip07 from "@/components/Nip07.vue";
@media (min-width: 768px) {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: "header main aside";
grid-template-areas: "header main aside footer";
}
}
</style>