Adds base UI for launcher. (#48)

* launcher base gui initial

* Bootstraps router, Omorphia, and prettier.

* Adds pages. Adds Vuex. SideBar nav contains user section and pages section.

* Adds Instance markup. Instances added to Home page.

* Adds News to home page.

* Adds settings to nav. Other touches.

* Polishing initial base GUI.

* Moves some styling to assets. Changes px values to rem.

* Removes pointless border-radius CSS.

* Implements Omorphia vars.

* Adds trending mods section.

* Updates home page.

* Swaps Vuex implementation for Pinia.

* Fixes invalid CSS on instance list item hover.

* Adds @ path resolve for imports.

* Fix some styling of row display

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Updates nav and settings button styling.

* Brings in Knossos style for trending mods. Polishes News CSS.

* Updates Omorphia. Starts addressing PR comments.

* Addresses some more PR comments.

* Changes side navigation styling. Active route class implemented.

* Combines trending and popular row.

* Makes images more realistic. Adds CTA to instances.

* Converts all instances to card style. Converts more styles to rem.

* Moves Navigation and UserSection into App.vue

* Adds Modrinth favicon.

* Removes unused styling.

* Adds transition to news card.

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: CodexAdrian <83074853+CodexAdrian@users.noreply.github.com>

theseus_gui/src/components/ui/News.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { Card, ChevronRightIcon } from 'omorphia'
+
+const props = defineProps({
+  news: Object,
+})
+</script>
+
+<template>
+  <Card class="news-cta">
+    <img :src="props.news.img" alt="News Image" />
+    <div class="body">
+      <div class="headline">
+        <h2>{{ props.news.headline }}</h2>
+        <p>{{ props.news.blurb }}</p>
+      </div>
+      <div class="underline">
+        <p>{{ props.news.source }}</p>
+        <a href="#"><ChevronRightIcon /></a>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style lang="scss" scoped>
+.news-cta {
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  background: var(--color-raised-bg);
+  min-width: 24.125rem; /* from wireframe */
+  min-height: 8.5rem; /* from wireframe */
+  box-shadow: var(--shadow-raised-lg);
+  cursor: pointer;
+  transition: all ease-in-out 0.1s;
+
+  &:hover {
+    box-shadow: var(--shadow-floating);
+    filter: brightness(0.85);
+  }
+
+  img {
+    display: flex;
+    width: 8.4375rem; /* from wireframe */
+    height: 8.5rem; /* from wireframe */
+    border-radius: 0.9rem 0 0 0.9rem;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 8.5rem; /* from wireframe */
+    padding: 0.45rem;
+
+    .headline {
+      display: inherit;
+      flex-direction: inherit;
+      margin: 0.4rem 0;
+      width: 100%;
+
+      h2 {
+        font-size: 1rem;
+        text-transform: uppercase;
+      }
+
+      p {
+        font-size: 0.7rem;
+      }
+    }
+
+    .underline {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      margin-top: auto;
+
+      p {
+        font-size: 0.7rem;
+      }
+
+      a {
+        transition: all ease-in-out 0.2s;
+        width: 1.5rem;
+        color: var(--color-primary);
+        font-size: 1.3rem;
+
+        &:hover {
+          transform: translate(1px);
+          filter: brightness(150%);
+        }
+      }
+    }
+  }
+}
+</style>