Library page (#53)

* 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

* Gridview on library page

* Cleaning up styles and markup.

* Fixes overall layout issues.

* Cleans up more styling. Modifies AppBar coloring.

* instance routing

* Allows pagination arrows to conditionally appear in RowDisplay.

* Adds paging behavior in RowDisplay.

* Initial modlist layout

* Updates nav and settings button styling.

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

* Page redesign

* More tweaks

* Base library pages

* Remove errant css

* Update play.svg

* Addressed issues

---------

Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Zachary Baird <zdb1994@yahoo.com>
Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com>

theseus_gui/src/components/ui/News.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { Card, ChevronRightIcon } from 'omorphia'
-
 const props = defineProps({
   news: Object,
 })
@@ -33,59 +32,49 @@ const props = defineProps({
   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%);
@@ -94,4 +83,4 @@ const props = defineProps({
     }
   }
 }
-</style>
+</style>