feat(components): add footer component

components/layouts/footer.vue

@@ -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>

layouts/default.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
-	import {theme} from "ant-design-vue"
+	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 { useToken } = theme;
-	const {token} = useToken()
+	const { token } = useToken();
 
-	const {data: totals}: any = await useApiFetch("/totals")
+	const { data: totals }: any = await useApiFetch("/totals");
 
-	let darko = inject("dark")
+	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;">
+			<div style="display: flex; align-items: center">
-				<a-typography-title class="siteTitle" :style="{color: token.colorPrimary, fontFamily: 'jandles', fontSize: '5em', margin: 0}">
+				<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;">
+				<div style="display: flex; flex-direction: column">
-					<a-typography-text>
+					<a-typography-text> Band fiction that rocks </a-typography-text>
-						Band fiction that rocks
-					</a-typography-text>
 					<br />
 					<a-typography-text type="secondary">
 						With {{ totals.stories }} stories by {{ totals.authors }} authors
@@ -30,14 +37,22 @@
 		</a-layout-header>
 		<a-layout-content>
 			<slot />
-			<a-float-button type="primary" :style="{height: '50px', width: '50px'}" tooltip="Post a new Story">
+			<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;
@@ -49,10 +64,11 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		background: inherit !important; 
+		/* background: inherit !important;  */
 		height: unset !important;
 		margin-bottom: 1.5em;
 	}
+
 	.alayhead > div > * + * {
 		margin-left: 1.2em;
 	}