From 35f53431493daa7d069bf1f3a1291addaf328342 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 4 Sep 2023 20:06:56 +0200
Subject: [PATCH] style: run formatter

---
 src/App.vue                         | 60 ++++++++++-----------
 src/components/AttributionTable.vue | 28 +++++-----
 src/components/ColorTable.vue       | 31 ++++++-----
 src/components/DataTable.vue        | 12 ++---
 src/components/LanguageButton.vue   |  2 +-
 src/components/LinkButton.vue       |  6 +--
 src/components/ModalDialog.vue      | 26 ++++-----
 src/components/NavigationItem.vue   |  8 +--
 src/components/RefImage.vue         |  9 ++--
 src/components/TimelineItem.vue     |  8 ++-
 src/components/TimelineList.vue     |  3 +-
 src/components/WelcomeHeader.vue    |  8 +--
 src/lang/index.ts                   |  8 +--
 src/main.ts                         | 30 +++++------
 src/router/index.ts                 | 82 ++++++++++++++--------------
 src/scss/base.scss                  | 47 ++++++----------
 src/scss/fontfaces.scss             |  4 +-
 src/scss/main.scss                  | 11 ++--
 src/views/AttributionsView.vue      | 84 +++++++++++------------------
 src/views/CareerPathView.vue        |  4 +-
 20 files changed, 207 insertions(+), 264 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 112ef2e..9230c4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,49 +1,45 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { RouterView } from "vue-router";
-import { version } from "../package.json";
-import router from "@/router";
+import { ref } from 'vue'
+import { RouterView } from 'vue-router'
+import { version } from '../package.json'
+import router from '@/router'
 
-import ModalDialog from "@/components/ModalDialog.vue";
-import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
-import LinkButton from "@/components/LinkButton.vue";
-import SiteNavigation from "@/components/SiteNavigation.vue";
-import NavigationItem from "@/components/NavigationItem.vue";
-import LanguageButton from "@/components/LanguageButton.vue";
-import SiteFooter from "@/components/SiteFooter.vue";
+import ModalDialog from '@/components/ModalDialog.vue'
+import LocaleSwitcher from '@/components/LocaleSwitcher.vue'
+import LinkButton from '@/components/LinkButton.vue'
+import SiteNavigation from '@/components/SiteNavigation.vue'
+import NavigationItem from '@/components/NavigationItem.vue'
+import LanguageButton from '@/components/LanguageButton.vue'
+import SiteFooter from '@/components/SiteFooter.vue'
 
-import LanguageIcon from "@/assets/icons/LanguageIcon.vue";
+import LanguageIcon from '@/assets/icons/LanguageIcon.vue'
 
 const locales = [
-  { code: "en", name: "English", flag: "🇬🇧" },
-  { code: "de", name: "Deutsch", flag: "🇩🇪" },
-];
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'de', name: 'Deutsch', flag: '🇩🇪' }
+]
 
-const langswitcher = ref<InstanceType<typeof ModalDialog>>();
+const langswitcher = ref<InstanceType<typeof ModalDialog>>()
 
 const showModal = () => {
-  langswitcher.value?.showModal();
-};
+  langswitcher.value?.showModal()
+}
 
 const close = () => {
-  langswitcher.value?.close();
-};
+  langswitcher.value?.close()
+}
 </script>
 
 <template>
   <ModalDialog id="lang-select" ref="langswitcher">
-    <template #heading>{{ $t("langswitcher.title") }}</template>
+    <template #heading>{{ $t('langswitcher.title') }}</template>
     <template #message>
-      <p>{{ $t("langswitcher.prompt") }}</p>
-      <LocaleSwitcher
-        id="locale-switch"
-        v-model="$i18n.locale"
-        :locales="locales"
-      />
+      <p>{{ $t('langswitcher.prompt') }}</p>
+      <LocaleSwitcher id="locale-switch" v-model="$i18n.locale" :locales="locales" />
     </template>
     <template #buttons>
       <LinkButton @click.prevent="close()">
-        {{ $t("langswitcher.buttonClose") }}
+        {{ $t('langswitcher.buttonClose') }}
       </LinkButton>
     </template>
   </ModalDialog>
