changed games page to display project entries; moved games from project page to games

src/routes/projects/+page.svelte

@@ -2,8 +2,8 @@
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
     import Content from "$lib/content.svelte";
-    import type { Project } from './projects';
-    import { projects } from './projects';
+    import type { Project } from '$lib/projects';
+    import { projects } from '$lib/projects';
     import LinkList from "$lib/link-list.svelte";
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
@@ -49,40 +49,17 @@
     <div>
         <h3 id="{project.id}">{project.title}</h3>
         {#if project.subtitle}
-        <p class="subtitle">» {project.subtitle}</p>
+        <p class="project-subtitle">» {project.subtitle}</p>
         {/if}
         {#if project.banner}
-        <img class="banner" src="{project.banner}">
+        <img class="project-banner" src="{project.banner}">
         {/if}
         {#if project.icon}
-        <img class="icon" src="{project.icon}">
+        <img class="project-icon" src="{project.icon}">
         {/if}
         {#each project.paragraphs as paragraph}
             <p>{@html paragraph}</p>
         {/each}
         <LinkList entries={project.links} />
     </div>
-{/snippet}
-
-<style>
-    .subtitle {
-        color: var(--color-highlight);
-        font-weight: 700;
-        font-style: italic;
-        margin-top: 0;
-        font-family: var(--font-mono);
-    }
-    
-    .banner {
-        width: 80%;
-        margin-left: auto;
-        margin-right: auto;
-        display: flex;
-    }
-
-    .icon {
-        float: left;
-        margin: 16px 16px 16px 0;
-        width: 20%;
-    }
-</style>
+{/snippet}