🎨 icons, colors, footers, versions

README.md

@@ -1,4 +1,4 @@
-# Pennypincher
+![pennypincher](app/public/splash.svg)
 
 ## 🔧 Installation
 1. Create your own `.env` file out of `.env.example` found in the root folder.

app/app.vue

@@ -9,7 +9,9 @@ useHead({
 
 <template>
   <AppHeader />
-  <NuxtLoadingIndicator />
+  <NuxtLoadingIndicator
+    color="hsl(var(--acc))"
+  />
   <div id="main-wrapper">
     <NuxtPage />
   </div>

app/assets/css/main.css

@@ -141,6 +141,10 @@ thead th, tfoot th{
 }
 .flex-right{
   flex-direction: row;
+
+  &.backwards {
+    flex-direction: row-reverse;
+  }
 }
 .flex-down{
   flex-direction: column;

app/components/AppFooter.vue

@@ -1,13 +1,43 @@
 <script setup lang="ts">
+import pkg from "../package.json"
+
 const appConfig = useAppConfig()
+
+const displayYears = () => {
+  const output = [2024, (new Date()).getFullYear()]
+  return (output[0] == output[1])
+    ? output[0].toString()
+    : `${output[0]} – ${output[1]}`
+}
 </script>
 
 <template>
   <footer>
     <AppSegment>
-      <template>
-        <span>{{ appConfig.title }}</span>
-      </template>
+      <div id="footer-container" class="flex-right backwards">
+        <AppLogo small />
+        <div class="texts flex-right">
+          <span>{{ appConfig.title }}, v. {{ pkg.version }}</span>
+          <span class="ghost">Built by <a href="http://wpww.pl/" target="_blank">WPWW</a></span>
+          <span>
+            <a href="https://creativecommons.org/licenses/by-sa/3.0/pl/">&copy; CC BY-SA 3.0</a> {{ displayYears() }}
+          </span>
+        </div>
+      </div>
     </AppSegment>
   </footer>
-</template>
+</template>
+
+<style scoped>
+#footer-container {
+  align-items: center;
+}
+
+.texts {
+  text-align: right;
+
+  & span {
+    display: block;
+  }
+}
+</style>

app/components/AppLogo.vue

@@ -1,8 +1,26 @@
+<script setup lang="ts">
+const params = defineProps<{
+  small?: boolean,
+}>()
+</script>
+
 <template>
-  <img src="" alt="logo">
+  <img
+    src="/icon.svg" alt="logo"
+    :class="[
+      small && 'small',
+    ].filter(Boolean).join(' ')"
+  >
 </template>
 
 <style scoped>
+img {
+  max-width: 3.5em;
+
+  &.small {
+    height: 1.75em;
+  }
+}
 footer{
   background-color: black;
   color: white;

app/nuxt.config.ts

@@ -3,6 +3,13 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
   app: {
-    pageTransition: { name: "slide", mode: "out-in" }
+    pageTransition: { name: "slide", mode: "out-in" },
+    head: {
+      link: [{
+        rel: "icon",
+        href: "icon.svg",
+        type: "image/svg+xml",
+      }]
+    }
   },
 })

app/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "nuxt-app",
-  "private": true,
+  "name": "pennypincher",
   "type": "module",
+  "version": "0.0.1",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -21,4 +21,4 @@
   "devDependencies": {
     "@nuxtjs/date-fns": "^1.5.0"
   }
-}
+}