@@ -54,7 +50,9 @@ const close = () => {
       :key="idx"
       :icon="route.meta?.icon"
       :href="route.path"
-    >{{ $t(`${route.meta?.title}`) }}</NavigationItem>
+    >
+      {{ $t(`${route.meta?.title}`) }}
+    </NavigationItem>
   </SiteNavigation>
 
   <main>
@@ -64,7 +62,5 @@ const close = () => {
     <RouterView />
   </main>
 
-  <SiteFooter>
-    v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim
-  </SiteFooter>
+  <SiteFooter>v{{ version }} &copy; {{ new Date().getFullYear() }} Sebin Nyshkim</SiteFooter>
 </template>
diff --git a/src/components/AttributionTable.vue b/src/components/AttributionTable.vue
index 3b16afc..e2e3737 100644
--- a/src/components/AttributionTable.vue
+++ b/src/components/AttributionTable.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import FAIcon from "@/assets/icons/FurAffinityIcon.vue";
-import TwitterIcon from "@/assets/icons/TwitterIcon.vue";
+import FAIcon from '@/assets/icons/FurAffinityIcon.vue'
+import TwitterIcon from '@/assets/icons/TwitterIcon.vue'
 
 interface ArtistLink {
-  furaffinity?: string;
-  twitter?: string;
+  furaffinity?: string
+  twitter?: string
 }
 
 interface Attribution {
-  artwork: string;
-  artist: string;
-  links: ArtistLink;
+  artwork: string
+  artist: string
+  links: ArtistLink
 }
 
 interface Props {
-  attributions: Attribution[];
+  attributions: Attribution[]
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
@@ -25,19 +25,15 @@ defineProps<Props>();
     <thead class="attribution-table__head">
       <tr class="attribution-table__row">
         <th class="attribution-table__heading artwork">
-          {{ $t("attributions.artwork.headings[0]") }}
+          {{ $t('attributions.artwork.headings[0]') }}
         </th>
         <th class="attribution-table__heading artist">
-          {{ $t("attributions.artwork.headings[1]") }}
+          {{ $t('attributions.artwork.headings[1]') }}
         </th>
       </tr>
     </thead>
     <tbody class="attribution-table__body">
-      <tr
-        class="attribution-table__row"
-        v-for="(attrib, idx) in attributions"
-        :key="idx"
-      >
+      <tr class="attribution-table__row" v-for="(attrib, idx) in attributions" :key="idx">
         <td class="attribution-table__cell artwork">
           <img :src="attrib.artwork" alt="Image attribution" />
         </td>
diff --git a/src/components/ColorTable.vue b/src/components/ColorTable.vue
index 76523e6..529cfbb 100644
--- a/src/components/ColorTable.vue
+++ b/src/components/ColorTable.vue
@@ -1,33 +1,30 @@
 <script setup lang="ts">
 interface ColorDict {
-  name: string;
-  value: string;
+  name: string
+  value: string
 }
 
 interface Props {
-  colors: ColorDict[];
+  colors: ColorDict[]
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
   <table class="color-table">
     <thead class="color-table__head">
       <tr class="color-table__row">
-        <th class="color-table__heading name">{{ $t("data.colors.headings[0]") }}</th>
-        <th class="color-table__heading value">{{ $t("data.colors.headings[1]") }}</th>
-        <th class="color-table__heading color">{{ $t("data.colors.headings[2]") }}</th>
+        <th class="color-table__heading name">{{ $t('data.colors.headings[0]') }}</th>
+        <th class="color-table__heading value">{{ $t('data.colors.headings[1]') }}</th>
+        <th class="color-table__heading color">{{ $t('data.colors.headings[2]') }}</th>
       </tr>
     </thead>
     <tbody class="color-table__body">
       <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
         <td class="color-table__cell name">{{ $t(color.name) }}</td>
         <td class="color-table__cell value">{{ color.value }}</td>
-        <td
-          class="color-table__cell color"
-          :style="{ 'background-color': color.value }"
-        ></td>
+        <td class="color-table__cell color" :style="{ 'background-color': color.value }"></td>
       </tr>
     </tbody>
   </table>
@@ -47,8 +44,16 @@ defineProps<Props>();
     }
 
     &.value {
-      font-family: Menlo, JetBrains Mono, Source Code Pro, Monaco, Ubuntu Mono,
-        Roboto Mono, Cascadia Code, Consolas, monospace;
+      font-family:
+        Menlo,
+        JetBrains Mono,
+        Source Code Pro,
+        Monaco,
+        Ubuntu Mono,
+        Roboto Mono,
+        Cascadia Code,
+        Consolas,
+        monospace;
       text-align: center;
     }
   }
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 13905ac..897a60a 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
 interface Props {
-  headings: string[];
-  data: string[][];
+  headings: string[]
+  data: string[][]
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
   <table class="data-table">
     <thead class="data-table__head">
       <tr class="data-table__row">
-        <th
-          class="data-table__heading"
-          v-for="(heading, idx) in headings"
-          :key="idx"
-        >
+        <th class="data-table__heading" v-for="(heading, idx) in headings" :key="idx">
           {{ $t(heading) }}
         </th>
       </tr>
diff --git a/src/components/LanguageButton.vue b/src/components/LanguageButton.vue
index 6efe436..15100c4 100644
--- a/src/components/LanguageButton.vue
+++ b/src/components/LanguageButton.vue
@@ -15,7 +15,7 @@
   &:before {
     position: absolute;
     inset: 0.325rem 0 0.7rem 0;
-    content: "";
+    content: '';
     background-color: var(--color-background);
     border-radius: 0.3rem;
   }
diff --git a/src/components/LinkButton.vue b/src/components/LinkButton.vue
index 1d4b137..51b39d6 100644
--- a/src/components/LinkButton.vue
+++ b/src/components/LinkButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 interface Props {
-  href?: string;
-  download?: boolean | any;
+  href?: string
+  download?: boolean | any
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
index c44ff7b..6446a81 100644
--- a/src/components/ModalDialog.vue
+++ b/src/components/ModalDialog.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 
 interface Props {
-  id: string;
+  id: string
 }
 
-defineProps<Props>();
+defineProps<Props>()
 
-const modal = ref<HTMLDialogElement>();
+const modal = ref<HTMLDialogElement>()
 
 const showModal = () => {
-  modal.value?.showModal();
-  document.body.inert = true;
-  document.body.classList.add("scroll-lock");
-};
+  modal.value?.showModal()
+  document.body.inert = true
+  document.body.classList.add('scroll-lock')
+}
 
 const close = () => {
-  modal.value?.close();
-  document.body.inert = false;
-  document.body.classList.remove("scroll-lock");
-};
+  modal.value?.close()
+  document.body.inert = false
+  document.body.classList.remove('scroll-lock')
+}
 
-defineExpose({ showModal, close });
+defineExpose({ showModal, close })
 </script>
 
 <template>
diff --git a/src/components/NavigationItem.vue b/src/components/NavigationItem.vue
index 626807c..e34facd 100644
--- a/src/components/NavigationItem.vue
+++ b/src/components/NavigationItem.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
+import { RouterLink } from 'vue-router'
 
 interface Props {
-  icon: unknown | object;
-  href: string;
+  icon: unknown | object
+  href: string
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
diff --git a/src/components/RefImage.vue b/src/components/RefImage.vue
index 901b7d6..5fa06bb 100644
--- a/src/components/RefImage.vue
+++ b/src/components/RefImage.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 interface Props {
-  dropshadow?: boolean;
+  dropshadow?: boolean
 }
 
-defineProps<Props>();
+defineProps<Props>()
 </script>
 
 <template>
   <figure class="figure">
-    <picture
-      class="figure__image"
-      :class="{ 'figure__image--dropshadow': dropshadow }"
-    >
+    <picture class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
       <slot></slot>
     </picture>
 
diff --git a/src/components/TimelineItem.vue b/src/components/TimelineItem.vue
index b0266a3..5eb66a4 100644
--- a/src/components/TimelineItem.vue
+++ b/src/components/TimelineItem.vue
@@ -26,12 +26,11 @@
     position: relative;
 
     &:not(:last-child):before {
-      content: "";
+      content: '';
       position: absolute;
       inset: var(--timeline-stroke-position-odd);
       height: var(--timeline-stroke-length);
-      border-left: var(--timeline-stroke-thickness) solid
-        var(--timeline-stroke-color);
+      border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
     }
 
     &:nth-child(odd) {
@@ -58,8 +57,7 @@
       background-color: var(--timeline-circle-background);
 
       margin: 0;
-      border: var(--timeline-stroke-thickness) solid
-        var(--timeline-stroke-color);
+      border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
       border-radius: 100%;
       padding: var(--timeline-circle-padding);
 
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 8b21a1d..b5513f3 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -10,8 +10,7 @@
   position: relative;
 
   margin: 0 auto;
-  padding: 0 var(--container-spacing-right-safe) 0
-    var(--container-spacing-left-safe);
+  padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
 
   list-style: none;
 
diff --git a/src/components/WelcomeHeader.vue b/src/components/WelcomeHeader.vue
index e178a53..701491b 100644
--- a/src/components/WelcomeHeader.vue
+++ b/src/components/WelcomeHeader.vue
@@ -2,12 +2,8 @@
   <header class="welcome">
     <div class="welcome__image">
       <picture>
-        <source
-          srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset"
-        />
-        <source
-          srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset"
-        />
+        <source srcset="@/assets/viktor-avatar.png?w=400;800&format=avif&quality=75&as=srcset" />
+        <source srcset="@/assets/viktor-avatar.png?w=400;800&format=webp&quality=100&as=srcset" />
         <img src="@/assets/viktor-avatar.png?w=400&format=png" alt="Viktor Avatar" />
       </picture>
     </div>
diff --git a/src/lang/index.ts b/src/lang/index.ts
index f9fa2a5..18291b4 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -1,7 +1,7 @@
-import en from "./translations/en.json";
-import de from "./translations/de.json";
+import en from './translations/en.json'
+import de from './translations/de.json'
 
 export default {
   en,
-  de,
-};
+  de
+}
diff --git a/src/main.ts b/src/main.ts
index 5a8fb66..8731bcf 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,21 +1,21 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
-import { createI18n } from "vue-i18n";
-import messages from "./lang";
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { createI18n } from 'vue-i18n'
+import messages from './lang'
 
-import "normalize.css";
-import "@/scss/main.scss";
+import 'normalize.css'
+import '@/scss/main.scss'
 
 const i18n = createI18n({
-  locale: "en",
-  fallbackLocale: "en",
-  messages,
-});
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages
+})
 
-const app = createApp(App);
+const app = createApp(App)
 
-app.use(router);
-app.use(i18n);
+app.use(router)
+app.use(i18n)
 
-app.mount("body");
+app.mount('body')
diff --git a/src/router/index.ts b/src/router/index.ts
index bca3c83..a879e36 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,64 +1,64 @@
-import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '@/views/HomeView.vue'
 
-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";
+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),
   scrollBehavior: () => {
-    return { top: 0 };
+    return { top: 0 }
   },
   routes: [
     {
-      path: "/",
-      name: "home",
+      path: '/',
+      name: 'home',
       component: HomeView,
       meta: {
-        title: "nav.home",
-        icon: HomeIcon,
-      },
+        title: 'nav.home',
+        icon: HomeIcon
+      }
     },
     {
-      path: "/general",
-      name: "general",
-      component: () => import("@/views/GeneralView.vue"),
+      path: '/general',
+      name: 'general',
+      component: () => import('@/views/GeneralView.vue'),
       meta: {
-        title: "nav.general",
-        icon: IdCardIcon,
-      },
+        title: 'nav.general',
+        icon: IdCardIcon
+      }
     },
     {
-      path: "/anatomy",
-      name: "anatomy",
-      component: () => import("@/views/AnatomyView.vue"),
+      path: '/anatomy',
+      name: 'anatomy',
+      component: () => import('@/views/AnatomyView.vue'),
       meta: {
-        title: "nav.anatomy",
-        icon: PaletteIcon,
-      },
+        title: 'nav.anatomy',
+        icon: PaletteIcon
+      }
     },
     {
-      path: "/career-path",
-      name: "career-path",
-      component: () => import("@/views/CareerPathView.vue"),
+      path: '/career-path',
+      name: 'career-path',
+      component: () => import('@/views/CareerPathView.vue'),
       meta: {
-        title: "nav.careerPath",
-        icon: BriefcaseIcon,
-      },
+        title: 'nav.careerPath',
+        icon: BriefcaseIcon
+      }
     },
     {
-      path: "/attributions",
-      name: "attributions",
-      component: () => import("@/views/AttributionsView.vue"),
+      path: '/attributions',
+      name: 'attributions',
+      component: () => import('@/views/AttributionsView.vue'),
       meta: {
-        title: "nav.attributions",
-        icon: CircleInfoIcon,
-      },
-    },
-  ],
-});
+        title: 'nav.attributions',
+        icon: CircleInfoIcon
+      }
+    }
+  ]
+})
 
