next/layouts/default.vue

76 lines
1.7 KiB
Vue

<script setup lang="ts">
import { theme } from "ant-design-vue";
import navbar from "~/components/layouts/navbar.vue";
import cfooter from "~/components/layouts/footer.vue";
import icon from "~/components/icon.vue";
const { useToken } = theme;
const { token } = useToken();
const { data: totals }: any = await useApiFetch("/totals");
let darko = inject("dark");
</script>
<template>
<a-layout style="padding: 10px; background: unset !important">
<a-layout-header class="alayhead">
<div style="display: flex; align-items: center">
<a-typography-title
class="siteTitle"
:style="{
color: '#ff2883',
fontFamily: 'jandles',
fontSize: '5em',
margin: 0,
}"
>
Rockfic
</a-typography-title>
<div style="display: flex; flex-direction: column">
<a-typography-text> Band fiction that rocks </a-typography-text>
<br />
<a-typography-text type="secondary">
With {{ totals.stories }} stories by {{ totals.authors }} authors
</a-typography-text>
</div>
<navbar />
</div>
</a-layout-header>
<a-layout-content>
<slot />
<a-float-button
type="primary"
:style="{ height: '50px', width: '50px' }"
tooltip="Post a new Story"
>
<template #icon>
<icon istyle="regular" name="file-plus" />
</template>
</a-float-button>
</a-layout-content>
<a-layout-footer>
<cfooter />
</a-layout-footer>
</a-layout>
</template>
<style scoped>
.siteTitle {
min-width: max-content;
font-weight: normal;
/* float: left; */
}
.alayhead {
display: flex;
flex-direction: row;
align-items: center;
/* background: inherit !important; */
height: unset !important;
margin-bottom: 1.5em;
}
.alayhead > div > * + * {
margin-left: 1.2em;
}
</style>