feat(components): add footer component
This commit is contained in:
parent
cfb1f69ffb
commit
1dcb1ae3f9
GPG Key ID:
924A5F6AF051E87C
20
components/layouts/footer.vue
Normal file
20
components/layouts/footer.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup></script>
|
||||
<div>
|
||||
<p>
|
||||
© Rockfic.com, since 2004. Rockfic.com is in no way associated with any
|
||||
band listed on this website. Rockfic.com is entertainment. All stories
|
||||
contained on this site are fictional, which means that while the
|
||||
characters may be loosely based on the public personas of real people,
|
||||
the stories themselves are completely ungrounded from reality and are in
|
||||
no way meant to reflect the private lives, actual practices, or
|
||||
activities of any persons named. Rockfic.com will remove a work of
|
||||
fiction if an individual named within requests its removal.<br>
|
||||
For site problems and/or bugs, contact <a style="font-weight: bold" href="mailto:bugs@rockfic.com">bugs@rockfic.com</a>.<br>
|
||||
For everything else, contact <a href="mailto:admin@rockfic.com">admin@rockfic.com</a>.
|
||||
</p>
|
||||
<b>Copyright Notice</b><br>
|
||||
All content on this site is copyright of its respective author. You
|
||||
may not, except with our express written permission, distribute or
|
||||
commercially exploit the content. Nor may you transmit it or store it in
|
||||
any other website or other form of electronic retrieval system.
|
||||
</div>
|
||||
@ -1,59 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import {theme} from "ant-design-vue"
|
||||
import navbar from "~/components/layouts/navbar.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: token.colorPrimary, 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>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user