-export default router;
+export default router
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 201f55f..a783f62 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,4 +1,4 @@
-@import "fontfaces";
+@import 'fontfaces';
 
 /* theme colors */
 :root {
@@ -33,8 +33,8 @@
 
 /* general purpose variables */
 :root {
-  --font-family-copy: "Arvo", sans-serif;
-  --font-family-headings: "Secular One", serif;
+  --font-family-copy: 'Arvo', sans-serif;
+  --font-family-headings: 'Secular One', serif;
 
   --font-size: 18px;
   --text-line-height: 1.5;
@@ -54,8 +54,7 @@
   --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
   --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
 
-  --textblock-padding: 0 var(--container-spacing-right-safe) 0
-    var(--container-spacing-left-safe);
+  --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
 
   --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
     var(--container-spacing-left-safe);
@@ -75,19 +74,14 @@
   --navigation-height: auto;
   --navigation-padding: 0 0 0 env(safe-area-inset-left);
 
-  --navigation-cutout: 0 0
-    calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
-  --navigation-cutout-page-background: calc(
-    var(--navigation-size) + env(safe-area-inset-bottom)
-  );
+  --navigation-cutout: 0 0 calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
+  --navigation-cutout-page-background: calc(var(--navigation-size) + env(safe-area-inset-bottom));
   --navigation-cutout-main: 0;
 
   --navigation-link-display: none;
   --navigation-link-flex: 1 0 var(--navigation-size);
   --navigation-link-justify: center;
-  --navigation-link-height: calc(
-    var(--navigation-size) + env(safe-area-inset-bottom)
-  );
+  --navigation-link-height: calc(var(--navigation-size) + env(safe-area-inset-bottom));
   --navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
   --navigation-link-icon-size: calc(var(--navigation-size) / 2);
   --navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
@@ -118,13 +112,10 @@
   --timeline-item-margin-even: var(--timeline-item-margin);
   --timeline-item-text-align-even: left;
   --timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
-  --timeline-item-content-padding-even: var(
-    --timeline-item-content-padding-odd
-  );
+  --timeline-item-content-padding-even: var(--timeline-item-content-padding-odd);
 
   --table-border-radius: 1rem;
-  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
-    var(--container-spacing-left-safe);
+  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
   --table-cell-padding: 0.25rem 0.5rem;
 }
 
@@ -225,11 +216,9 @@
     --page-background-image-max-height: 100vh;
 
     --color-table-color-cell-width: 10rem;
-    --textblock-padding: 0 var(--container-spacing-right-safe) 0
-      var(--container-spacing-left-safe);
+    --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
 
-    --navigation-cutout: 0 0 0
-      calc(var(--navigation-size) + env(safe-area-inset-left));
+    --navigation-cutout: 0 0 0 calc(var(--navigation-size) + env(safe-area-inset-left));
     --navigation-cutout-page-background: 0;
     --navigation-cutout-main: var(--navigation-cutout);
 
@@ -238,9 +227,7 @@
     --navigation-align: stretch;
     --navigation-position: 0 auto 0 0;
 
-    --navigation-width: calc(
-      var(--navigation-size) + env(safe-area-inset-left)
-    );
+    --navigation-width: calc(var(--navigation-size) + env(safe-area-inset-left));
     --navigation-width-expanded: var(--navigation-width);
 
     --navigation-link-display: block;
@@ -271,10 +258,8 @@
     --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
     --timeline-stroke-position-even: var(--timeline-stroke-position-top)
       var(--timeline-stroke-position-horizontal) auto auto;
-    --timeline-item-margin-odd: 0 0 0
-      calc(50% - var(--timeline-circle-size) / 2);
-    --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0
-      0;
+    --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
+    --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
     --timeline-item-flex-order: 1;
     --timeline-item-content-margin-odd: 0 0 0 1rem;
     --timeline-item-content-margin-even: 0 1rem 0 0;
@@ -298,8 +283,6 @@
 
 @media (hover: hover) and (min-width: 50em) {
   :root {
-    --navigation-width-expanded: calc(
-      var(--navigation-size) * 3.75 + env(safe-area-inset-left)
-    );
+    --navigation-width-expanded: calc(var(--navigation-size) * 3.75 + env(safe-area-inset-left));
   }
 }
diff --git a/src/scss/fontfaces.scss b/src/scss/fontfaces.scss
index 141e332..996c4f9 100644
--- a/src/scss/fontfaces.scss
+++ b/src/scss/fontfaces.scss
@@ -1,2 +1,2 @@
-@import "@/assets/fonts/arvo/arvo";
-@import "@/assets/fonts/secular-one/secular-one";
+@import '@/assets/fonts/arvo/arvo';
+@import '@/assets/fonts/secular-one/secular-one';
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 12cfca0..71dbc42 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -1,4 +1,4 @@
-@import "@/scss/base";
+@import '@/scss/base';
 
 :root {
   font-family: var(--font-family-copy);
@@ -19,7 +19,9 @@ body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background-body);
-  transition: color 0.5s, background-color 0.5s;
+  transition:
+    color 0.5s,
+    background-color 0.5s;
   line-height: var(--text-line-height);
 
   text-rendering: optimizeLegibility;
@@ -41,7 +43,7 @@ main {
   &:after {
     display: block;
 
-    content: "";
+    content: '';
     position: sticky;
     inset: auto 0 var(--navigation-cutout-page-background) 0;
 
@@ -95,8 +97,7 @@ a {
 
   &:hover {
     color: var(--color-link-text-hover);
-    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0
-      var(--color-link-text-underline);
+    box-shadow: inset 0 calc(var(--link-inset-box-shadow) * -1) 0 0 var(--color-link-text-underline);
   }
 }
 
diff --git a/src/views/AttributionsView.vue b/src/views/AttributionsView.vue
index 025998e..a122106 100644
--- a/src/views/AttributionsView.vue
+++ b/src/views/AttributionsView.vue
@@ -1,60 +1,56 @@
 <script setup lang="ts">
-import AttributionTable from "@/components/AttributionTable.vue";
+import AttributionTable from '@/components/AttributionTable.vue'
 
-import ViktorRefAlpha from "@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
-import ViktorFront from "@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools";
+import ViktorRefAlpha from '@/assets/viktor-ref-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
+import ViktorFront from '@/assets/viktor-front-SFW-alpha.png?w=400&format=webp&quality=100&imagetools'
 
 const attributions = [
   {
     artwork: ViktorRefAlpha,
-    artist: "sabertoofs",
+    artist: 'sabertoofs',
     links: {
-      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
-      twitter: "https://twitter.com/sabertoofs",
-    },
+      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
+      twitter: 'https://twitter.com/sabertoofs'
+    }
   },
   {
     artwork: ViktorFront,
-    artist: "sabertoofs",
+    artist: 'sabertoofs',
     links: {
-      furaffinity: "https://www.furaffinity.net/user/sabertoofs",
-      twitter: "https://twitter.com/sabertoofs",
-    },
-  },
-];
+      furaffinity: 'https://www.furaffinity.net/user/sabertoofs',
+      twitter: 'https://twitter.com/sabertoofs'
+    }
+  }
+]
 </script>
 
 <template>
   <section>
     <h1>{{ $t(`${$route.meta.title}`) }}</h1>
