feat: add AttributionsView

src/components/SiteNavigation.vue

@@ -83,6 +83,10 @@ import { RouterLink } from "vue-router";
       }
     }
 
+    &:last-child {
+      margin: var(--navigation-link-last-child-margin);
+    }
+
     > * {
       flex: 1 0 0;
     }

src/router/index.ts

@@ -5,6 +5,7 @@ import HomeIcon from "@/assets/icons/HomeIcon.vue";
 import IdCardIcon from "@/assets/icons/IdCardIcon.vue";
 import PaletteIcon from "@/assets/icons/PaletteIcon.vue";
 import BriefcaseIcon from "@/assets/icons/BriefcaseIcon.vue";
+import CircleInfoIcon from "@/assets/icons/CircleInfoIcon.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -48,6 +49,15 @@ const router = createRouter({
         icon: BriefcaseIcon,
       },
     },
+    {
+      path: "/attributions",
+      name: "attributions",
+      component: () => import("@/views/AttributionsView.vue"),
+      meta: {
+        title: "Attributions",
+        icon: CircleInfoIcon
+      }
+    }
   ],
 });
 

src/views/AttributionsView.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import TextBlock from "@/components/TextBlock.vue";
+</script>
+
+<template>
+  <TextBlock>
+    <h1>{{ $route.meta.title }}</h1>
+    <h2>Artwork</h2>
+    <p>
+      Viktor Ref & Frontal Shot:
+      <a href="https://twitter.com/sabertoofs">sabertoofs</a>
+    </p>
+
+    <h2>Icons</h2>
+    <p>Navigation Icons: <a href="https://fontawesome.com">Font Awesome</a></p>
+
+    <h2>Fonts</h2>
+    <h3>Heading Font</h3>
+    <p>
+      <a href="https://github.com/MichalSahar/Secular">Secular One</a> by
+      <a href="https://github.com/MichalSahar">Michal Sahar</a>
+    </p>
+    <h3>Copy Font</h3>
+    <p>
+      <a href="https://antonkoovit.com/typefaces/arvo">Arvo</a> by
+      <a href="https://antonkoovit.com/">Anton Koovit</a>
+    </p>
+  </TextBlock>
+</template>
+
+<style lang="scss"></style>