-    <h2>{{ $t("attributions.artwork.heading") }}</h2>
+    <h2>{{ $t('attributions.artwork.heading') }}</h2>
   </section>
   <AttributionTable :attributions="attributions" />
   <section>
-    <h2>{{ $t("attributions.other.heading") }}</h2>
+    <h2>{{ $t('attributions.other.heading') }}</h2>
   </section>
   <table>
     <thead>
       <tr>
-        <th>{{ $t("attributions.other.headings[0]") }}</th>
-        <th>{{ $t("attributions.other.headings[1]") }}</th>
+        <th>{{ $t('attributions.other.headings[0]') }}</th>
+        <th>{{ $t('attributions.other.headings[1]') }}</th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td>{{ $t("attributions.other.icons[0]") }}</td>
+        <td>{{ $t('attributions.other.icons[0]') }}</td>
         <td>
-          <a
-            href="https://fontawesome.com/license/free"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">
             Font Awesome
           </a>
         </td>
       </tr>
       <tr>
-        <td>{{ $t("attributions.other.headingFont[0]") }}</td>
+        <td>{{ $t('attributions.other.headingFont[0]') }}</td>
         <td>
           <a
             href="https://github.com/MichalSahar/Secular"
@@ -63,18 +59,14 @@ const attributions = [
           >
             Secular One
           </a>
-          {{ $t("attributions.other.headingFont[1]") }}
-          <a
-            href="https://github.com/MichalSahar"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          {{ $t('attributions.other.headingFont[1]') }}
+          <a href="https://github.com/MichalSahar" target="_blank" rel="noopener noreferrer">
             Michal Sahar
           </a>
         </td>
       </tr>
       <tr>
-        <td>{{ $t("attributions.other.copyFont[0]") }}</td>
+        <td>{{ $t('attributions.other.copyFont[0]') }}</td>
         <td>
           <a
             href="https://antonkoovit.com/typefaces/arvo"
@@ -83,33 +75,19 @@ const attributions = [
           >
             Arvo
           </a>
-          {{ $t("attributions.other.copyFont[1]") }}
-          <a
-            href="https://antonkoovit.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          {{ $t('attributions.other.copyFont[1]') }}
+          <a href="https://antonkoovit.com/" target="_blank" rel="noopener noreferrer">
             Anton Koovit
           </a>
         </td>
       </tr>
       <tr>
-        <td>{{ $t("attributions.other.background[0]") }}</td>
+        <td>{{ $t('attributions.other.background[0]') }}</td>
         <td>
-          {{ $t("attributions.other.background[1][0]") }}
-          <a
-            href="https://haikei.app/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Haikei
-          </a>
-          {{ $t("attributions.other.background[1][1]") }}
-          <a
-            href="https://zcreativelabs.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          {{ $t('attributions.other.background[1][0]') }}
+          <a href="https://haikei.app/" target="_blank" rel="noopener noreferrer">Haikei</a>
+          {{ $t('attributions.other.background[1][1]') }}
+          <a href="https://zcreativelabs.com/" target="_blank" rel="noopener noreferrer">
             z creative labs
           </a>
         </td>
@@ -117,5 +95,3 @@ const attributions = [
     </tbody>
   </table>
 </template>
-
-<style lang="scss"></style>
diff --git a/src/views/CareerPathView.vue b/src/views/CareerPathView.vue
index aeaa881..a67c3f8 100644
--- a/src/views/CareerPathView.vue
+++ b/src/views/CareerPathView.vue
@@ -10,8 +10,8 @@ import TruckIcon from '@/assets/icons/TruckIcon.vue'
 import BoxesIcon from '@/assets/icons/BoxesIcon.vue'
 
 interface Job {
-  title: string;
-  desc: string;
+  title: string
+  desc: string
 }
 
 const jobIcons = [